forked from Rozen2007/rozbnb
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/Rozen2007/Airbnb-clone-2
- Loading branch information
Showing
1 changed file
with
35 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,49 @@ | ||
| # Next.js + Tailwind CSS Example | ||
| # RozBnb😱 | ||
|  | ||
| This is an Amazing Redesign of AirBnb which is actually a part of a hackathon🐱💻. Basically the task was, to create an Amazing app which uses the Auth0 Sign In Provider🔒. | ||
|
|
||
| This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v2.2)](https://blog.tailwindcss.com/tailwindcss-2-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs). | ||
| ## Tech Stack | ||
|
|
||
| It uses the new [`Just-in-Time Mode`](https://tailwindcss.com/docs/just-in-time-mode) for Tailwind CSS. | ||
| Frontend Framework🔥 : [Next.js](https://nextjs.org/) | ||
| Styling💅 : [Tailwind css](https://tailwindcss.com/) and [Styled Components](https://styled-components.com/) | ||
| Authentication🔒 : [Auth0](https://auth0.com/) | ||
| Map integration🗺️ : [Mapbox](https://www.mapbox.com/) | ||
| Payment Processor💵: [Stripe](https://www.stripe.com/) | ||
| Animations🍃: [React Reveal](https://www.react-reveal.com/) and [Framer motion](https://www.framer.com/motion/) | ||
| Date Picker📅: [React Date Range](https://hypeserver.github.io/react-date-range/ ) | ||
|
|
||
| ## Preview | ||
|
|
||
| Preview the example live on [StackBlitz](http://stackblitz.com/): | ||
|
|
||
| [](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss) | ||
| # Authentication💻 | ||
|  | ||
| For the Authentication, I have used an amazing provider called Auth0. | ||
|
|
||
| ## Deploy your own | ||
|
|
||
| Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
| ## Why did I use Auth0 | ||
| Auth0 provides the most extensive functionality which ensure the user authentication and authorization, with detailed analytics and a variety of available providers. | ||
|
|
||
| [](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss) | ||
| 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 . | ||
|
|
||
| ## How to use | ||
| # Search Results🔎 | ||
|  | ||
| 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](https://www.mapbox.com/). | ||
|
|
||
| Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
| MapBox is a alternative 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](https://jsonkeeper.com/) | ||
|
|
||
| ```bash | ||
| npx create-next-app --example with-tailwindcss with-tailwindcss-app | ||
| # or | ||
| yarn create next-app --example with-tailwindcss with-tailwindcss-app | ||
| ``` | ||
| Search Result Data🔍: https://bit.ly/2UVA8Mo | ||
|
|
||
| Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
| # Payment💳 | ||
|  | ||
|
|
||
| ### Contributors: | ||
| 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](https://stripe.com/). | ||
|
|
||
| [ | ||
|  | ||
| ](https://github.com/Rozen2007/Airbnb-clone-2/graphs/contributors) | ||
| **Stripe is one of most popular payment gateway providers which is used by biggest companies like zoom, amazon, slack and so on.** | ||
|
|
||
| You will be redirected to a page which is where you will have to fill your details in order to proceed to payment. After filling your details, when you will click `Pay` button you will be directed to the the success page, which means, your hotel is officially booked🥳. | ||
|
|
||
| # Contributers | ||
|  | ||
|
|
||
| # Final Build | ||
|
|
||
| https://www.rozendeedi.me/ |