The Motivation

I was exploring Auth0 for my website's Authentication so I came across this amazing Hackathon which was hosted by Auth0 and @Hashnode. So I thought why not to give a try ??? And then the biggest question mark in my mind was what to make !

How did I got the idea of Travel booking App💡??

A few weeks ago a great youtuber called Sonny Sangha hosted a 5day challenge of cloning Airbnb , so after strategizing I planned to make that clone into a better website with authentication , animation , better UI and so on.

Awesome Tech I am using 💥:

Frontend Framework🔥 : Next.js
Styling💅 : Tailwind css and Styled Components
Authentication🔒 : Auth0
Map integration🗺️ : Mapbox

Lets take a quick stroll around my app 😎:

Check out the website : here

At start your eye catches an amazing landing page which includes animation using framer motion and react-reveal

Authentication 🔒

To login to the website you will have to click on the avatar on the top right corner and it will redirect you to a Sign In page with a button which says "SignIn with Auth0". This page is handled by Next-Auth. After clicking the button, you will be redirected to one of the coolest authentication providers known as Auth0 🔒 . You can login the app with email/password as well as with Google authentication.

Why should you use Auth0 in your app ? 🤔

I'm sure you won't regret !! give it a try , you will get a perfect solution (😊hope so),The Auth0 will make your virtual implementation easy.

Auth0🔒 provides the most extensive functionality which ensure the user authentication and authorization, with detailed analytics and a variety of available providers.

I noticed that there is a need to add social authentication to apps while I was practicing .Apparently I was looking for a solution and I came across Auth0. Its security, universality, and ease of use made me choose this for my Authentication .

Search and Date Picker 🔍

To search, type in the input field and while you type the date picker dialog will pop up. The date-picker is handled by react-date-range and it is easy to implement . To add this feature you will have to -

Install by executing

npm install --save react-date-range

This plugin expects react and date-fns as peerDependencies, It means that you need to install them in your project folder.

npm install --save react date-fns

You need to import styles first.

import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

DateRangePicker / DateRange

import { DateRangePicker } from 'react-date-range';

class MyComponent extends Component {
  handleSelect(ranges){
    console.log(ranges);
    // {
    //   selection: {
    //     startDate: [native Date Object],
    //     endDate: [native Date Object],
    //   }
    // }
  }
  render(){
    const selectionRange = {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
    return (
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={this.handleSelect}
      />
    )
  }
}

Result Page 🗺️

After clicking the search button you will be redirected to the result page. The first thing which you will be seeing in the result page is a Dark themed map with a series of hotels. The map is handled by MapBox and react-mapbox-gl which is a proxy components (proxy between React and Mapbox API) . MapBox is a alternate for google map which doesn't ask for any kind of details and we can style the map for our necessity. And the series of hotels is fetched from a fake json api which is possible with Jsonkeeper

Payment Page💳

In result page, you will be able to see a buy now button on the info card and when you click on it , you will be redirect to the payment page . This page is handled by one of the secured payment gateway providers 🔒 known as Stripe. It is one of most popular payment gateway providers which is used by biggest companies like zoom, amazon, slack and so on. And you can customize your checkout page with simple hex colors . When you are redirected to the Stripe checkout page , you will be seeing the hotel's picture with the price which is followed with a form where you will enter your personal details. After filling your details, when you will click Pay button you will be directed to the the success page🥳.

Conclusion🧿

I hope you find my article interesting and enjoyed my website. I will keep working on it and improving it. Finally thanking @Hashnode and Auth0 for hosting this amazing hackathon which pushed me to write my first blog <3 .

Contributors -

Feel free to checkout and contribute by forking the repository on GitHub ❤️
love to hear your suggestions and reviews

Signing off 👋
~ Rozen💕