HotelO is a modern single-page hotel booking platform for Kolkata built with Next.js 15, Tailwind CSS, and TypeScript. It features a clean, dark-themed UI with smooth animations and transitions.
- 🌙 Dark mode UI with smooth animations and transitions
- 🔍 Advanced search functionality with date and guest filters
- 🏨 Browse and filter 50 hotels across various Kolkata locations
- 📝 Detailed hotel information with amenities, pricing, and location
- 🔐 Google Authentication for secure user access
- 📅 Booking management with dashboard view
- 📧 Email confirmation for bookings
- 📱 Fully responsive design for all devices
- ⚡ Single-page application with dynamic routing
- Hotel Search: Filter hotels by location, check-in/out dates, and number of guests
- Hotel Details: View comprehensive information about each hotel
- Booking System: Authenticated users can book hotels with a streamlined process
- User Dashboard: View all bookings with status and details
- Authentication Flow: Seamless Google authentication with redirect handling
- Frontend: Next.js 15, React, Tailwind CSS, TypeScript
- Authentication: NextAuth.js with Google provider
- State Management: React Hooks
- UI Components: Custom components with Framer Motion animations
- Icons: React Icons
- Date Handling: React DatePicker
- Node.js 18+ and npm
- Google OAuth credentials (for authentication)
-
Clone the repository:
git clone https://github.com/yourusername/hotelo.git cd hotelo -
Install dependencies:
npm install
-
Create a
.env.localfile in the root directory with the following variables:NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=hotelo_secret_key_replace_in_production GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret NEXT_PUBLIC_BASE_URL=http://localhost:3000 -
Run the development server:
npm run dev
-
Open http://localhost:3000 with your browser to see the application.
HotelO/
├── .env.local # Environment variables
├── next.config.ts # Next.js configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
│
├── public/ # Static assets
│ └── icons/ # SVG icons
│
├── src/ # Source code
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ ├── hotel/[id]/ # Hotel detail page
│ │ ├── book/[id]/ # Booking page
│ │ ├── dashboard/ # User dashboard
│ │ └── api/ # API routes
│ │ ├── auth/ # Authentication endpoints
│ │ ├── bookings/ # Booking endpoints
│ │ └── hotels/ # Hotel endpoints
│ │
│ ├── components/ # React components
│ │ ├── BookingForm.tsx # Hotel booking form
│ │ ├── Footer.tsx # Footer component
│ │ ├── HotelCard.tsx # Hotel card component
│ │ ├── Layout.tsx # Layout wrapper
│ │ ├── Navbar.tsx # Navigation bar
│ │ ├── Providers.tsx # Context providers
│ │ ├── Rating.tsx # Star rating component
│ │ └── SearchBar.tsx # Hotel search component
│ │
│ ├── lib/ # Utility functions
│ │ ├── auth.ts # Authentication utilities
│ │ ├── data.ts # Data generation and fetching
│ │ ├── mailer.ts # Email functionality
│ │ └── mongodb.ts # Database connection
│ │
│ └── models/ # Data models
│ ├── Booking.ts # Booking model
│ └── Hotel.ts # Hotel model
- Authentication Flow: Users are redirected to authentication when trying to book a hotel if not logged in. After successful authentication, they are redirected back to the booking page.
- Booking Process: The booking form collects user details, validates them, and creates a booking record. A confirmation email is sent to the user.
- Hotel Data: 50 dummy hotels are generated with realistic data including names, locations, amenities, and pricing.
- Dashboard: Users can view all their bookings with status indicators and details.
- This project uses dummy data for demonstration purposes.
- Email functionality is simulated in development mode.
- For production deployment, you would need to set up proper environment variables and connect to a database.
This project is licensed under the MIT License.
Created with ❤️ using Next.js 15 and Tailwind CSS