https://github.com/maliha-tasnim/staycation-bnb

This project is a full-stack clone version of the original Airbnb application.
https://github.com/maliha-tasnim/staycation-bnb

axios cloudinary leaflet-map mongodb-database nextauth nextjs prisma react-hook-form react-icons-component reactjs responsive-design server-side-rendering tailwind-css typescript

Last synced: 8 days ago
JSON representation

This project is a full-stack clone version of the original Airbnb application.

• Host: GitHub
• URL: https://github.com/maliha-tasnim/staycation-bnb
• Owner: Maliha-Tasnim
• License: mit
• Created: 2024-11-22T18:02:40.000Z (about 2 months ago)
• Default Branch: master
• Last Pushed: 2025-01-02T19:15:53.000Z (10 days ago)
• Last Synced: 2025-01-02T20:22:40.858Z (10 days ago)
• Topics: axios, cloudinary, leaflet-map, mongodb-database, nextauth, nextjs, prisma, react-hook-form, react-icons-component, reactjs, responsive-design, server-side-rendering, tailwind-css, typescript
• Language: TypeScript
• Homepage: https://staycation-xi.vercel.app
• Size: 272 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
StayCationBnB-A Full Stack Airbnb Clone Application
 







    

    

    

    

    

    

    



  

  
« Demo Application »


 

    Airbnb is an American company operating an online marketplace for short-and-long-term homestays and experiences in various countries and regions. This project is a comprehensive Airbnb clone application built with Next.js 13 App Router, featuring full authentication, real-time booking system, and advanced search functionality.



##  Tech Stack

🔹Frontend: Next.js 13, React, Tailwind CSS

🔹Backend: Next.js API Routes, Prisma ORM

🔹Database: MongoDB

🔹Authentication: NextAuth.js

🔹Image Hosting: Cloudinary CDN

🔹Form Handling: React Hook Form

🔹Date Management: React Date Range

🔹Notifications: React Hot Toast

## Key Features

🔹Authentication & User Management

        1.Multi-provider authentication (Credentials, Google, GitHub)

        

        2.Protected routes and API endpoints

        

        3.User profile management

🔹Property Management

        1.Property listing creation and deletion

        

        2.Image upload with Cloudinary integration

        

        3.Advanced pricing calculation system

        

        4.Property categorization

🔹Booking System

        1.Real-time availability checking

        

        2.Booking creation and management

        

        3.Guest/Owner reservation cancellation

        

        4.Date range selection with conflicts prevention

🔹Search & Filters

        1.Category-based filtering

        

        2.Location-based search

        

        3.Date range availability filtering

        

        4.Guest/room/bathroom quantity filters

        

        5.Shareable URL filters for search results

🔹UI/UX Features

        1.Responsive design with Tailwind

        

        2.Loading states and animations

        

        3.Empty state handling

        

        4.Toast notifications for user feedback

        

        5.Favorites system

## Project Structure

        ├── app/

        │   ├── api/          # API routes

        │   ├── components/   # React components

        │   ├── hooks/        # Custom hooks

        │   ├── libs/         # Utility functions

        │   ├── providers/    # Context providers

        │   └── types/        # TypeScript types

        ├── prisma/

        │   └── schema.prisma # Database schema

        └── public/           # Static assets

## API Routes

🔹Authentication

`POST /api/register` - User registration

`POST /api/login` - User login

`GET /api/auth/[...nextauth]` - NextAuth endpoints

🔹Properties

`GET /api/properties` - List properties

`POST /api/properties` - Create property

`DELETE /api/properties/:id` - Delete property

🔹Reservations

`POST /api/reservations` - Create reservation

`DELETE /api/reservations/:id` - Cancel reservation

🔹Favorites

`POST /api/favorites/:id` - Add to favorites

`DELETE /api/favorites/:id` - Remove from favorites

## Prerequisites

🔹Node.js 14.x or higher

🔹npm or yarn

🔹MongoDB instance

🔹Cloudinary account

🔹Google OAuth credentials

🔹GitHub OAuth credentials

## Getting Started

1. Clone the repository:

        git clone https://github.com/Maliha-Tasnim/staycation-bnb

        

        cd airbnb-clone

2. Install dependencies:

        npm install

3. Configure environment variables - Create a .env file in the root directory with the following variables:

        # Database

   

        DATABASE_URL="your_mongodb_url"

        # Authentication

   

        GOOGLE_CLIENT_ID="your_google_client_id"

        GOOGLE_CLIENT_SECRET="your_google_client_secret"

        GITHUB_ID="your_github_id"

        GITHUB_SECRET="your_github_secret"

        NEXTAUTH_SECRET="your_nextauth_secret"

        # Cloudinary

   

        NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="your_cloudinary_name"

5. Initialize Prisma:

        npx prisma generate

   

        npx prisma db push

6. Start development server:

        npm run dev