The AirBnB Clone Project is a full-stack web application designed to replicate the core functionalities of the real AirBnB platform. Users will be able to:
- Browse property listings
- View detailed information about each property
- Complete a simplified and secure checkout process
This project provides hands-on experience with full-stack development, UI/UX design, and agile methodologies.
| Layer | Technologies |
|---|---|
| Frontend | HTML, CSS, JavaScript, React |
| Backend | Node.js, Express.js |
| Database | MongoDB |
| Design | Figma |
| Version Control | Git, GitHub |
| Deployment | Vercel / Render |
- Build a clean, attractive, and intuitive interface
- Ensure mobile-first, responsive design
- Make navigation and booking effortless for users
- Property listing browsing
- Property detail view
- Simple and secure checkout
- User authentication (Login/Signup)
- Fully responsive layout
| Page | Description |
|---|---|
| Property Listing View | Grid or list of properties with images, titles, descriptions, prices, and ratings. |
| Listing Detailed View | Full details about a selected property with images, amenities, location, and booking options. |
| Simple Checkout View | Booking details, confirmation, and payment interface. |
- Enhances trust and satisfaction
- Reduces bounce and abandonment rates
- Increases booking conversion
- Ensures accessibility for all users
- Primary Color:
#FF5A5F(AirBnB Red) - Secondary Color:
#008489(Teal) - Background Color:
#FFFFFFor#F7F7F7 - Text Color:
#222222or#484848 - Secondary Text:
#717171or#767676
- Font Family: Circular (or Roboto as alternative)
- Font Weights:
- 400: Regular
- 500: Medium
- 700: Bold
- Font Sizes:
- Titles: 24px–32px
- Subtitles: 18px–22px
- Body Text: 14px–16px
- Small Text: 12px
- Promotes design consistency
- Speeds up development with reusable styles
- Improves communication between designers & developers
- Simplifies future UI updates
| Role | Responsibilities |
|---|---|
| Project Manager | Organize tasks, manage timeline, and ensure deadlines are met. |
| Frontend Developers | Build UI with React, style with CSS, and connect to backend APIs. |
| Backend Developers | Develop REST APIs, manage database, implement business logic and authentication. |
| Designers | Create wireframes, mockups, and maintain design system in Figma. |
| QA/Testers | Test features, log bugs, and ensure quality and usability. |
| DevOps Engineers | Handle deployment, server infrastructure, and performance monitoring. |
| Product Owner | Define features, prioritize backlog, and represent stakeholders. |
| Scrum Master | Facilitate agile processes, organize sprints, and remove blockers. |
- Logo
- Search bar
- Login/Signup/Profile menu
- Responsive menu for mobile
- Property image
- Title, price, location, rating
- “Favorite” button
- Clickable to navigate to detail view
