Full-Stack Hotel Booking System: Frontend + Backend Integration

I'll create a complete backend using Node.js with Express and MongoDB, then show you how to integrate it with the frontend we've already built. Let's implement this step by step in VSCode.

Part 1: Setting Up the Backend

Part 2: Integrating Frontend with Backend

Step-by-Step Integration Guide in VSCode

Now that we have both the frontend and backend code, let's go through the step-by-step process of implementing this in VSCode:

Step 1: Set Up the Project Structure

1. Open VSCode and create a new folder for your project:

   mkdir hotel-booking-system cd hotel-booking-system

2. Create two subdirectories for frontend and backend:

   mkdir frontend mkdir backend

Step 2: Set Up the Backend

1. Navigate to the backend directory:

   cd backend

2. Initialize a new Node.js project:

   npm init -y

3. Install the required dependencies:

   npm install express mongoose bcryptjs jsonwebtoken cors dotenv morgan validator npm install nodemon --save-dev

4. Copy all the backend files from the code project above into their respective folders:

   • Create models, controllers, routes, and utils folders
   • Copy the server.js, .env, and other files to the root of the backend directory

5. Update the package.json scripts:

   "scripts": { "start": "node server.js", "dev": "nodemon server.js", "seed": "node utils/seeder.js --import" }

Step 3: Set Up the Frontend

1. Navigate to the frontend directory:

   cd ../frontend

2. Create a new Next.js project:

   npx create-next-app@latest .
   • Choose "Yes" for TypeScript
   • Choose "Yes" for ESLint
   • Choose "Yes" for Tailwind CSS
   • Choose "Yes" for App Router
   • Choose "No" for src directory (or "Yes" if you prefer)
   • Choose "Yes" for import alias

3. Install additional dependencies:

   npm install axios date-fns react-day-picker lucide-react

4. Install shadcn/ui:

   npx shadcn@latest init
   • Follow the prompts to set up shadcn/ui with your preferred style

5. Install required shadcn/ui components:

   npx shadcn@latest add button card input label select checkbox tabs badge skeleton toast popover dialog calendar separator
6. Copy all the frontend files from the code project above into their respective folders in the frontend directory

7. Create a .env.local file in the frontend directory:

   NEXT_PUBLIC_API_URL=http://localhost:5000/api

Step 4: Set Up MongoDB

1. Install MongoDB locally or use MongoDB Atlas (cloud service)

   • For local installation, follow the instructions at: https://docs.mongodb.com/manual/installation/
   • For MongoDB Atlas, create a free account at: https://www.mongodb.com/cloud/atlas

2. If using MongoDB Atlas:

   • Create a new cluster
   • Create a database user
   • Get your connection string and update the MONGODB_URI in the backend .env file

Step 5: Run the Backend

1. Navigate to the backend directory:

   cd ../backend

2. Seed the database with initial data:

   npm run seed

3. Start the backend server:

   npm run dev
4. The server should start on port 5000 and connect to MongoDB

Step 6: Run the Frontend

1. Open a new terminal window and navigate to the frontend directory:

   cd ../frontend

2. Start the frontend development server:

   npm run dev
3. The frontend should start on port 3000

Step 7: Test the Full-Stack Application

1. Open your browser and navigate to http://localhost:3000

2. Test the following features:

   • Browse hotels on the home page
   • Search for hotels
   • View hotel details
   • Register a new account
   • Log in with your account
   • Book a hotel room
   • View your bookings
   • Cancel a booking

Additional Enhancements

Once you have the basic system working, you can enhance it with:

1. Image Upload: Implement image upload for hotels and rooms using Cloudinary or AWS S3
2. Payment Integration: Add Stripe or PayPal for real payment processing
3. Email Notifications: Send confirmation emails for bookings using Nodemailer
4. Admin Dashboard: Create an admin panel to manage hotels, rooms, and bookings
5. Search Filters: Enhance the search functionality with more filters
6. Reviews and Ratings: Allow users to leave reviews and ratings for hotels
7. Responsive Design Improvements: Further optimize the UI for all device sizes

This complete hotel booking system provides a solid foundation that you can extend and customize according to your specific requirements. The modular architecture makes it easy to add new features or modify existing ones.

Please make sure to add the following environment variables to your project: