CS 546 Architecture of A Web Application Project
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
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.
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.
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.