https://github.com/farhanasharna2000/suitespot-client
SuiteSpot is a feature-rich and user-friendly hotel booking platform designed to simplify travel planning and enhance the user experience. Built using modern web technologies, SuiteSpot combines performance, scalability, and a beautiful interface to deliver a seamless hotel search and booking experience.
https://github.com/farhanasharna2000/suitespot-client
firebase mongodb-atlas nodejs react react-router tailwindcss
Last synced: 3 months ago
JSON representation
SuiteSpot is a feature-rich and user-friendly hotel booking platform designed to simplify travel planning and enhance the user experience. Built using modern web technologies, SuiteSpot combines performance, scalability, and a beautiful interface to deliver a seamless hotel search and booking experience.
- Host: GitHub
- URL: https://github.com/farhanasharna2000/suitespot-client
- Owner: Farhanasharna2000
- Created: 2024-12-30T05:56:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T08:51:15.000Z (over 1 year ago)
- Last Synced: 2025-02-05T09:32:56.018Z (over 1 year ago)
- Topics: firebase, mongodb-atlas, nodejs, react, react-router, tailwindcss
- Language: JavaScript
- Homepage: https://suitespot-719f8.web.app
- Size: 20.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏨 **SuiteSpot**: Modern Hotel Booking Platform
SuiteSpot is a feature-rich and user-friendly hotel booking platform designed to simplify travel planning and enhance the user experience. Built using modern web technologies, SuiteSpot combines performance, scalability, and a beautiful interface to deliver a seamless hotel search and booking experience.
---
## 🎯 **Project Purpose**
The purpose of SuiteSpot is to provide users with a convenient platform to:
- Search and compare hotels using interactive maps and filters.
- Book accommodations with real-time availability.
- Enjoy a visually appealing and responsive interface on all devices.
---
## 🌍 **Live URL**
Experience **SuiteSpot** live:
➡️ **[Visit SuiteSpot](https://suitespot-719f8.web.app)**
---
## ✨ **Key Features**
### 🎨 **Interactive and Engaging UI**
- **Animations on Scroll (AOS)**: Smooth and elegant scroll-based animations.
- **Framer Motion**: Modern animations for interactive elements.
- **Lottie Animations**: High-quality animations powered by **lottie-react**.
### 🗺 **Comprehensive Hotel Search**
- **Leaflet & React-Leaflet**: Interactive maps for browsing hotels by location.
- **Match Sorter**: Advanced filtering and ranking for search results.
### 📅 **Booking and Availability Management**
- **Moment.js**: Easy handling of dates for availability and bookings.
- **React Datepicker**: Simplified date selection for check-in and check-out.
### 🚀 **Modern Web Features**
- **React Router DOM**: Seamless page transitions with route management.
- **Axios**: Efficient API communication for fetching hotel data.
- **Firebase**: Secure authentication and database storage.
- **LocalForage**: Client-side caching for improved performance.
### 🔥 **Enhanced User Experience**
- **React Hot Toast**: Toast notifications for user feedback.
- **SweetAlert2**: Elegant modals for alerts and confirmations.
- **React Star Rating Component**: Easy hotel rating visualization.
- **Swiper**: Sleek carousel implementation for image galleries.
### 🌍 **SEO and Performance Optimization**
- **React Helmet**: Dynamic meta tags for better SEO.
- **Sort By**: Utility for sorting hotel data efficiently.
---
## 🛠 **Tech Stack**
- **Frontend:** React, React Router, Tailwind CSS
- **State Management:** React Query
- **Backend:** [SuiteSpot API](https://suite-spot-server-psi.vercel.app) (Node.js, Express)
- **Authentication:** Firebase
- **Database:** MongoDB
- **Deployment:** Vercel (Backend), Firebase (Frontend)
---
## 📦 **Installation**
To set up the project locally, follow these steps:
### 1️⃣ Clone the repository
```sh
git clone https://github.com/Farhanasharna2000/SuiteSpot-Client
cd SuiteSpot-Client
```
### 2️⃣ Install dependencies
```sh
npm install
```
### 3️⃣ Create a `.env` file
Set up environment variables in a `.env` file at the root directory:
```ini
VITE_apiKey=your_firebase_api_key
VITE_authDomain=your_firebase_auth_domain
VITE_projectId=your_firebase_project_id
VITE_storageBucket=your_firebase_storage_bucket
VITE_messagingSenderId=your_firebase_messaging_sender_id
VITE_appId=your_firebase_app_id
VITE_API_URL=https://suite-spot-server-psi.vercel.app
```
**⚠️ Never expose your API keys in public repositories.**
### 4️⃣ Start the development server
```sh
npm run dev
```
---
## ⚙️ **Configuration**
SuiteSpot uses Firebase for authentication and Firestore for the database. Ensure you have a Firebase project set up and configured correctly.
- **Backend API**: The API is hosted on Vercel at [`https://suite-spot-server-psi.vercel.app`](https://suite-spot-server-psi.vercel.app).
---
## 🚀 **Usage**
Once the project is running:
- Sign up or log in.
- Browse and discover hotels.
- Filter hotels based on location and amenities.
- Select dates and book available hotels.
- Leave reviews and rate hotels.
---
## 🤝 **Contributing**
We welcome contributions! To contribute:
1. Fork the repository.
2. Create a new branch (`feature-xyz`).
3. Commit your changes.
4. Push to your branch.
5. Open a Pull Request.
---
🎉 **Enjoy using SuiteSpot!** 🚀