Milestone 1

You are currently working toward building a full stack web application for your client, Travlr Getaways. It is important to think about the overall system view of how all the pieces of the web app will come together to be a fully functioning website, which will include a customer-facing website, a database, and an admin single-page application that all need to work together.

Web applications are an inherently complicated undertaking because of the variety of complex technologies that must work together seamlessly and scale up to support thousands of connections in a short time frame. As part of your deliverables to the client, Travlr Getaways, you will need to prepare documentation to explain your process and the various components associated with the full stack web app.

It’s best practice to document your plan for full stack development as you progress through a project. The Software Design Document (SDD) is an engineering document that contains technical specifications and some written descriptions and explanations. You will complete several components of the SDD in Milestone One.

Prompt

This milestone is intended for you to begin preparing the design documentation needed to deliver to your client, Travlr Getaways. Specifically, you will provide a high-level overview, a description of the design constraints, and a diagram that demonstrates the architecture of the web app. Keep your audience in mind and be sure to communicate clearly and concisely in client-facing documentation. Complete the following sections of the Software Design Document for your client:

Executive Summary: An executive summary is used to introduce the software design problem and present a solution. Be sure to provide the client with any critical information they must know in order to proceed with the process you are proposing. It will be essential to address the following in the Executive Summary section of the SDD:

Describe the appropriate architecture of the web application based on your client’s software requirements.

Reference your use of the MEAN stack for development.

Explain both the customer-facing side of the application and the administrator single-page application (SPA).

Design Constraints: Building an application has constraints. These constraints are things that provide boundaries or guardrails for the project and naturally come with limitations. Be sure to address the following in the Design Constraints section of the SDD:

Identify the design constraints for developing the web-based Travlr Getaways application.

Explain the implications of the design constraints on the application development.

System Architecture View: Component Diagram: A component diagram has already been created for you. Review the diagram provided and address the following in the System Architecture: Component Diagram section of the SDD:

Describe the overall system architecture of the web application by referring to the component diagram provided in the SDD.

Identify the significant components that will be used and their relationship to one another.

Please note: You will continue to add diagrams and complete additional sections of the Software Design Document throughout the course as you develop each aspect of the full stack web application.

Guidelines for Submission

Using the template provided, complete the following sections of the Software Design Document: Executive Summary, Design Constraints, and System Architecture View: Component Diagram. Submit the SDD with these sections completed to Brightspace.

CS 465 Project Software Design Document
Version 1.0
Table of Contents
CS 465 Project Software Design Document
Table of Contents
Document Revision History
Instructions
Executive Summary
Design Constraints
System Architecture View
Component Diagram
Sequence Diagram
Class Diagram
API Endpoints
The User Interface
1
2
2
2
3
3
3
3
4
4
4
4
Document Revision History
Version
1.0
Date
Author
Comments
Instructions
Fill in all bracketed information on page one (the cover page), in the Document Revision History table,
and below each header. Under each header, remove the bracketed prompt and write your own
paragraph response covering the indicated information.
2
Executive Summary
Design Constraints
System Architecture View
Component Diagram
A text version of the component diagram is available: CS 465 Full Stack Component Diagram Text
Version.
3
Sequence Diagram
Class Diagram
API Endpoints
Method
GET
GET
Purpose
URL
Notes
The User Interface
4
Competency
In this project, you will demonstrate your mastery of the following
competency:
•
•
•
Design the architecture of a web application
Build a web application using frameworks
Develop and integrate a database using frameworks
Scenario
You are a software developer working for a software development company.
Your supervisor assigned you to build a travel booking website for a new
client, Travlr Getaways. The marketing department at Travlr Getaways has
provided the specs and a wireframe to guide the development of the website.
Your role as a software developer is to produce a fully functional travel web
application that meets Travlr Getaways’ requirements:
“We are looking to create a travel booking site for our customers to book
travel packages. Our customers must be able to create an account, search for
travel packages by location and price point, and book reservations with our
travel agency. Customers must also be able to visit our website regularly
before their trip to see their itineraries. We are also seeking to have an adminonly site where Travlr Getaways administrators are able to maintain a
customer base, available trip packages, and pricing for each item and package.”
Begin by exploring the architecture of a full stack web application that uses the
MEAN stack. MEAN stands for the essential full stack tools (MongoDB,
Express, Angular, and Node.js), which you have available to you to develop the
app. You will first need to map out the architectural components and set up
the development environment. This includes completing your initial setup of
the Node.js server and the Express framework before you begin working. Next,
you will customize the customer-facing web page to align to the wireframe
provided and meet Travlr Getaways’ vision.
The wireframe will be an initial reference to guide the construction of a static
customer-facing website using HTML, CSS, and JavaScript. It will be up to you
to build in the functionality of the frontend and consider both client- and
server-side coding. You will need to think ahead about the administrator
interface, how you will generate request responses using traveller search
criteria, and collecting login identification. Once completed, you will turn your
focus to the server side of the full stack application and set up the MongoDB
database.
Next, it will be time to code the backend of the application. You will need to
create and configure a NoSQL database with data models and a schema for
data files and storage. Using this database, you will be able to store travel
booking trips. You will be able to create JSON files containing initial data for
seeding the database to enable testing of the RESTful API routes. Then, you
will populate the database and be able to view the seeded collections and
documents in the database. You will need to wire the database to the server,
test the RESTful API, and refactor the code to work successfully with the
frontend.
Once you have completed the customer frontend development and designed
the backend architecture for building a full-stack travel application, you will be
ready to produce a more complex frontend to support the administrative
functions to manage the database.
Finally, you will complete the last few steps of the full stack development for
Travlr Getaways. You will need to complete the client single-page application
(SPA) using Angular, add security features, and do final testing on the full stack
web application. You will use the Angular Command Line Interface (CLI) to
build components and services for the client-facing frontend. Angular offers a
host of fully integrated tools to facilitate the build. Once completed, you will
test it with the API and make sure the server is returning the data properly.
Finally, Travlr Getaways wants you to add a layer of security that applies to
server-side applications to produce web tokens for web-login authentication.
Directions
Full Stack Web Application
Review the information provided by your client, Travlr Getaways, including the
scenario and the wireframe, to outline your client’s software requirements.
You will use this information and the Full Stack Guide (in the Supporting
Materials section below) to support your development of a full stack web
application that meets Travlr Getaways’ vision.
Please note: You have worked on developing the full stack web application
throughout the course. Additional guidance for completing each component of
the application is outlined in detail in the module assignments and the CS 465
Full Stack Guide. Be sure to implement the feedback you receive along the
way, as you will need to submit your fully functional full stack web application
as part of the Project submission.
Specifically, your full stack web application must demonstrate your ability to
do the following:
•
•
•
•
•
•
•
Customer-Facing Website: Develop and run a complex public customerfacing web application that meets software requirements.
MVC Routing: The customer-facing website must be an Express web
application with routes, controllers, views, and data models.
Static HTML to Templates with JSON: Utilize the Handlebars templating
engine to move the static HTML site to templates to render JSON data
dynamically within the application.
NoSQL Database: Configure a NoSQL database using Mongoose for
storing data in the server side of the software application.
RESTful API: Integrate RESTful API with a NoSQL database, which is
organized using models and schemas with existing software frameworks.
SPA: Utilize frameworks to include rich functionality and features in a
SPA to meet software requirements. Use the test data provided and add
other examples of tours with dates and other data to test the SPA.
Security: Refactor the code to add security controls, including a login
form, and apply best practices to ensure authorized access using secure
endpoints.
Software Design Document (SDD)
Throughout your full stack app development, you will present your work to the
software development team for approval using a software design document.
Be prepared to explain your approach as you build each component of the full
stack travel application.
Please note: You have worked on completing this document throughout the
course. Additional guidance for completing each section of the SDD is outlined
in the Milestones. Be sure to implement the feedback you receive along the
way, as you will need to submit your finalized SDD as part of the Project
submission.
Specifically, you must address the following in your final SDD:
•
Executive Summary
o Describe the appropriate architecture of the web application
based on your client’s software requirements. Be sure to reference
your use of the MEAN stack for development. Explain both the
customer-facing side of the application and the administrator
single-page application (SPA).
•
System Architecture View
o Component Diagram: Describe the overall system architecture of
the web application by referring to the component diagram
provided in the SDD. Be sure to identify the significant
components that will be used and their relationships to one
another.
o Sequence Diagram: Illustrate the flow of logic in a web application
by completing a sequence diagram. Describe the flow of logic in
the web application based on the sequence diagram. Be sure to
describe the interactions between the layers, or tiers, of the full
stack application. It will be helpful to include significant processes
such as Sign In, Trips, and Admin interactions when referring to
the sequence diagram.
•
User Interface
o Summarize the Angular project structure and how it compares to
the Express project structure. Be sure to describe the rich
functionality provided by the SPA compared to a simple web
application interaction.
o Describe the process of testing to make sure the SPA is working
with the API to GET and PUT data in the database.
Please note: You completed the information needed for the User Interface
section of the SDD in the Module Six Journal.