Staysphere is a comprehensive web application designed to facilitate the booking and management of rental properties. The project includes both user and host functionalities, mimicking real-world scenarios such as booking, managing listings, and more. The frontend is built using React.js, while the backend is powered by Node.js and Express, with MongoDB as the database.
- Authentication:
- Register/Login using a secure backend.
- Browse Listings:
- Search and filter by price, location, and type.
- Detailed listing pages with image galleries and reviews.
- Favorites:
- Add/remove listings from favorites.
- Booking:
- Select dates, calculate prices, and confirm bookings.
- Manage Bookings:
- Interface to view and manage bookings .
- Reviews:
- Leave and view reviews for listings.
- Profile:
- User profile management, including profile picture upload and edit profile information.
- Notifications:
- Receive notifications for new bookings, reviews, and messages.
- Payment Gateway Integration:
- Secure payment processing for bookings.
- 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.
- Profile Management:
- Update profile information.
- React.js
- Redux and Context API (for state management)
- React Router (for navigation)
- Material-UI and Antd (for UI components)
- Node.js
- Express.js
- MongoDB (with Mongoose for ORM)
- JWT (for authentication)
- Nodemailer (for email notifications)
- Twilio (for verifying)
- CSS Animations
- Responsive Design Frameworks
- Set up the React environment and project repository.
- Create UI wireframes for core pages (Home, Listings, Login, Signup).
- Implement user/host registration and login.
- Set up basic routing with React Router.
- 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 persistence.
- Build detailed listing pages with image galleries and reviews.
- Implement the booking process and favorites management.
- Provide host functionalities for managing bookings and listings.
- Add animations and transitions for a smooth user experience.
- Implement profile management.
- Ensure responsive design and cross-browser compatibility.
- Conduct testing, finalize documentation, and prepare for demo.
- Demo Flow:
- Login as user/host.
- Explore features like search, favorites, bookings, and listings management.
- Testing & Feedback:
- Conduct comprehensive testing and resolve identified issues.
- Documentation:
- Include code structure, component descriptions, and deployment steps.
- Clone the repository:
git clone https://github.com/SuyashSingh01/Staysphere.git
- Navigate to the frontend project directory:
cd Staysphere/client - Install dependencies:
npm install
- Start the development server:
npm start
- Access the application at http://localhost:5173/.
- Navigate to the backend project directory:
cd Staysphere/server - Install dependencies:
npm install
- Set up environment variables (e.g., MongoDB URI, JWT secret, etc.).
- Start the backend server:
npm run dev
- The backend will be running at http://localhost:4000/.
Contributions are welcome! If you'd like to improve this project, please follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature-branch
- Commit your changes:
git commit -m "Describe changes" - Push to the branch:
git push origin feature-branch
- Submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for more details.
For any queries or feedback, please contact the project maintainer:
Name: Suyash Singh
Email: singhsuyash045@gmail.com