Next.js 15 & Supabase - Build a Salon & Spa Booking App

Build the homepage UI for the authentication module, including a header with a login button linking to /login and a responsive two-column hero with text and image.

Learn to design a login page with a gradient background, public route setup, and a validated form using react hook form and zod, featuring email, password, and role radio options.

Replicate the login form to build the registration page, adding name, email, password, and role with validation, update labels and navigation to login, and prepare for backend storage with Supabase.

Set up a supabase backend by creating an account, provisioning a project under your organization, and wiring the project URL and API key into env variables for a Next.js app.

Create a user profiles table in a Supabase project with name, email, password, role, and is active columns, and apply a row-level security policy for full permissions with custom authentication.

Register a new user with name, email, password, and role using a Next.js server action; validate email with Supabase, hash the password with bcryptjs, and insert into user_profiles with toasts.

Implement login functionality by installing JSON Web Token and js-cookie, validate user credentials from Supabase, issue a JWT token stored in cookies, and route to user or owner dashboards.

Protect private routes with Next.js middleware by checking route and cookies, redirecting unauthenticated users to login and routing authenticated users to the proper user or salon owner dashboard.

Build the layout skeleton for private and public routes by implementing a layout provider, role-aware header, and wrapper components, preparing navigation and styling for the salon and spa booking app.

Build a private layout header for a Next.js app, featuring a black header with the project title, logged-in username, and a lucide menu icon, with user data fetched from cookies.

Render a sidebar menu in the layout with a sheet component opened by the hamburger and closed on outside clicks, based on the logged-in user or salon spa owner role.

Render the layout menu items dynamically based on the logged-in user role, highlight the active item, and implement logout with cookie removal and navigation.

Show a spinner while awaiting the fetch user API in the private layout, toggle loading state, render the loader component, and then display the page once data arrives.

Build a reusable error message component for all error scenarios, display it when fetch user fails, and simulate an invalid token to show a clear 'invalid token' message across pages.

Store the logged-in user in a global Zustand store instead of local state to share data across private layout, header, and menus, avoiding prop drilling.

Explore building the backend for a salon and spa booking app with Next.js 15 and Supabase, covering salon CRUD, form fields, working days, time slots, and map integration planning.

Create a salon spa table in Supabase with an owner relation, define fields like name, address, price range, working days, hours, and location, then implement the interface in the project.

Implement server actions in a Next.js 15 and Supabase app to perform CRUD operations for salon spa records, including create, read by owner or id, update, and delete.

Create a reusable front-end structure for a salon and spa CRUD app by building a shared page title component and a reusable salon form for add and edit pages.

Build the salon spa form user interface using login form syntax, define the form schema and form object, and wire fields like name, description, address, and working days.

Create a working days section in the salon-spa form using a days constants file. Render checkboxes, track selections with form watch, and prepare for server action.

Explains how to wire add new salon spa server action in a Next.js 15 app with Supabase, including onsubmit, loading state, owner id, and navigation to salon spa list.

Build and display salons and spas owned by the logged-in user in a Next.js 15 app with Supabase, rendering a dynamic table with id, name, location, prices, status, and actions.

Explore implementing the edit operation in a sparse CRUD app with Next.js 15 and Supabase, including routing to edit page, fetching by id, populating form values, and adding loaders.

Implement the delete salon spa by id function with loading state, error handling, and toast messages, then refresh or filter data to reflect deletions.

Integrate openlayers maps for precise location selection in the salon and spa booking form, retrieving display name, latitude, and longitude to save to the database.

Learn to pre-populate a salon's saved location on the Openlayers map service using the selected location's display name, latitude, and longitude, while avoiding extra state updates.

Demonstrates the schedule appointment functionality in the user module, listing salon spas with filters and nearby search, then booking by date and time and navigating to the appointments page.

Fetch and display salons and spas created by different users on the schedule appointment page, then navigate to the selected salon spa's schedule appointment view.

Explore building a salon and spa booking page with Next.js 15 and Supabase, displaying salon details and a client checkout using a date picker and time selection to book appointments.

Disable past days and future non-working days in the date picker by applying a min date and a filter that uses the salon spa working days.

Generate dynamic booking slots from start to end time using slot duration in 24-hour format with dayjs, display in time options, with break logic as assignment.

Create the appointments table and interface in supabase, define columns and relations, and implement server actions to book appointments and fetch by user or owner.

Implements appointment booking logic in a salon app, building a loading state, constructing a booking payload with user, salon, and date data, handling responses, and navigating to the appointments page.

Validate date and time against the database, enable the book button when slots are available, and display the number of available slots or a no slots available message.

Display a logged-in user's booked appointments in a Next.js 15 and Supabase app by fetching by user id and rendering a table with salon spa name, date, time, and status.

Implement update appointment status in user appointments with a select field using predefined statuses (booked, cancel, completed), wired to a Supabase server action to update the database.

Display and manage salon spa owner appointments by fetching by owner ID, showing salon and customer names, booking date, and status, with future updates for owner filters.

Build the salon spa owner appointment filters UI in Next.js 15 and Supabase, including salon/spa, date, and status filters, with fetching salons by owner and responsive filter controls.

Builds filter logic for the salon spa owner appointments table with a filters object for status, salon spa id, and date, wiring apply and clear actions to update the query.