Skip to content

Instagram 2.0 Clone is built using Next JS + Tailwind CSS powered by Next-Auth and MapBox. Additionally Headless UI, Progress Bar, Date-Fns, React Date-Range, React-Map-GL have been used.

Notifications You must be signed in to change notification settings

Divyam2600/Airbnb-clone-2.0

Repository files navigation

Airbnb Clone 2.0

Version License: MIT Version

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.

Template Screenshot

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

    Show your support

    Give a ⭐️ if this project helped you!