Code Monkey home page Code Monkey logo

airbnb-clone's Introduction

Airbnb Clone

This is a clone of the popular vacation rental marketplace Airbnb, built with Next.js 13.4, Prisma, MongoDB, Next-Auth, Tailwind CSS, TypeScript, and Zustand for learning new NextJS structure and using other new packages. The project aims to replicate key features of Airbnb, allowing users to search for accommodations, view listings, make bookings, and manage their own listings as hosts.

Live Demo

A live demo of the Airbnb Clone can be found at https://jealous-airbnb-clone.vercel.app. Feel free to explore the application and test its features.

Getting Started

To get started with the Airbnb Clone, follow the steps below:

  1. Clone the repository: git clone https://github.com/JealousGx/airbnb-clone.git
  2. Install dependencies: npm install
  3. Set up the environment variables:
  • Create a .env.local file in the root directory.
  • Define the required environment variables (e.g., MongoDB connection string, authentication secrets, etc.) in the .env.local file.
  1. Set up the database:
  • Ensure you have a running MongoDB instance.
  • Update the Prisma connection configuration in the prisma/schema.prisma file with your MongoDB connection details.
  • Migrate the database schema: npx prisma migrate dev
  1. Start the development server: npm run dev
  2. Open your browser and visit: http://localhost:3000

Features

  • User Authentication: Utilizes Next-Auth for user authentication, enabling users to sign up, log in, and log out securely.
  • Accommodation Search: Users can search for accommodations based on location, dates, and other criteria.
  • Listing Management: Hosts can manage their listings by creating, editing, and deleting their accommodations.
  • Booking System: Users can book accommodations and view their booking history.
  • Responsive Design: The application is built with a mobile-first approach using Tailwind CSS, ensuring a seamless experience on different devices.
  • State Management: Zustand is used for efficient state management, providing a simple and intuitive way to manage application state.

Technologies used

  • Next.js 13.4: A React framework for building server-side rendered and static web applications.
  • Prisma: A modern database toolkit for TypeScript and Node.js, used for database management and ORM.
  • MongoDB: A flexible and scalable NoSQL database used to store application data.
  • Next-Auth: A complete authentication solution for Next.js applications.
  • Tailwind CSS: A highly customizable CSS framework for building modern user interfaces.
  • TypeScript: A typed superset of JavaScript that enhances developer productivity and code quality.
  • Zustand: A small, fast state management library for React. And many other libraries.
A clone of Airbnb for learning purpose.

airbnb-clone's People

Contributors

jealousgx avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.