An open API service indexing awesome lists of open source software.

https://github.com/epic-codebase/airbnb_clone_django_nextjs

An Airbnb clone app made with Django DRF and NextJS
https://github.com/epic-codebase/airbnb_clone_django_nextjs

Last synced: 5 months ago
JSON representation

An Airbnb clone app made with Django DRF and NextJS

Awesome Lists containing this project

README

          

# djangobnb

## Overview
A full-stack Airbnb clone using Next.js and Django.

This project is a full-stack Airbnb clone built using **Next.js (React)** for the frontend and **Django** for the backend.

## Features
- 🔍 **Navigation** (Search & User Navigation)
- 🏖 **Categories** (Beach, Villas, Cabins, Tiny Homes, etc.)
- 🔑 **User Authentication** (Login/Signup)
- 💬 **Chat System** (Inbox & Messaging)
- 📅 **Reservations** (Manage bookings & reservations)
- 🏡 **Property Management** (List & Manage Properties)
- 📡 **Backend API** (Connects to Django backend using JSON endpoints)

## Tech Stack
### Frontend (Next.js)
- React + Next.js
- Tailwind CSS for styling
- TypeScript support

### Backend (Django)
- Django REST Framework for API endpoints
- PostgreSQL for database storage
- Authentication using Django's built-in system

## Installation & Setup

### Prerequisites
Ensure you have the following installed:
- **Node.js** (v16+ recommended)
- **Python** (3.8+ recommended)
- **PostgreSQL** (if using a database)

### 1️⃣ Clone the repository
```sh
git clone https://github.com/Epic-Codebase/Airbnb_clone_django_nextjs.git
cd Airbnb_clone_django_nextjs
```

### 2️⃣ Install dependencies

#### Frontend (Next.js)
```sh
npm install
```

### 3️⃣ Run the project
```sh
npm run dev
```

## Packages Used & Their Significance

### **Next.js & React**
- **next** – Framework for server-rendered React applications.
- **react** – Core library for building UI components.
- **react-dom** – Provides React DOM bindings for rendering components in the browser.

### **Styling**
- **tailwindcss** – Utility-first CSS framework for styling.
- **postcss** – A tool to process CSS with plugins like Tailwind.

### **State Management & Utilities**
- **zustand** – Lightweight state management for React.

### **Backend Communication**
- React Router

### **Authentication & Security**
- Managed via Backend APIs

### **Development & Build Tools**
- **typescript** – Provides static type checking for better development experience.

### **Other Utilities**
- **react-date-range** – A date range picker component.
- **react-select** – Customizable select dropdown component.
- **react-use-websocket** – WebSocket hooks for real-time communication.
- **socket.io** & **socket.io-client** – Enables real-time bidirectional communication (likely for chat).
- **world-countries** – Provides country-related data for forms or filters.
- **@types/node**, **@types/react**, **@types/react-date-range**, **@types/react-dom** – TypeScript type definitions for better development.

### License
This project is licensed under the Apache License.

---

_Enjoy building your Airbnb clone!_ 🚀