Giter Club home page Giter Club logo

lgope / natours Goto Github PK

View Code? Open in Web Editor NEW
131.0 11.0 52.0 33.29 MB

An awesome tour booking web app written in NodeJS, Express, MongoDB ๐Ÿ—ฝ (NB: This is es6 version but you can find the es5 version in 'es5-version' branch. And as it's free deployed server, could take few moments for first time rendering. Thank you)

Home Page: https://lgope-natours.onrender.com

JavaScript 39.28% HTML 19.58% CSS 16.84% Pug 24.30%
pug-template-engine css3 javascript nodejs expressjs mongoose parceljs stripe-api mongodb-atlas json-web-token

natours's Introduction


Natours
Natours

An awesome tour booking site built on top of NodeJS.

Demo โ€ข Key Features โ€ข Demonstration โ€ข How To Use โ€ข API Usage โ€ข Deployment โ€ข Build With โ€ข To-do โ€ข Installation โ€ข Known Bugs โ€ข Future Updates โ€ข Acknowledgement

Key Features ๐Ÿ“

  • Authentication and Authorization
    • Sign up, Log in, Logout, Update, and reset password.
  • User profile
    • Update username, photo, email, password, and other information
    • A user can be either a regular user or an admin or a lead guide or a guide.
    • When a user signs up, that user by default regular user.
  • Tour
    • Manage booking, check tour map, check users' reviews and rating
    • Tours can be created by an admin user or a lead-guide.
    • Tours can be seen by every user.
    • Tours can be updated by an admin user or a lead guide.
    • Tours can be deleted by an admin user or a lead-guide.
  • Bookings
    • Only regular users can book tours (make a payment).
    • Regular users can not book the same tour twice.
    • Regular users can see all the tours they have booked.
    • An admin user or a lead guide can see every booking on the app.
    • An admin user or a lead guide can delete any booking.
    • An admin user or a lead guide can create a booking (manually, without payment).
    • An admin user or a lead guide can not create a booking for the same user twice.
    • An admin user or a lead guide can edit any booking.
  • Reviews
    • Only regular users can write reviews for tours that they have booked.
    • All users can see the reviews of each tour.
    • Regular users can edit and delete their own reviews.
    • Regular users can not review the same tour twice.
    • An admin can delete any review.
  • Favorite Tours
    • A regular user can add any of their booked tours to their list of favorite tours.
    • A regular user can remove a tour from their list of favorite tours.
    • A regular user can not add a tour to their list of favorite tours when it is already a favorite.
  • Credit card Payment

Demonstration ๐Ÿ–ฅ๏ธ

Home Page :

natoursHomePageonline-video-cutt

Tour Details :

tourOverviewonline-video-cutterc

Payment Process :

paymentprocess-1-ycnhrceamp4-7fW

Booked Tours :

rsz_bookedtours

User Profile :

rsz_userprofile

Admin Profile :

rsz_adminprofile

How To Use ๐Ÿค”

Book a tour

  • Login to the site
  • Search for tours that you want to book
  • Book a tour
  • Proceed to the payment checkout page
  • Enter the card details (Test Mood):
    - Card No. : 4242 4242 4242 4242
    - Expiry date: 02 / 22
    - CVV: 222
    
  • Finished!

Manage your booking

  • Check the tour you have booked on the "Manage Booking" page in your user settings. You'll be automatically redirected to this page after you have completed the booking.

Update your profile

  • You can update your own username, profile photo, email, and password.

API Usage

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.

Check Natours API Documentation for more info.

API Features:

Tours List ๐Ÿ‘‰๐Ÿป https://lgope-natours.onrender.com/api/v1/tours

Tours State ๐Ÿ‘‰๐Ÿป https://lgope-natours.onrender.com/api/v1/tours/tour-stats

Get Top 5 Cheap Tours ๐Ÿ‘‰๐Ÿป https://lgope-natours.onrender.com/api/v1/tours/top-5-cheap

Get Tours Within Radius ๐Ÿ‘‰๐Ÿป https://lgope-natours.onrender.com/api/v1/tours/tours-within/200/center/34.098453,-118.096327/unit/mi

Deployment ๐ŸŒ

The website is deployed with git into Heroku. Below are the steps taken:

git init
git add -A
git commit -m "Commit message"
heroku login
heroku create
heroku config:set CONFIG_KEY=CONFIG_VALUE
parcel build ./public/js/index.js --out-dir ./public/js --out-file bundle.js
git push heroku master
heroku open

You can also change your website URL by running this command:

heroku apps: rename natours-users

Build With ๐Ÿ—๏ธ

  • NodeJS - JS runtime environment
  • 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 and Making payments on the app.
  • Postman - API testing
  • Mailtrap & Sendgrid - Email delivery platform
  • Heroku - Cloud platform
  • Mapbox - Displaying the different locations of each tour.

To-do ๐Ÿ—’๏ธ

  • Review and rating
    • Allow users to add a review directly at the website after they have taken a tour
  • Booking
    • Prevent duplicate bookings after a user has booked that exact tour, implement favorite tours
  • Advanced authentication features
    • Signup, confirm user email, log in with refresh token, two-factor authentication
  • And More! There's always room for improvement!

Setting Up Your Local Environment โš™๏ธ

If you wish to play around with the code base in your local environment, do the following

* Clone this repo to your local machine.
* Using the terminal, navigate to the cloned repo.
* Install all the necessary dependencies, as stipulated in the package.json file.
* If you don't already have one, set up accounts with: MONGODB, MAPBOX, STRIPE, SENDGRID, and MAILTRAP. Please ensure to have at least basic knowledge of how these services work.
* In your .env file, set environment variables for the following:
    * DATABASE=your Mongodb database URL
    * DATABASE_PASSWORD=your MongoDB password

    * SECRET=your JSON web token secret
    * JWT_EXPIRES_IN=90d
    * JWT_COOKIE_EXPIRES_IN=90

    * EMAIL_USERNAME=your mailtrap username
    * EMAIL_PASSWORD=your mailtrap password
    * EMAIL_HOST=smtp.mailtrap.io
    * EMAIL_PORT=2525
    * EMAIL_FROM=your real-life email address

    * SENDGRID_USERNAME=apikey
    * SENDGRID_PASSWORD=your sendgrid password

    * STRIPE_SECRET_KEY=your stripe secret key
    * STRIPE_WEBHOOK_SECRET=your stripe webhook secret

* Start the server.
* Your app should be running just fine.

Demo-.env file :

demo-env-file

Installation ๐Ÿ› ๏ธ

You can fork the app or you can git-clone the app into your local machine. Once done, please install all the dependencies by running

$ npm i
Set your env variables
$ npm run watch:js
$ npm run build:js
$ npm run dev (for development)
$ npm run start:prod (for production)
$ npm run debug (for debug)
$ npm start
Setting up ESLint and Prettier in VS Code ๐Ÿ‘‡๐Ÿป
$ 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

Contributing ๐Ÿ’ก

Pull requests are welcome but please open an issue and discuss what you will do before ๐Ÿ˜Š

Known Bugs ๐Ÿšจ

Feel free to email me at [email protected] if you run into any issues or have questions, ideas or concerns. Please enjoy and feel free to share your opinion, constructive criticism, or comments about my work. Thank you! ๐Ÿ™‚

Future Updates ๐Ÿชด

  • Enable PWA
  • Improve overall UX/UI and fix bugs
  • Featured Tours
  • Recently Viewed Tours
  • And More! There's always room for improvement!

License ๐Ÿ“„

This project is open-sourced under the MIT license.

Deployed Version ๐Ÿš€

Live demo (Feel free to visit) ๐Ÿ‘‰๐Ÿป : https://lgope-natours.onrender.com/

Acknowledgement ๐Ÿ™๐Ÿป

natours's People

Contributors

dependabot[bot] avatar lgope avatar sabbir268 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

natours's Issues

How did you manage to implement the functionality of adding purchased tours on the user page?

Hello! ๐Ÿ˜ƒ

I stumbled across your project by accident))

I was looking for projects where the functionality of displaying the purchased tour after the checkout session was completed was successfully implemented - for some reason I can't implement it. Although the code is exactly the same as in the original Jonas repository and the same as yours.

Maybe you can suggest what could be the problem? Purchased tours are displayed in strapi, but the webhook does not work:

chrome_g9MRYTzm23

user not found:

chrome_nMuI5uZT0H

the error comes from here:

GWSL_vcxsrv_R6HfuGC7Hx

tell me, please, what could be the problem?

The redirect to the user's tours page works, but for some reason it is impossible to find the user, judging by the error.
tell me, please, what could be the problem? Maybe you have encountered such a problem?

in the app.js file I use express.raw({type: application/json}) as I need to use "raw" data:

GWSL_vcxsrv_ACGX5Mka90

from my perspective, my code is exactly the same as yours, i think. - here is the code of the bookingController.js file:

GWSL_vcxsrv_oRl7N3ARF8

and here is the rest of the code:

GWSL_vcxsrv_tDUNtbmgnp

I also checked the environment variables several times - they are correct and I specified them in the heroku settings

I have been trying to solve this problem for the third day and I can not understand why my code does not work ((

here is what i get:

stripe-booking.mp4

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.