Code Monkey home page Code Monkey logo

natours's Introduction

NATOURS

Make your life better ๐ŸŽ‡๐ŸŽ‡๐ŸŽ‡๐ŸŽ‡๐ŸŽ‡

Deployment Link => Webiste live here:





Key Features ๐Ÿ“

Natours _ All Tours - Google Chrome 2024-04-05 22-26-29

starter - Visual Studio Code 2024-04-04 23-15-27

Features

  • Signup and create your own account!
  • Login to your account!
  • Each login session is persisted using cookies
  • Reset your password
  • Update your password and profile
  • Stripe payment checkout gateway ๐Ÿ’ธ
  • Upload Profile Picture
  • Email service ๐Ÿ“จ
  • Responsive for Mobiles, Laptops and PC ๐Ÿ“ฑ

How To Use ๐Ÿค”

You can use this email to test:

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.

Build With ๐Ÿ—๏ธ

https://nodejs.org/en/ JWT Express.js

MongoDB

Pug JavaScript HTML5

Easyauth is built using Node and uses core node modules for most of the backend part. MongoDB database is used along with Mongoose API.

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.

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

natours's People

Contributors

islamosama1 avatar

Watchers

 avatar

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.