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

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.

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.

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.

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.

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.

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.

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.