Next.js 15 & Supabase - Online Movie Tickets Booking App

Design the homepage user interface of the authentication module, featuring a login button that opens a chakra sheet with login or register forms driven by the URL query string.

Install and configure the Qaqun sheet component, open a sheet, and render login or register forms based on the form query string using use search params in Next.js.

Learn to build a register form using React Hook Form with Zod validation, defining a form schema for name, email, and password, wiring onSubmit and basic validations.

Replicate the register form design in the login form, toggle between login and register states, and add a role selection with a user/admin radio group for frontend authentication UI.

Create a new supabase account and organization, then integrate the project into a Next.js app by configuring environment variables in an env file, installing the library, and exporting the setup.

create a user profiles table in supabase for a Next.js 15 app, defining id, name, email (unique), password, role, and is active, with default values and full permissions policy.

Protect private routes in Next.js by using middleware to check a JWT token in browser cookies and redirect unauthenticated users to login, while routing authenticated users to their dashboards.

Build the header for the private layout by integrating a global zustand store to fetch and display the logged-in user name, and add a lucide menu icon for navigation.

Design and implement a responsive sidebar with user and admin menu items, active highlighting, and a reusable logout button, supporting the movies, theaters, and shows modules in a Next.js app.

Demonstrates the admin panel’s back-end movie functionality with a complete CRUD workflow: add, edit, and update movies (name, release date, genre, description, images) in the Supabase-backed admin movies route.

Implement and manage server actions for the movies module in a Next.js 15 and Supabase app, enabling add, update, delete, and fetch operations for movie records.

Build a client-side movie form in Next.js 15 with Supabase, using a movie form schema and zod, including name, description, release date, genre, duration, and poster URL.

Display movies in the admin route with a shard CDN table. Fetch all movies, render dynamic columns (name, release date, genre, duration, poster, actions), and manage loading and empty states.

Navigate to admin movie edit by id, fetch movie data, pre-populate the edit form (poster URL prioritized), and submit updates, while implementing suspense-based loaders for server components.

Create and manage the theaters module with a new theaters table, its interface, and full CRUD server actions in Supabase for the online movie tickets app.

Display theaters in a table, edit and delete them with a modal form, fetch theaters, manage loading state, and refresh data after updates in the admin panel.

Design and implement the shows table with movie and theater relations, including booked seats and available seats, and build CRUD server actions for shows in a Next.js and Supabase app.

Structure the admin shows UI in a Next.js app by creating shows pages for listing, adding, and editing, and a shared show form component to handle add and edit operations.

Display, edit, and delete shows on the admin shows page, linking movie and theater data, and format date and time while managing loading states and toast messages via server actions.

Master clone show functionality in a Next.js 15 and Supabase online movie tickets app, pre-populating data from an existing show and creating a new show by changing the time.

Display active movies on the user movies page with a query string search, render a movie tile grid, and link to theaters and shows for each title.