Travlr is a medium-level Full-Stack Travel App Prototype built with Angular (frontend), Node.js/Express (backend), and MongoDB. It allows users to explore trips, view details, and manage trip data through a dynamic web interface.
Preview Images
| Home | Travel | Rooms |
|---|---|---|
 |
 |
 |
| Meals | News | About |
|---|---|---|
 |
 |
 |
| Contact |
|---|
 |
Features
Full Stack Architecture with a MEAN stack
- MongoDB for NoSQL data storage
- Express.js for RESTful API and server-side routing
- Angular for the administrative Single-Page Application (SPA)
- Node.js runtime environment
User Facing Website
- Public travel booking website built with Express, Handlebars (HBS), HTML, CSS, and JavaScript
- Dynamic rendering of travel packages using JSON data
- Browse trips by destination, price, and package details
- View trip information, including rooms, meals, and travel details
Database Supported
- Uses MongoDB for back end for NoSQL data storage
- CRUD operations (Create, Read, Update, & Delete) for travel packages
Angular SPA Admin Page
- Manage travel packages, pricing, and trip data
- Communicates with Express API using HTTP requests
- Provides rich client-side functionality beyond a static site
Security
- User registration and login system
- JWT-based authentication for secure login
- Password hashing with crypto (PBKDF2 + salt)
Software Design & Documentation
- Clear consise comments
- Software Design Document (SDD) included
- Clear explanation of MEAN stack usage
Tools Used
- MongoDB
- Express.js
- Angular
- Node.js
- Mongoose
- HBS
- JWT
How to Install/start
The easiest way to test this project is to do everything in order and step by step. Do not skip ahead or activate only 1 or the other. (Example: Don't activate ONLY the front end or ONLY the backend).
Initial Setup:
- Download or clone the repository.
- Place the project folder in a location you can easily find.
- Open the project folder in a code editor (such as VS Code).
Back end:
- Open a terminal in the project root directory (travlr-app)
- Install dependencies
- npm install
- Create a .env file in the root directory
- JWT_SECRET=your_secret_key_here
- Start the backend server
- npm start
- The Express API will run on
LEAVE THIS TERMINAL RUNNING.
Front end:
- Open a second terminal
- Navigate to the Angular admin directory (app_admin)
- Install Angular dependencies
- npm install
- Start the Angular application
- ng serve
- The Angular admin site will run on
LEAVE THIS TERMINAL RUNNING.
Database:
- Install MongoDB
- Download and install MongoDB from: https://www.mongodb.com/try/download/community
- Clone the Repository
- Import the trips.json Database
- mongoimport --db travlr --collection trips --file path/to/trips.json --jsonArray
- mongoimport --db travlr --collection trips --file data/trips.json --jsonArray
- If step 3 was done correctly you should see something along the lines off "imported X documents"
- Open the Mongo shell
- mongo
- Check that your database exists
- show dbs
- Switch to your database and see the collections
- use travlr
- show collections
- Now test if you can View data
- db.trips.find().pretty()
- Restart your project
- Restart Front End
- Restart Back End
How to use?
Now that everything is open test it out!
Here is some links you can test with everything open!
Back End!
Front End!
Ways To Expand
With the way this project is built and the amount of time put into it with every comment it's easily expandable upon here is some suggestions.
-
User Accounts: Allow users to create accounts, log in, and save their favorite trips.
-
Search & Filters: Enable searching trips by name, location, length, or start date.
-
Sorting: Sort trips by length, date, or popularity.
Frequently Asked Questions
Q: How do I Restart X? A: Press Ctrl + C to close the terminal then type the start command again for what you would like to restart.
Q: How do I start Mongo DB? A: MongoDB is actually already running most likely! In the install you will set it up as a service on your computer which means it will run 24/7. Personally I didn't do that and created a script I can run so I don't have it running always but you can install it anyways you feel.
Q: How do I STOP MongoDB? A: There is tons of tutorials for this. Here is there offical Support page. https://www.mongodb.com/resources/products/fundamentals/uninstall-mongodb
Known Bugs
- When Loading into the Angular Admin portal the page is blank.
- this is a bug that can be temporarily fixed by clicking "Travlr" in the top left.
Rubric
Competency In this project, you will demonstrate your mastery of the following competencies:
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 can maintain a customer base, available trip packages, and pricing for each item and package.”
Travlr Getaways logo
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. These tools are available to you to develop the app. First, you must map out the architectural components and set up the development environment. This step includes completing your initial setup of the Node.js server and the Express framework. Next, you will customize the customer-facing webpage to align with 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. You are responsible for building the functionality of the front end and considering both client- and server-side coding. You must think ahead about the administrator interface, how you will generate request responses using traveler search criteria, and how you will collect login identification. Once completed, you will focus on the server side of the full stack application and set up the MongoDB database.
Next, you will code the backend of the application. You must create and configure a NoSQL database with data models and a schema for data files and storage. Using this database, you can store travel booking trips. You can 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 can view the seeded collections and documents in the database. You must wire the database to the server, test the RESTful API, and refactor the code to work successfully with the front end.
Once you have completed the customer front-end development and designed the back-end architecture for building a full stack travel application, you will be ready to produce a more complex front end to support the administrative functions to manage the database.
You will then complete the last few steps of the full stack development for Travlr Getaways. You must 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 front end. Angular offers many fully integrated tools to facilitate the build. Once completed, you will test the application with the API and make certain the server returns 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 your client, Travlr Getaways, provided, including the scenario and the wireframe, to outline your client’s software requirements. You will use this information and the full stack guides in the Supporting Materials section to support your development of a full stack web application that meets Travlr Getaways’ vision.
Note: You have worked on developing the full stack web application throughout the course. Additional guidance for completing each application component is outlined in detail in the module assignments and the full stack guides. Be certain 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 actions:
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: Use the Handlebars (HBS) 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 to store 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: Use 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.
Note: You have worked on completing this document throughout the course. Additional guidance for completing each SDD section is outlined in the milestones. Be certain 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 rubric criteria:
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 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.
Questions
(You don't have to read this. This is only for a homework assignment with this repository)
Compare and contrast the types of frontend development you used in your full stack project, including Express HTML, JavaScript, and the single-page application (SPA).
- For this project I used a mix of frontend approaches. Express HTML and JavaScript handled basic dynamic elements and server-side rendering, which made some pages simple to display quickly. The Angular SPA on the other hand allowed the app to be much more responsive and interactive, since pages could update without full reloads
Why did the backend use a NoSQL MongoDB database?
- Backend is something that needs to be fast and reliable. This is a big issue Many developers faced and with MongoDB I barely faced this issue. This was because MongoDB is extreamly light weight and flexable. This made it easy to store trips and user data without worrying about fixed tables while also using the Json format which is extreamly simple compared to others.
How is JSON different from Javascript and how does JSON tie together the frontend and backend development pieces?
- JSON is a data format, not a programming language like JavaScript. In this project, JSON was the main way the frontend and backend communicated. Angular would send requests to the backend and receive JSON responses, which made it easy to display data dynamically in the SPA. It basically acted as the bridge between the two sides of the project.
Provide instances in the full stack process when you refactored code to improve functionality and efficiencies, and name the benefits that come from reusable user interface (UI) components.
- the one that instantly comes to my head is the trip-cards file. To ensure it works I did it manually for each and every one but I learned we are going to make it reusable which heavily sped up development and allowing for new trips to be made on the fly.
Methods for request and retrieval necessitate various types of API testing of endpoints, in addition to the difficulties of testing with added layers of security. Explain your understanding of methods, endpoints, and security in a full stack application.
- Testing involved making sure all API endpoints worked correctly for GET, POST, PUT, and DELETE requests. Adding secure admin login made it more complex because some routes required authentication, so I had to test that unauthorized users couldn’t access protected data. I learned how important it is to check both functionality and security when building full stack apps.
How has this course helped you in reaching your professional goals? What skills have you learned, developed, or mastered in this course to help you become a more marketable candidate in your career field?
- This course has done a lot for me personally. I was able to finally dip my toes into full stack development and get a deeper bite into NOSQL as it was something briefly touched on in my most recent class. This class definintely taught me skills that will be used in the future going forward. Especially in time management as with how hectic my personal life has been I am proud of the product I delievered and how I was able to catch up eventually.