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 admin-only 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 customer-facing 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 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 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. 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 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. 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. What to Submit To complete this project, you must submit the following: Full Stack Web Application Submit your final iteration of the completed full stack web application, which meets Travlr Getaways’ software requirements, as a zipped file folder (travlr.zip). Software Design Document Submit a completed software design document using the template provided. Be sure to complete all sections and address all items in the rubric and directions. Supporting Materials The following resource(s) may help support your work on the project: Image: Travlr Getaways Wireframe A wireframe is like a blueprint to help you think about the architecture of a web-based software application. Refer to the wireframe provided by Travlr Getaways to ensure your architecture and full stack application align with your client’s expected output. A text version of the wireframe is available: Travlr Getaways Wireframe Text Version. Document: CS 465 Full Stack Guide Use this guide throughout this course to support your development of the full stack web application.