{"id":2323,"date":"2022-01-26T10:20:25","date_gmt":"2022-01-26T10:20:25","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2323"},"modified":"2022-01-26T10:20:25","modified_gmt":"2022-01-26T10:20:25","slug":"how-i-built-rozbnb-with-next-js-tailwind-css-styled-components-stripe-and-auth0","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2323","title":{"rendered":"How I built Rozbnb with Next.js , Tailwind CSS, Styled Components , Stripe and Auth0"},"content":{"rendered":"\n

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

\"ThinkingTapGIF.gif\"\/<\/figure>\n\n\n\n

How did I got the idea of Travel booking App???<\/strong><\/h3>\n\n\n\n

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.<\/strong><\/p>\n\n\n\n

Awesome Tech I am using ?:<\/strong><\/h2>\n\n\n\n

Frontend Framework? : Next.js<\/a>
Styling? : Tailwind css<\/a> and Styled Components<\/a>
Authentication? : Auth0<\/a>
Map integration?\ufe0f : Mapbox<\/a><\/p>\n\n\n\n

Lets take a quick stroll around my app ?:<\/strong><\/h2>\n\n\n\n

Check out the website :<\/strong> here<\/a><\/p>\n\n\n\n

At start your eye catches an amazing landing page which includes animation using framer motion and react-reveal<\/p>\n\n\n\n

\"image.gif\"\/<\/figure>\n\n\n\n

Authentication ?<\/strong><\/h2>\n\n\n\n

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 <\/a>? . You can login the app with email\/password as well as with Google authentication.<\/p>\n\n\n\n

Why should you use Auth0 in your app ? ?<\/strong><\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Auth0? provides the most extensive functionality which ensure the user authentication and authorization, with detailed analytics and a variety of available providers.<\/p>\n\n\n\n

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 .<\/p>\n\n\n\n

\"login.gif\"\/<\/figure>\n\n\n\n

Search and Date Picker ?<\/strong><\/h2>\n\n\n\n

To search, type in the input field and while you type the date picker dialog will pop up<\/strong>. The date-picker is handled by react-date-range<\/a> and it is easy to implement . To add this feature you will have to –<\/p>\n\n\n\n

Install by executing<\/p>\n\n\n\n

npm install --save react-date-range\n<\/code><\/pre>\n\n\n\n
This plugin expects react<\/code> and date-fns<\/code> as peerDependencies, It means that you need to install them in your project folder.<\/p>\n\n\n\n
npm install --save react date-fns\n<\/code><\/pre>\n\n\n\n
You need to import styles first.<\/strong><\/p>\n\n\n\n
import 'react-date-range\/dist\/styles.css'; \/\/ main style file\nimport 'react-date-range\/dist\/theme\/default.css'; \/\/ theme css file\n<\/code><\/pre>\n\n\n\n
DateRangePicker \/ DateRange<\/code><\/h3>\n\n\n\n
import { DateRangePicker } from 'react-date-range';\n\nclass MyComponent extends Component {\n  handleSelect(ranges){\n    console.log(ranges);\n    \/\/ {\n    \/\/   selection: {\n    \/\/     startDate: [native Date Object],\n    \/\/     endDate: [native Date Object],\n    \/\/   }\n    \/\/ }\n  }\n  render(){\n    const selectionRange = {\n      startDate: new Date(),\n      endDate: new Date(),\n      key: 'selection',\n    }\n    return (\n      <DateRangePicker\n        ranges={[selectionRange]}\n        onChange={this.handleSelect}\n      \/>\n    )\n  }\n}\n<\/code><\/pre>\n\n\n\n
Result Page ?\ufe0f<\/strong><\/h1>\n\n\n\n
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<\/a> and react-mapbox-gl<\/a> which is a proxy components (proxy between React and Mapbox API) <\/strong>. 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<\/a><\/p>\n\n\n\n
\"ezgif.com-gif-maker-2d192a87df01e9848.gif\"\/<\/figure>\n\n\n\n
Payment Page?<\/strong><\/h1>\n\n\n\n
In result page, you will be able to see a buy now<\/code> 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 ?<\/strong> known as Stripe<\/a>. It is one of most popular payment gateway providers which is used by biggest companies like zoom, amazon, slack and so on.<\/strong> And you can customize your checkout page with simple hex colors<\/strong> . 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<\/code> button you will be directed to the the success page?.<\/p>\n\n\n\n
\"payment.gif\"\/<\/figure>\n\n\n\n
Conclusion?<\/strong><\/h1>\n\n\n\n
I hope you find my article interesting and enjoyed my website. I will keep working on it and improving it. Finally thanking @Hashnode<\/a> and Auth0<\/a> for hosting this amazing hackathon which pushed me to write my first blog <3 .<\/p>\n","protected":false},"excerpt":{"rendered":"
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 !<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[161],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2323"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2323"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2323\/revisions"}],"predecessor-version":[{"id":2324,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2323\/revisions\/2324"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}