Airbnb Clone 👋

Welcome to my Airbnb Clone project! This is a modern, responsive web application built to replicate core functionalities of Airbnb, allowing users to explore listings, filter properties, and register using Google or GitHub authentication. It’s designed to provide a seamless user experience for finding accommodations worldwide.

---

🌟 Features

• User Registration & Authentication: Users can sign up and log in using Google or GitHub OAuth.
• Property Listings: Browse and filter properties by location, price, and category (e.g., Modern, Beach, Countryside).
• Search & Filters: Interactive search with location maps, date pickers, and guest/room filters.
• Booking System: View property details, check availability, and reserve stays with a calendar interface.
• Responsive Design: Fully responsive across desktop and mobile devices, optimized for user convenience.

---

🛠 Technologies

This project is built with the following technologies:

• Frontend:

  • Next.js (v13.4.3) for server-side rendering and static site generation.
  • React (v18.2.0) and React DOM for dynamic UI components.
  • TypeScript (v5.8.2) for type safety and maintainability.
  • Tailwind CSS (v3.3.2) for rapid, utility-first styling.
  • React Hook Form, React Date Range, and React Select for form handling and date selection.
  • React Leaflet for interactive maps using Leaflet (v1.9.4).
  • React Icons for customizable icons.
  • Zustand for state management.

• Backend & Data:

  • Next-Auth (v4.22.1) with Prisma Adapter (v1.0.7) for authentication.
  • Prisma (v4.16.2) and MongoDB with Atlas for database management.
  • Axios (v1.4.0) for API requests.
  • World-Countries (v5.1.0) for location data.

• Deployment:

  • Vercel for hosting and deployment (live at https://air-rent-bnb.vercel.app).

• Tools:

  • ESLint and Prettier for code quality.
  • Webpack and Node.js for bundling and runtime.

---

📸 Screenshots

Here are some key screens from the application:

Homepage showcasing property listings with filters for location and category.

Login modal with Google and GitHub authentication options.

Property details page with availability calendar and reservation options.

Search filters for location, dates, and guest preferences.

Booking page with trip details and cancellation options.

---

🚀 Getting Started

To run this project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/berkaynayman/airbnb.git
   cd airbnb
   

2. Install Dependencies:

    npm install
   

3. Set Up Environment Variables:

   Create a .env.local file in the root directory and add your environment variables:

   NEXTAUTH_SECRET=your-secret-key DATABASE_URL=your-mongodb-atlas-url GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret GITHUB_ID=your-github-id GITHUB_SECRET=your-github-secret

4. Run the Development Server:

   npm run dev
   

5. Open in Browser:

   Navigate to http://localhost:3000 to see the app in action.

Deployment

The project is deployed on Vercel and can be accessed live at https://air-rent-bnb.vercel.app. Use Vercel for easy deployment following their documentation.

Contributions

Feel free to fork this repository, submit issues, or suggest improvements. I’m always open to collaborative learning and enhancing the project!

About Me

I’m Berkay Nayman, a Frontend Developer passionate about building impactful web and mobile solutions. Check out my other projects on GitHub or connect with me on LinkedIn.

License

This project is open-source and available under the MIT License. See the LICENSE file for more details.