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

git clone https://github.com/Epic-Codebase/Airbnb_clone_django_nextjs.git
cd Airbnb_clone_django_nextjs

2️⃣ Install dependencies

Frontend (Next.js)

npm install

3️⃣ Run the project

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! 🚀