A full-featured, modern, end-to-end-tested, full-stack web application where users can intuitively search, browse, and book hotels and places to stay while traveling. Users can also list their properties for customers to book and earn profit.
🎨 Clean UI and Simple UX
- 🔧 Built from scratch with modern technology using React and ShadCn components.
- 🛠 Features a clean, modern, and compact design using Tailwind CSS.
- ⚡️ Fast and responsive with smooth transitions and dynamic skeleton loaders between pages.
🧑🏻💻 User Capabilities
- Browse through Hotels and check out interested places to stay without needing to be authenticated.
- Sign up to create an account to confirm booking.
- Intuitively search, filter, and sort for different hotels.
- Authenticated users can:
- Confirm the booking and payment of their hotel.
- Add/Update a hotel for other customers.
- Check out their bookings and hotels.
- Contact hotel owners in realtime chat and get more details.
🔐 Authentication and Security
- Secure stateless JWT authentication using secure HTTP-only cookies for safe browsing.
- Secure transactions powered by Stripe.
- Secure websocket connection using http-cookie for realtime chat.
💻 Tech Stack and Features
- 🖥 Fully written in React, following best coding practices for maintainability and scalability.
- 📜 Utilizes React Hook Form for strict form input validation and error handling.
- 🤝 End-to-end type safety on the backend and frontend using Typescript for scalability and maintainability.
- 📁 Seamless integration of data-fetching and mutation API services using Tanstack React Query.
- 🌄 Paginated displays of hotels on the search results page with previous/next navigation.
- 🚀 Efficient cache management and cache invalidation using Tanstack React Query.
- 🖼️ Media management and storage using multer and Cloudinary services.
- 📜 Realtime chat feature using Socket.io.
- 🦥 Lazy loading of images for fast and responsive rendering of bulk images using React Lazy Load.
- 📁 Simple global Auth, Error, Success, and Search query state management using React Context.
- 🥂 Beautiful handling of success and error messages using Custom Toast Component.
- 🛠 API input validation using express-validator.
- 🔒 Route protection from unauthenticated requests.
- 🔬 Fully end-to-end tested using Playwright tests.
- 🪵 Custom logger for monitoring requests in the development terminal.
- 🦦 Schema and queries built with Mongoose and MongoDB.
🎁 Additional Features
- 🔄 Highly customizable and extendable, with more features planned for future updates.
- 📱 Fully responsive design for both mobile and desktop devices.