MERN Stack Salon & Spa Booking App

Learn to implement the front-end authentication module for the MERN stack salon and spa booking app by creating home, login, and register pages as public routes with React Router Dom.

Builds the home page UI for the MERN stack salon & spa app, featuring a header, a two-column hero, a get started button, and a login link.

Create a login page UI with a centered white card on a primary background, including email, password, and user or admin role fields, with react-hook-form and zod validation.

Set up the backend for the mern stack salon app by initializing npm, installing express, mongoose, jsonwebtoken, and bcryptjs, creating index.js, and running a live-reload server on port 5000.

Connect to a local MongoDB from a node.js app using dotenv and mongoose, configure a .env with the MongoDB URL, export a connect function, and verify the connection.

Build the register user API for the mern stack spa booking app by creating the users route, defining the user model with mongoose, hashing passwords with bcrypt, and handling errors.

Learn to integrate the register API with the frontend by configuring a backend URL via environment variables, using axios and react hot toast for feedback, and handling loading and errors.

Implement a back-end login API that finds a user by email, validates the password with bcrypt, and issues a JWT containing user id and email signed by a secret key.

Learn to implement login api integration with role-based access for normal users and salon spa owners, using cookies for tokens and redirecting to user or owner dashboards.

Develop a jwt-based auth middleware to protect routes in the MERN stack salon and spa booking app by decrypting the cookie token to obtain the user id and fetch user.

Fetch and display the logged-in user data across owner and user dashboards by wrapping routes in a private layout, storing the user in a zustand global store for single-fetch access.

Implement logout by removing the token and role from browser cookies with the JS cookie library, then navigate to the login page and show success or error toasts.

Protect private routes by checking browser cookies for a token, redirecting unauthenticated users to login, and routing by role to user or owner dashboards.

Design and implement a dynamic loading spinner for async tasks by replacing loading text with a rotating spinner in the private layout of the MERN stack spa booking app.

Set up the layout for private routes for owner and user, with a dashboard and role-based menus for saloons, appointments, and profiles. Introduce lucid react icons and outline next steps.

Build the header for the private layout with a left logo and a right-aligned logged-in user name, and include a Lucid React menu icon to open a chart CDN sheet.

Render the sidebar by the logged-in user role using separate user and owner menus with names, paths, and icons, and highlight the active item while wiring navigation and logout.

Outline the backend for the salons module, detailing fields for name, address, pricing, offer status, working days and hours, slot duration, max bookings, and real-time location.

Develop backend APIs for the saloon module, including create, get by owner, get by id, update, delete, and a public get all saloons, with owner validation and error handling.

Builds the frontend structure for the mern stack salon app by creating saloon pages (list, add, edit), a reusable page title component, and a shared saloon form.

Build the saloon form by defining a schema with name, address, city, state, zip, price range, offer status, working days, time slots, and location map; set initial values and onsubmit.

Design the salon form's working days section with a days list and checkboxes to update the form state. Add time fields, slot duration, and max bookings per slot with validation.

Learn to integrate the salon api with axios, manage credentials, loading, and errors, then post a new salon with an owner id and navigate to the owner's salons page.

Fetch the salons of the logged-in owner via the get salons by owner API, show a loading spinner, handle errors, and render a dynamic table with salon details and actions.

Learn to edit a salon by navigating to the edit route, fetching salon data by id, pre-populating form fields including working days, and submitting updates via axios.

Implement delete functionality for salons using axios.delete, with proper error handling and loading state, and update the user interface by filtering out the removed salon.

Integrate a location selection component using the Openlayers map library to replace Google Maps, enabling map plus autocomplete suggestions in the salon form.

See how the frontend displays available saloons, fetches by active true, offers location filters and options like nearby, cheapest, top rated, offers, and enables book appointment after date time validation.

Build the available saloons UI by fetching active saloons from an API with axios. Display cards showing name, address, and minimum price, and add filters for nearby, premium, and offers.

Explore building a three-column book appointment page UI for a MERN stack salon app, with date and time selection, loading states, salon property display, and booking controls.

Discover how to show available booking dates and time slots based on salon working days, using a react date picker, dayjs, and break-aware time slot generation.

Develop the appointment model and schema on the back end for the mern stack salon booking app, including saloon, user, and owner references, date time, status, and CRUD operations.

Implement appointment CRUD operations in the MERN stack, adding routes for booking and retrieving user-specific appointments. Validate requests, handle errors, and check salon availability with max bookings per slot.

Learn to integrate the availability and book appointment APIs in a MERN stack salon app, implement check availability, show available slots, and complete the booking workflow.