Next.js 14 Hotel Rooms Booking App 2024

Explore authentication concepts with Clerk, a library for Next.js, leveraging reusable functions and prebuilt UI for registration, login, and protected routes, with optional alternatives like Firebase or NextAuth.

Set up clerk for a Next.js 14 hotel booking app by creating a clerk project, configuring environment variables, and integrating the clerk provider to secure pages with sign in routes.

Render custom sign in and sign up pages in your Next.js hotel booking app using clerk integration. Configure environment variables to direct authentication flows to your own domain and routes.

Fetch and display the logged-in clerk user info in a Next.js 14 app using Clerk currentUser, extracting id, name, and email for display and MongoDB storage.

Style the signin and signup pages to match the deployed version using a black background and Montserrat font. Center the forms and remove the watermark.

Connect to MongoDB using mongoose in a Next.js 14 app, store the current user data on first login, and configure a db.ts with a .env database URL.

Create a MongoDB user model storing name, email, clerk user ID, profile pic, isActive, isAdmin, with timestamps, to preserve user data across auth provider changes in Next.js hotel booking app.

Implement a server action to save or fetch the current user in MongoDB after sign in, creating the document if needed using clerk data and the user model.

Build the layout skeleton for the Next.js 14 hotel app by creating a reusable layout provider with header and sidebar, and wiring admin and normal-user menus across pages.

Style the header of the Next.js 14 hotel app to display the project title and logged-in user info, fetching current user data and showing sign-in or user details.

Build an entity drawer sidebar that toggles with a user icon, uses logged-in user data to render admin or user menus, and navigates with Next.js router to home and bookings.

Learn to highlight active menu items across user and admin routes in a Next.js 14 app by matching path names and applying conditional styling for a cohesive sidebar navigation.

Implement sign-out with Clerk Next.js, add a logout control in the sidebar, handle async sign-out and redirect to /sign in, and conditionally render the layout to hide auth routes.

Add a loader to show a spinner while awaiting current user data in the layout. Create and center a spinner component, and render layout only after loading completes.

Introduce the admin module for hotels, covering create, edit, delete, and view operations, linking rooms to hotels, and using reusable page title and link button components for server routes.

Develop the hotel form for the Next.js 14 hotel rooms booking app, implementing a responsive three-column grid, form items with name, label, and validation rules, and prepare for media uploads.

Set up a new Firebase project for the hotel app, install Firebase, initialize with web config, and export the Firebase app for database, storage, and authentication.

Learn how to implement a reusable Firebase image upload helper for a hotel rooms booking app, uploading multiple files in parallel and returning their download URLs.

Build and test the hotel payload by wiring a hotel form to a media upload component, upload to Firebase, and show a loading state.

Define a hotel model with fields (name, owner, email, phone, address, media as image URL array) and implement an add hotel server action using mongoose to save and revalidate admin/hotels.

Show hotels in admin route via server component by fetching hotels with the hotel model, converting results to json, and rendering a hotels table with actions and formatted dates.

Learn to implement edit hotel: navigate to admin/hotel/edit/{id}, pre-populate the form with data fetched by id, and update the hotel via a server action with clear success messages.

Show existing media in the edit hotel form, allow deleting items, and upload new images; merge existing media with new urls to update the hotel.

Create a server action to delete a hotel by id in a Next.js 14 app and return success or error; update the hotels table with loading and delete handling.

Add loader to server components by showing a spinner during API calls, using a loading.tsx fallback, and center the loader on hotel list and edit pages in Next.js 14.

Replicate the hotel CRUD for rooms, building a complete front-end room module (form and table) and back-end actions under admin/rooms to add, edit, and delete rooms.

Implement the add room feature in the admin rooms page, building a room form with hotel selection and server actions to save rooms to MongoDB.

Implement show, edit, and delete rooms in the Next.js 14 hotel rooms booking app by updating room and hotel data models, populating room details, handling loading states, and validating CRUD operations.

Fix the multiple images upload bug by using state to append new files to the uploaded files array instead of pushing them in the before upload callback.

Prepare 4–5 hotels and 10 rooms (2–3 per hotel) with dummy data and images, upload them, and enable home page and room booking page testing with filters and search.

Display all hotel rooms on the home page in a responsive grid, fetching data from MongoDB with suspense, and provide a link to book each room.

Build a dynamic room booking page in a Next.js 14 hotel app, displaying room and hotel details, images, and reservation controls with start date, end date, and availability checks.

Parse comma-separated amenities into styled chips and build a checkout area with start and end dates and a check availability button, using client and server components.

Develop the booking model by defining fields for hotel reference, room reference, user, check-in and check-out dates, total days, amount, payment ID, and a default booking status.

Develop the initial room availability API using sample bookings to verify availability by room id, check-in, and check-out dates, applying two overlap rules and a MongoDB query.

Explore how to integrate a room availability API with the UI in a Next.js 14 hotel booking app, including check-in/out date handling, loading states, and interactive availability messaging.

Learn to integrate the Stripe payment gateway for hotel bookings by obtaining public and secret keys, creating a server side payment intent, and using the client secret to complete payments.

Test the client secret API by calculating total amount from checkout days, fetch the Stripe client secret, and wire it to the Stripe UI credit card form for booking.

Learn to implement a Stripe payment modal in a Next.js hotel booking app by wiring the client secret to a payment element, adding address details, and managing the modal checkout.

Implement saving a booking after successful Stripe payment, create a booking record via a server action, and navigate users to their bookings page.

Assess and validate hotel room booking logic by testing date range scenarios, boundary conditions, and overlapping bookings to ensure accurate availability responses in the Next.js 14 booking app.