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.

Register api demonstrates backend registration using server actions, bcrypt js for password hashing, json web token for auth, and js cookie for storing the token, with Supabase as the database.

Implement a secure login api in Next.js with Supabase by validating email and password, comparing with bcrypt, issuing a JWT, storing it in cookies, and routing users to role-based dashboards.

fetch and display the logged in user in private routes by reading the jwt from cookies, decoding it, and querying the user profile for server and client components.

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.

Implement a common layout for user and admin routes using a layout provider, public and private layouts, and a header and sidebar driven by path name.

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.

Create the movies table in the supabase project with fields like name, description, release date, genre, poster url, and is active, configure permissions, and export the movie interface.

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.

Outline the front-end folder structure for the movies module, create add/edit routes and a reusable movie form with a shared page title, and implement login redirects in the private layout.

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.

Build a poster upload flow for the add movie form by selecting and previewing an image, uploading to Supabase storage, and submitting the add movie server action.

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.

Learn to build an info message and a loading spinner in a Next.js 15 and Supabase movie app, including a no data state and a centered animated loader.

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.

Implement delete movie functionality in Next.js 15 with Supabase by wiring a server action to a button, handling loading, refetching, and toast errors.

Explore the theatre CRUD flow in the admin panel, including listing theatres, adding via a modal or page form with name, location, and capacity, and preparing server actions for theatres.

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.

Build the admin theatres interface in a Next.js app by creating a theatres page and a modal theatre form for name, address, and capacity, with submit and data reload.

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.

Navigate the admin shows module (screenings) to manage theater shows—add, edit, delete, or clone shows with theater, movie, date, time, and ticket price, stored in the Super Base shows table.

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.

Add show form UI enables admin to create shows with movie and theater selections, date, time, price, and seats based on theater capacity.

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.

Design and implement a search input to filter movies by updating the query string, and handle server-side filtering with actions across client and server components.

Set up the movie page by fetching the movie with router params in a client component, display theaters and shows, and enable date selection and continue to seats.

Learn to fetch theater shows for a movie, group them by theater so the user interface receives one theater row with its shows, and apply date filtering with loading states.

Display theatres and shows by rendering each theater's name and address and its shows, sort times in 24-hour format, and highlight the selected show.