Airbnb Clone 2.0

About The Build:

This Airbnb clone has an Eye-Catching and Interactive UI with especially place search filter and MapBox integration with slick effect. Furthermore, custom Icons have been created and added.

Current Features :

LogIn with Google, Facebook, Github, Twitter

Every Data pulled via OpenDataSet's Airbnb API

Calender Date picker on User Search Input

Custom Details page of every place with every minute detail

Interactive Map displaying location of searched places

Custom Search

Protected Routes

Next.js + Tailwind CSS

Next.js is a React Production Framework which gives the best developer experience with all the features for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

How To Start :

Start with a pre-made Starter Template

Execute create-next-app with npm or Yarn to bootstrap the example with a pre-configured starter template of NextJs App with TailwindCSS:

npx create-next-app --example with-tailwindcss your-app-name
# or
yarn create next-app --example with-tailwindcss your-app-name

Now finally run your Project :

Run your build process with npm run dev or whatever command is configured in your package.json file.

npm run dev

Environment variables :

Open .next.config.js file then edit add this setting

module.exports = {
  env: {
    mapbox_token:"YOUR TOKEN",
  },
};

Create .env.local file add this keys

NEXTAUTH_URL=http://localhost:3000

# GOOGLE KEYS
GOOGLE_CLIENT_ID=key_goes_here
GOOGLE_CLIENT_SECRET=key_goes_here

# GITHUB KEYS
GITHUB_CLIENT_ID=key_goes_here
GITHUB_CLIENT_SECRET=key_goes_here

# FACEBOOK KEYS
FACEBOOK_CLIENT_ID=key_goes_here
FACEBOOK_CLIENT_SECRET=key_goes_here

# TWITTER KEYS
TWITTER_CLIENT_ID=key_goes_here
TWITTER_CLIENT_SECRET=key_goes_here
TWITTER_CLIENT_BEARER_TOKEN=key_goes_here

Author

👤 Divyam Agarwal

• Website: https://divyamag.vercel.app/
• Github: @Divyam2600

Show your support

Give a ⭐️ if this project helped you!