Snap Stay Hotel is a full-fledged hotel booking application built with modern web technologies, enabling users to browse available rooms, make bookings, and manage their reservations. The application includes user authentication, room sorting and filtering, booking management, and more.
User Authentication: Register, login, reset password, and forget password functionalities.
Room Management: View available rooms, see detailed information, and sort and filter rooms based on various criteria.
Booking System: Book rooms, check availability, cancel bookings, check-in, and check-out.
Receipt Management: Generate and print booking receipts.
Responsive UI: Fully responsive design using Tailwind CSS and Flowbite React components.
Animations: Smooth and engaging animations powered by Framer Motion.
Frontend: React, TypeScript, Tailwind CSS, Flowbite React, Framer Motion
Routing: React Router, including React Router Loader for data fetching
State Management: Context API, React Query for server state management
Forms & Validation: React Hook Form (if used), Custom Validations
HTTP Client: Axios for API calls
Payment Integration: Stripe for handling payments
Build Tool: Vite
Notifications: React Hot Toast for user feedback
To run this project locally, follow these steps:
git clone https://github.com/Rahulkaradwal/snap-stay-hotel.git
cd snap-stay-hotel
npm install
npm run dev
Once the project is set up, you can navigate through the application to:
Register/Login: Create an account or log in to an existing one.
View Rooms: Browse all available rooms with options to sort and filter.
Make Bookings: Select dates, check availability, and book a room.
Manage Bookings: View, cancel, and manage your bookings, including checking in and out.
Print Receipts: Generate and print receipts for your bookings.
Here’s an overview of the project structure:
snap-stay-hotel/
├── public/
├── src/
│ ├── api/
│ ├── components/
│ ├── context/
│ ├── pages/
│ ├── ui/
│ ├── utils/
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css
├── .env
├── package.json
├── vite.config.ts
└── README.md
api/: Contains API-related files, functions, and custom React hooks including Axios instances. components/: UI components such as buttons, forms, and layout components. context/: Context providers for managing global state. hooks/: Custom React hooks. pages/: Page components corresponding to different routes in the application. router/: React Router configurations and route definitions. styles/: Global CSS and Tailwind configurations. utils/: Utility functions and helpers. ui/: Reusable UI components such as buttons, forms, and layout components. Routes
Here’s a breakdown of the routes and their corresponding components:
/: Home - Home component.
/booking: Booking page - Protected, Booking component.
/services: Services page - Services component.
/details/
: Room details - Protected, Detail component.
/contact-us: Contact Us page - ContactUs component.
/rooms: Rooms list - Rooms component.
/check-in/
: Check-In page - Protected, CheckIn component.
/verify-email/
: Email verification - VerifyEmail component.
/login: Login page - Login component.
/forget-password: Forget Password page - ForgetPassword component.
/reset-password/
: Password Reset - ResetPassword component.
/signup: Sign Up page - SignUp component.
Authentication: API endpoints for login, registration, password reset, etc.
Room Management: Endpoints for fetching room details, availability checks, and bookings.
Booking Management: Endpoints to create, cancel, and manage bookings.
Stripe Integration: Endpoints for payment processing.
Framer Motion: Used for smooth transitions, hover effects, and other interactive elements. Examples include: Button hover effects. Page transitions. Modal animations.
This is not responsive yet, need to make it responsive.
Contributions are welcome! Please fork this repository, create a new branch, and submit a pull request.
Create a new feature branch: git checkout -b feature/your-feature-name
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin feature/your-feature-name
Open a pull request