Airbnb Clone

An Airbnb clone project written in TypeScript. The structure and UI are built with NEXT.js / TailwindCSS v3. There are also animations using framer-motion, bar-of-progress, a practical search bar using react-date-range, and MapBox integration using react-map-gl.

• Airbnb Clone
  • Installation
  • User Interfaces
  • Functionalities
  • Acknowledgement

Installation

• install Next.js with Typescript

  npx create-next-app@latest --ts airbnb-clone
  // or npx create-next-app@latest -e with-typescript airbnb-clone
  

• install tailwindcss

  https://tailwindcss.com/docs/guides/nextjs
  

User Interfaces

• HomePage
  • Header & Searchbar
  • Banner
  • Small Card (Explore Nearby)
  • Medium Card (Live Anywhere)
  • Large Card
  • Footer

• Search Page
  • Info Card
  • MapBox & Markers & Popups

Functionalities

• framer-motion
• react-date-range
• bar-of-progress
• mapbox-gl & react-map-gl
• firebase

Acknowledgement

• Sonny Sangha