Next.js & GitHub Copilot AI : Build an Events Booking App

Create public and private route groups in the app directory to enable authentication flow, moving the home page to public, and building login, register, admin dashboard, and user events routes.

Design a simple landing page for the events booking app, featuring a header with a login button, a hero section, and Qaqun navigation in a primary color.

Builds a registration page UI with form validations using the Qaqun form component and react hook form, with name, email, and password, no role selection, and login, logout.

Build a login page featuring a role selection, using a constants file and select component, while applying global css for full-width inputs and a primary welcome style.

Set up a Supabase backend for the Next.js events booking app by creating a Supabase account, organization, and project, then wire credentials into the app.

Build a Supabase-backed user registration API with a user profiles table, enforce unique emails, hash passwords, and expose a register action integrated with toast feedback.

Build and integrate a login API using jwt authentication, store the jwt in browser cookies with js-cookie, and route users to role-based dashboards (user/events or admin/dashboard) via an env secret.

Fetch the logged-in user from the JWT token in private routes, protecting access, and display the user profile on the user events page and admin dashboard via Supabase.

Protect private routes by enforcing token-based access in a Next.js app, redirecting unauthenticated users to login. Route admins to the admin dashboard and users to the user events page.

Implement a private layout for admin and user routes in a Next.js app, with a header, logo, user name, and a right-side, role-based sidebar menu.

Fetch the logged-in user once and store it in a global zustand store to display in the header and across pages, refactoring admin and user events to use shared data.

Implement a right-side sheet as the sidebar, render user and admin menu items, highlight the active route, and add a logout flow that clears cookies and redirects to login.

Create and relate events and event ticket types in Supabase, write server actions for create, read, update, delete operations, and generate interfaces from SQL to support an events booking app.

Build server actions for events and event ticket types in a Next.js app using a Supabase client, implementing create, update, delete, and fetch operations with image array support.

Set up admin routes for events management in a Next.js app, including admin/events/create and admin/events/edit/[id], with private admin routes and a reusable event form for create and edit.

Implement create event server action in the Next.js app, set up a Supabase bucket for events, upload images, retrieve URLs, and wire the form to create and navigate to admin/events.

Display, edit, and delete events in a Next.js admin dashboard using a Qazi table, fetch all events, and navigate to edit and ticket pages.

Manage event ticket types with a CRUD interface: view, create via a modal with name, price, and total seats, and edit or delete as needed.

Display all upcoming events in the user module with five seeded events, each offering multiple ticket types via Supabase, and enable navigation to a detailed event page for booking.

Implement a single ticket type per booking with quantity control, calculate the total, and enable a pay now flow using a separate event tickets entry component.

Set up Stripe integration to create a temporary payment intent and obtain a client secret, enabling a credit card modal to complete a two-step event booking.

Learn to integrate the Stripe payment gateway in a Next.js app using Stripe Elements to render a modal checkout with client secret, payment element, and address element, plus success handling.

Build the booking flow by creating the bookings table and server action, wiring the interface to manage ticket types, update availability, and navigate to the user bookings page after payment.

Display the logged-in user's bookings on the bookings page and show date and time with dayjs, using a confirmation dialog for cancellation and keeping styling consistent with the events page.

Build the admin bookings view in the next.js app to show event name and date, plus customer name and key fields like ticket type, quantity, total, status, and payment id.

Create a reusable profile card component for both user and admin profiles, rendering all user properties and enabling modal popups for change password and change profile picture.