Homezy Frontend Project

Project Overview

This project involves building a fully functional frontend using React.js, focusing on responsive design, dynamic interactions, and integration with a mock backend. The project includes both user and host functionalities, designed to mimic real-world scenarios such as booking, managing listings, and more.

---

Key Features

User Web App

• Authentication:
  • Register/Login using a mocked backend (e.g., JSON Server or Firebase).
• Browse Listings:
  • Search and filter by price, location, and type.
  • Detailed listing pages with image galleries and reviews.
• Favorites:
  • Add/remove listings from favorites.
• Mock Booking:
  • Select dates, calculate prices, and confirm bookings.
• Manage Bookings:
  • Interface to view and manage bookings (mock functionality).

Host Management Web App

• Authentication:
  • Host-specific register/login.
• Listings Management:
  • Add, edit, and delete listings with images, location, price, and description.
• Booking Requests:
  • Interface to view incoming booking requests (mock functionality).
• Profile Management:
  • Update profile information.

---

Tech Stack

• Frontend:
  • React.js
  • Redux or Context API (for state management)
  • React Router (for navigation)
• Mock Backend:
  • JSON Server or Firebase
• UI/UX:
  • CSS Animations
  • Responsive Design Frameworks

---

Project Timeline

Week 1: Setup & Authentication

• Set up the React environment and project repository.
• Create UI wireframes for core pages (Home, Listings, Login, Signup).
• Implement mock user/host registration and login.
• Set up basic routing with React Router.

Week 2: Listings & Search

• Develop search and filter functionalities for listings.
• Create responsive UI grids for listing cards.
• Design forms for adding and managing listings.
• Implement image upload functionality with mock persistence.

Week 3: Booking & Favorites

• Build detailed listing pages with image galleries and reviews.
• Implement the booking process (mocked backend) and favorites management.
• Provide host functionalities for managing bookings and listings.

Week 4: Final Features & Testing

• Add animations and transitions for a smooth user experience.
• Implement mock profile management.
• Ensure responsive design and cross-browser compatibility.
• Conduct testing, finalize documentation, and prepare for demo.

---

Demo Preparation

1. Demo Flow:
   • Login as user/host.
   • Explore features like search, favorites, bookings, and listings management.
2. Testing & Feedback:
   • Conduct comprehensive testing and resolve identified issues.
3. Documentation:
   • Include code structure, component descriptions, and deployment steps.

---

Installation and Setup

1. Clone the repository:

   git clone https://github.com/SuyashSingh01/Homezy.git

2. Navigate to the project directory:

   cd Homezy-clone

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Set up the mock backend (e.g., JSON Server):

   npm run json-server

6. Access the application at http://localhost:3000/.

---

Contributing

Contributions are welcome! If you'd like to improve this project, please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Commit your changes:

   git commit -m 'Add some feature'

4. Push to the branch:

   git push origin feature/your-feature-name

5. Submit a pull request.

---

License

This project is licensed under the MIT License. See the LICENSE file for more details.

---

Contact

For any queries or feedback, please contact the project maintainer:

• Name: Suyash Singh
• Email: [email protected]