A clone of the Airbnb web application, created using the MERN stack (MongoDB, Express.js, React.js, and Node.js).
Check out the live application here: Airbnb Clone
- π User authentication (login and registration)
- π‘ Browse listings
- π View detailed information about listings
- π Book listings
- π± Responsive design
- Frontend: React.js, CSS, Bootstrap, Tailwind
- Backend: Node.js, Express.js
- Database: MongoDB
- Hosting: Vercel (Frontend), Render (Backend)
To run this project locally, follow these steps:
- Node.js and npm installed on your machine
- MongoDB installed and running
git clone https://github.com/Yash1Hingu/airbnb.git
cd airbnb
cd backend
npm install
cd frontend
npm install
Create a .env
file in the backend
directory and add the following environment variables:
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
cd backend
npm start
The backend server will start on http://localhost:5000
.
cd frontend
npm start
The frontend application will start on http://localhost:3000
.
The frontend routing in this application is managed using react-router-dom
. Here's an overview of each route and its corresponding functionality:
-
Element:
<Layout />
-
Description: The root route of the application, rendering the main layout component.
-
Child Route:
/
- Element:
<IndexPage />
- Description: Displays the index page of the application.
- Element:
-
Child Route:
/login
- Element:
<LoginPage />
- Description: Renders the login page for user authentication.
- Element:
-
Child Route:
/register
- Element:
<RegisterPage />
- Description: Displays the registration page for new users.
- Element:
-
Child Route:
/account
-
Element:
<AccountLayout />
-
Description: Handles account-related pages and layouts.
-
Nested Route:
/
- Element:
<ProfilePage />
- Description: Shows the user's profile information.
- Element:
-
Nested Route:
/bookings
- Element:
<BookingsPage />
- Description: Lists all bookings made by the user.
- Element:
-
Nested Route:
/places
-
Element:
<PlacesPage />
-
Description: Displays the user's listed places and related actions.
-
Dynamic Nested Route:
/places/:action
- Element:
<PlacesPage />
- Description: Handles different actions (e.g., add, edit) related to user's places.
- Element:
-
Dynamic Nested Route:
/places/:action/:id
- Element:
<PlacesPage />
- Description: Manages actions with specific IDs for user's places.
- Element:
-
-
-
-
- Element:
<PlacePage />
- Description: Renders detailed information about a specific place based on its ID.
- Element:
<BookingPage />
- Description: Displays detailed information about a specific booking based on its ID.
For a deeper understanding of each component's functionality, refer to the respective component files in the src/components/pages
directory.
The backend of this application is built using Node.js and Express.js. Below are the key components and their functionalities:
- dotenv: Loads environment variables from a
.env
file. - express: Web framework for Node.js.
- cors: Enables Cross-Origin Resource Sharing.
- mongoose: ODM for MongoDB.
- bcryptjs: Library for hashing passwords.
- jsonwebtoken: Library to sign and verify JSON Web Tokens.
- cookie-parser: Middleware to parse cookies.
- image-downloader: Utility to download images.
- multer: Middleware for handling multipart/form-data (file uploads).
- fs (file system): Module to work with the file system.
- imgbb-uploader: Utility to upload images to ImgBB.
- User: Defines user schema and handles user data.
- Place: Defines place schema and handles listing data.
- Booking: Defines booking schema and handles booking data.
- POST /register: Registers a new user.
- POST /login: Authenticates a user and returns a JWT token.
- GET /profile: Retrieves the profile information of the logged-in user.
- GET /logout: Logs out the user by clearing the JWT token.
- POST /places: Creates a new place listing.
- GET /places: Retrieves all places owned by the logged-in user.
- GET /edit/:id: Retrieves details of a specific place for editing.
- PUT /places: Updates an existing place listing.
- GET /indexplaces: Retrieves a list of all places (limited to 20).
- GET /place/:id: Retrieves details of a specific place by ID.
- POST /bookings: Creates a new booking.
- GET /booking: Retrieves all bookings made by the logged-in user.
- GET /booking/:id: Retrieves details of a specific booking by ID.
- POST /upload-by-link: Uploads an image by URL.
- POST /upload: Uploads images using Multer.
- getUserDataFromToken: Extracts user data from the JWT token.
The server runs on port 4000, and CORS is enabled for the client URL specified in the environment variables.
app.listen(4000, () => {
console.log("Server Running on port 4000");
});
Contributions are welcome! Please fork the repository and submit a pull request.
If you have any questions or feedback, feel free to contact me at yash23hingu@gmail.com.