Next.js 14 Event Booking Application

Learn why the Next.js 14 event booking app uses clerk auth for secure, fast authentication, outlining steps: register/login screens, APIs, UI integration, protected routes, and middlewares.

Learn to integrate Clerk authentication into a Next.js 14 event booking app by wiring sign in and sign up pages, provider, and protected routes using env keys.

Style sign in and sign up pages using flex center, apply gray background, hide watermark, and validate the authentication flow with Google sign-in across users.

Connect the Next.js app to MongoDB using a mongoose-based db config, Atlas URL, and Shea Events Udemy database, setting up for the upcoming user model.

Create a Mongoose-based user model in TypeScript with username, email, isActive, isAdmin, Clerk user ID to sync Clerk and MongoDB; fetch email and username via Clerk's user, and export.

Store the current user in MongoDB on first login by checking the clerk user ID, creating or returning a user, and wiring actions in a Next.js 14 event booking app.

Learn to build a reusable layout provider for private pages in a Next.js 14 event booking app, featuring a header, project name, profile button, and role-based menus.

Learn to build dynamic logged-in menus in a Next.js 14 event booking app by creating a current user API, distinguishing admin and user layouts, and rendering private header menus.

Explore admin events page and start the events module in the Next.js 14 app, building new events through a four-step form for general information, location and date, media, and tickets.

Build and organize an admin events area in Next.js 14 with new and edit event pages, dynamic routing for event IDs, and a reusable page title with back navigation.

Build a multi-step event form in a Next.js 14 app by creating a reusable steps component with four stages—general, location and date, media, and tickets—and an active-step navigation.

Describe the general details step of the event form, capturing event name, organizer, and description, plus a guests multi-select that updates the guests array, with an onsubmit handler.

Add and manage guests in the event form by entering single or comma separated values, then display removable chips. Enable next via validation to advance to location and date tab.

Learn to build the event form step for location, date, and time in a Next.js 14 app, implementing location input, date and time fields, and back navigation with pre-populated values.

Set up a Firebase project and configure Firebase storage to store images for the event form, install Firebase, and initialize the app with environment variables for upcoming image uploads.

Enable Firebase storage and implement an image upload flow in the event form, using a temporary newly selected images array to preview and remove files before saving to Firestore.

Design and implement the ticket types step in the event form, enabling adding, editing, and removing tickets with names, prices, and limits, and updating the event state accordingly.

Learn to upload event images to Firebase storage, generate download URLs, and attach them to the event object in the Next.js 14 event booking form.

Define the event model for the Next.js 14 app using a Mongoose schema. Include fields such as name, description, location, date, time, images, guests, ticket types, user reference, and timestamps.

Build an admin-only post api for creating events in Next.js, ensuring frontend and backend models align, authenticate users, and persist events via the event model.

Display added events and enable editing and deleting current events in the Next.js 14 event booking application by fetching events with a server component and rendering a dynamic events table.

Learn to implement the edit event flow in a Next.js 14 event booking app by routing to edit and pre-populating the form with the event fetched by id.

Learn how to manage media in the edit event workflow by displaying newly uploaded and already stored images, enabling deletions, and preparing for the edit operation.

Implement id-based edit and delete operations for events in a Next.js 14 app, including authorization checks, image uploads to Firebase, and updating event data via Axios.

Execute the delete operation in Next.js 14 by selecting an event id, calling axios delete to the admin API, showing loading states, and displaying toast feedback with data refresh.

Learn to render homepage events in a Next.js 14 event booking app by mapping event data, showing image and details, and linking a view button to a book event page.

Design and render a single event page that fetches event data by id from MongoDB, shows tickets, updates total as type and quantity change, and opens a booking modal.

Explore the tickets component of the Next.js 14 event booking app, displaying ticket types, selecting quantity and type, and calculating the final amount using client-side state.

Calculate the total amount for the selected ticket type and count in a Next.js 14 event booking app, display it on a card, and prepare for Stripe checkout.

Set up Stripe in a Next.js app by configuring publishable and secret keys as env variables, installing Stripe libraries, and enabling a backend API to generate the client secret.

generate a stripe client secret on the server using the payment intent with the amount in USD, then pass it to the Stripe Elements form to complete the checkout.

Enable a seamless Stripe payment flow in a Next.js 14 event booking app by showing a modal with a payment form after booking, managing client secrets, elements, and loading states.

Build a booking model with event, user, payment id, payment status, ticket type, tickets count, and total amount, then implement a bookings post API to store new bookings after payment.

Implement and validate per-type ticket limits in a Next.js 14 event booking app by calculating booked tickets from event bookings, computing remaining tickets, and blocking bookings when limits are reached.

Learn to display the user's bookings in the bookings route by querying with the logged-in MongoDB user id, populate the event, and render a header with booking details.

Learn how the admin bookings view displays all event bookings, with booking id, populated user id and name, and event location, date, and time, using reusable components.