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.

Save Time On Research and Writing
Hire a Pro to Write You a 100% Plagiarism-Free Paper.
Get My Paper

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:

Save Time On Research and Writing
Hire a Pro to Write You a 100% Plagiarism-Free Paper.
Get My Paper

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.

    Still stressed from student homework?
    Get quality assistance from academic writers!

    Order your essay today and save 25% with the discount code LAVENDER