An Awesome Tour Booking Site BUILT ON TOP OF NodeJS.
Natours is a highly functional tour booking website developed on NodeJS, which offers a wide array of features. These include authentication and authorization, providing users with the ability to log in and out of their accounts, and allow them to search for tours, book them, manage their bookings, and also update their profiles. It also provides API endpoints for accessing information about tours such as tour stats, top 5 cheap tours, and tours within a radius. Furthermore, it provides a secure and user-friendly credit card payment to facilitate seamless and safe transactions.
- Key Features
- Demonstration
- API Usage
- How To Use
- Installation
- Build With
- Future Updates
- Acknowledgement
You can visit the live demo of Natours by clicking here. 👉 : https://natours-pw5m.onrender.com/
| Components |
|---|
 |
| Features | Description |
|---|---|
| Authentication & Authorization | This feature provides users with login and logout functionality to access the system. |
| Tour Management & Modeling | includes the ability to manage tour bookings, render tour maps, and display user reviews and ratings on each tour. |
| User Profile Updates | This feature enables users to update their profile information, such as their username, photo, email, and password. |
| Credit Card Payment System | This feature provides a secure payment system that enables users to make online payments using their credit cards. |
Natours provides a highly interactive and user-friendly interface for users to book their tours. Some of the major highlights of Natours are:
| Sign Up Page | Login Page | Forget Password |
|---|---|---|
 |
 |
 |
| Home Page | Tour Details |
|---|---|
A highly intuitive and aesthetically pleasing home page with a visually appealing animation. |
Users can view detailed information about tours, such as their ratings and reviews.  |
| Payment Process | Booked Tours |
|---|---|
A streamlined payment process that allows users to pay for their tours quickly and easily.  |
Users can view a list of all the tours they have booked.  |
| User Profile | Admin Profile |
|---|---|
Users can update their profiles, including their names, profile pictures, email addresses, and passwords.  |
Administrators can manage the website and view detailed information about the tours and users.  |
Before using the API, you need to set the variables in Postman depending on your environment (development or production). Simply add:
- {{URL}} with your hostname as value (Eg. http://127.0.0.1:3000 or http://www.example.com)
- {{password}} with your user password as value.
For more info check API Documentation on Postman 👉 : Natours API Documentation.
- Some API End-Points:
If you want to book a tour through Natours, simply follow the steps given below:
- Sign up or Login to the site with the following email and password.
- Email. : loulou@example.com
- Password : test1234
- Search for tours you want.
- Choose a tour and Book it.
- Proceed to the payment checkout page.
- Enter the card details (Test Mode):
- Card No. : 4242 4242 4242 4242
- Expiry date: 05 / 25
- CVV: 222
- To access the tour you have booked, go to the "Manage Booking" page located in your user settings. Upon completion of the booking, you will be automatically directed to this page.
- Keep your profile up-to-date by modifying your username, email, password, and profile picture.
There are two ways to get the app up and running on your local machine:
- Fork the app on GitHub
- Git-clone the app into your local machine
After that, you need to install all the dependencies by running the following command in your terminal: $ npm i then you will also need to set your environment variables.
Once you have installed the dependencies and set your environment variables, you can use the following commands to build and run the app:
- To watch the JavaScript files for changes and automatically rebuild, run:
$ npm run watch:js - To build the JavaScript files for production, run:
$ npm run build:js - To start the app in development mode, run:
$ npm start - To start the app in production mode, run:
$ npm run start:prod - To run the app in debug mode, run:
$ npm run debug
-
To set up ESLint and Prettier in VS Code, run the following command:
$ npm i eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-node eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --save-dev
Natours was built using the following technologies:
- Express - The web framework used
- Mongoose - Object Data Modelling (ODM) library
- MongoDB Atlas - Cloud database service
- Pug - High performance template engine
- JSON Web Token - Security token
- ParcelJS - Blazing fast, zero configuration web application bundler
- Stripe - Online payment API
- Postman - API testing
- Mailtrap & Mailgun - Email delivery platform
- Render - Cloud platform
- I also utilize ESLint and Prettier for code formatting and style.
- Enable PWA
- Improve overall UX/UI and fix bugs
- Render ability for user to write comments
- Show Recently Viewed Tours and Featured Tours
- And More ! There's always room for improvement!
This project is part of the online course I've taken at Udemy. Thanks to Jonas Schmedtmann for creating this awesome course! Link to the course: Node.js, Express, MongoDB & More
If you require any assistance or have any questions or suggestions, please don't hesitate to contact me via Email. I would be more than happy to help you in any. Thank you for your time and consideration! 🙂