# desalerohit/barber-appointment-system architecture

> Architecture diagram of the GitHub repository desalerohit/barber-appointment-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/desalerohit/barber-appointment-system
- Repository: https://github.com/desalerohit/barber-appointment-system

## Overview

1. **Overall shape**
   - This is a **single-page React frontend** built with **Vite**. There is **no backend service in the repo**; all user accounts, login state, and appointments persist in the browser via `localStorage`.
   - The app is organized around **route-level pages**, with a small set of shared UI components and two global context providers.

2. **Entry/runtime boundary**
   - `index.html` provides the Vite mount point.
   - `src/main.jsx` is the React bootstrap layer and likely wires the app into the DOM while applying the top-level providers/styles.
   - `src/App.jsx` is the root composition point for routing and layout orchestration.

3. **Routing and page boundaries**
   - The main navigation is page-based:
     - `/` → `Home.jsx`
     - `/book` → `Book.jsx`
     - `/login` → `Login.jsx`
     - `/register` → `Register.jsx`
     - `/appointments` → `Appointments.jsx`
   - The architecture is centered on **client-side route transitions**, not server navigation.

4. **State and persistence layer**
   - `src/context/AuthContext.jsx` is the primary state boundary for identity/session behavior: register, login, logout, and the current user.
   - `localStorage` is the persistence layer with repo-defined keys:
     - `ba_accounts` for registered users
     - `ba_user` for the active session
     - `ba_appointments` for all bookings
   - This makes the app **browser-local and per-device**, with no networked data sync.

5. **Notification subsystem**
   - `src/context/ToastContext.jsx` plus `Toast.css` implement a **global feedback channel** for success/error/info messages.
   - Toasts are a cross-cutting concern used by auth, booking, and cancellation flows to provide immediate user feedback without coupling pages to a specific UI pattern.

6. **Shared chrome / navigation**
   - `src/components/Navbar.jsx` and `Footer.jsx` are shared layout components across pages.
   - The navbar is auth-aware and responsive, including the mobile menu behavior described in the README.
   - This creates a stable shell around the route content, while the footer closes the page layout.

7. **Home-to-booking flow**
   - `Home.jsx` is the marketing/entry page: hero, features, and barber cards.
   - A key flow is the **“Book Now” handoff** from barber cards to the booking page with a preselected barber, which means home page state is used to influence the booking route.
   - This is the main acquisition-to-action path in the app.

8. **Booking subsystem**
   - `Book.jsx` is the transaction page for creating appointments.
   - Based on the README, booking combines barber selection, service choice, date/time slot selection, and a live summary panel.
   - The booking flow depends on both **auth state** and **appointment persistence**, and it likely validates availability and writes a new appointment record to `localStorage`.

9. **Appointments management subsystem**
   - `Appointments.jsx` is the user’s booking management screen.
   - It reads the stored appointments, filters them by the logged-in user, and supports cancellation.
   - The cancellation rule (“free cancellation up to 2 hours before the slot”) is a business rule enforced in the frontend layer, so this page is both a viewer and a policy gatekeeper.

10. **Auth pages**
   - `Login.jsx` and `Register.jsx` are dedicated authentication forms with shared styling in `Auth.css`.
   - They are separate route-level entry points into the auth context, rather than modal overlays.
   - These pages likely redirect into the main app shell after successful auth and surface validation errors through toasts.

11. **Styling architecture**
   - Styling is split between a **global stylesheet** (`src/index.css`) and **page/component-specific CSS files**.
   - The repo uses plain CSS files, not CSS-in-JS; the architecture is therefore presentation-layer simple and easy to diagram as one stylesheet per view/component area.
   - The theme details in the README (dark luxury palette, Playfair Display, DM Sans) are global design-system choices, not separate runtime subsystems.

12. **Key data flows to diagram**
   - **Register/Login → AuthContext → localStorage → Navbar/App routes**
   - **Home “Book Now” → Book page preselection**
   - **Book form submit → appointments stored in localStorage → Toast feedback**
   - **Appointments page → reads user-specific bookings → cancellation update → Toast feedback**
   - The central architectural boundary is: **React UI + context state on top of browser storage**, with no external API dependency.

Main entry points: [`src/App.jsx`](https://github.com/desalerohit/barber-appointment-system/blob/main/src/App.jsx) (App), [`src/context/ToastContext.jsx`](https://github.com/desalerohit/barber-appointment-system/blob/main/src/context/ToastContext.jsx) (ToastContext), [`src/pages/Book.jsx`](https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Book.jsx) (Book), [`src/pages/Appointments.jsx`](https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Appointments.jsx) (Appointments)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_index_html["index.html<br/>Vite entry<br/>[index.html]"]
  node_main_jsx["main.jsx<br/>bootstrap<br/>[main.jsx]"]
  node_app_jsx["App<br/>router shell<br/>[App.jsx]"]
  node_client_router{{"Router<br/>client routing"}}
end

subgraph group_state["State"]
  node_auth_context["AuthContext<br/>session state<br/>[AuthContext.jsx]"]
  node_toast_context["ToastContext<br/>feedback state<br/>[ToastContext.jsx]"]
  node_browser_storage[("localStorage<br/>browser persistence")]
end

subgraph group_pages["Pages"]
  node_home_page["Home<br/>landing page<br/>[Home.jsx]"]
  node_book_page["Book<br/>[Book.jsx]"]
  node_login_page["Login<br/>auth form<br/>[Login.jsx]"]
  node_register_page["Register<br/>auth form<br/>[Register.jsx]"]
  node_appointments_page["Appointments<br/>management page<br/>[Appointments.jsx]"]
end

subgraph group_shared["Shared UI"]
  node_navbar["Navbar<br/>shared chrome<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>shared chrome<br/>[Footer.jsx]"]
end

node_index_html -->|"mounts"| node_main_jsx
node_main_jsx -->|"renders"| node_app_jsx
node_app_jsx -->|"hosts"| node_client_router
node_app_jsx -->|"provides"| node_auth_context
node_app_jsx -->|"provides"| node_toast_context
node_auth_context -->|"persists"| node_browser_storage
node_toast_context -.->|"notifies"| node_home_page
node_toast_context -.->|"notifies"| node_book_page
node_toast_context -.->|"notifies"| node_login_page
node_toast_context -.->|"notifies"| node_register_page
node_toast_context -.->|"notifies"| node_appointments_page
node_app_jsx -->|"shared chrome"| node_navbar
node_app_jsx -->|"shared chrome"| node_footer
node_client_router -->|"routes to"| node_home_page
node_client_router -->|"routes to"| node_book_page
node_client_router -->|"routes to"| node_login_page
node_client_router -->|"routes to"| node_register_page
node_client_router -->|"routes to"| node_appointments_page
node_home_page -->|"prefills barber"| node_book_page
node_book_page -->|"requires user"| node_auth_context
node_book_page -->|"stores appointment"| node_browser_storage
node_appointments_page -->|"reads user"| node_auth_context
node_appointments_page -->|"reads bookings"| node_browser_storage

click node_index_html "https://github.com/desalerohit/barber-appointment-system/blob/main/index.html"
click node_main_jsx "https://github.com/desalerohit/barber-appointment-system/blob/main/src/main.jsx"
click node_app_jsx "https://github.com/desalerohit/barber-appointment-system/blob/main/src/App.jsx"
click node_auth_context "https://github.com/desalerohit/barber-appointment-system/blob/main/src/context/AuthContext.jsx"
click node_toast_context "https://github.com/desalerohit/barber-appointment-system/blob/main/src/context/ToastContext.jsx"
click node_navbar "https://github.com/desalerohit/barber-appointment-system/blob/main/src/components/Navbar.jsx"
click node_footer "https://github.com/desalerohit/barber-appointment-system/blob/main/src/components/Footer.jsx"
click node_home_page "https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Home.jsx"
click node_book_page "https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Book.jsx"
click node_login_page "https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Login.jsx"
click node_register_page "https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Register.jsx"
click node_appointments_page "https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Appointments.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_index_html,node_main_jsx,node_app_jsx,node_client_router toneBlue
class node_auth_context,node_toast_context,node_browser_storage toneAmber
class node_home_page,node_book_page,node_login_page,node_register_page,node_appointments_page toneMint
class node_navbar,node_footer toneRose
```

## Components

### Runtime

Vite entry and React bootstrap boundary.

- [index.html](https://github.com/desalerohit/barber-appointment-system/blob/main/index.html): Vite entry · HTML mount point for the SPA. · `index.html`
- [main.jsx](https://github.com/desalerohit/barber-appointment-system/blob/main/src/main.jsx): bootstrap · React application bootstrap and top-level wiring. · `src/main.jsx`
- [App](https://github.com/desalerohit/barber-appointment-system/blob/main/src/App.jsx): router shell · Root composition point for providers, layout, and routes. · `src/App.jsx`
- **Router**: client routing · Browser-side navigation between pages.

### State

Global context and browser persistence.

- [AuthContext](https://github.com/desalerohit/barber-appointment-system/blob/main/src/context/AuthContext.jsx): session state · Identity and login state: register, login, logout, current user. · `src/context/AuthContext.jsx`
- [ToastContext](https://github.com/desalerohit/barber-appointment-system/blob/main/src/context/ToastContext.jsx): feedback state · Global toast notifications for success, error, and info messages. · `src/context/ToastContext.jsx`
- **localStorage**: browser persistence · Client-side storage for accounts, session, and appointments.

### Pages

Route-level screens and user flows.

- [Home](https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Home.jsx): landing page · Marketing entry page with barber cards and book-now handoff. · `src/pages/Home.jsx`
- [Book](https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Book.jsx): booking page · Creates appointments with barber, service, date, time, and summary. · `src/pages/Book.jsx`
- [Login](https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Login.jsx): auth form · Route-level sign-in screen. · `src/pages/Login.jsx`
- [Register](https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Register.jsx): auth form · Route-level account creation screen. · `src/pages/Register.jsx`
- [Appointments](https://github.com/desalerohit/barber-appointment-system/blob/main/src/pages/Appointments.jsx): management page · Lists the active user's bookings and supports cancellation. · `src/pages/Appointments.jsx`

### Shared UI

Cross-page chrome and reusable layout pieces.

- [Navbar](https://github.com/desalerohit/barber-appointment-system/blob/main/src/components/Navbar.jsx): shared chrome · Auth-aware responsive navigation shell. · `src/components/Navbar.jsx`
- [Footer](https://github.com/desalerohit/barber-appointment-system/blob/main/src/components/Footer.jsx): shared chrome · Bottom page chrome shared across routes. · `src/components/Footer.jsx`

## Connections

- index.html → main.jsx: mounts · Vite loads the React entry point.
- main.jsx → App: renders · Bootstraps the root React tree.
- App → Router: hosts · Sets up client-side route navigation.
- App → AuthContext: provides · Makes session state available to the app.
- App → ToastContext: provides · Makes toast feedback available globally.
- AuthContext → localStorage: persists · Reads and writes accounts and active session data.
- ToastContext → Home: notifies · Surfaces user feedback from page flows.
- ToastContext → Book: notifies · Surfaces booking success and validation feedback.
- ToastContext → Login: notifies · Surfaces sign-in errors and status messages.
- ToastContext → Register: notifies · Surfaces account creation feedback.
- ToastContext → Appointments: notifies · Surfaces cancellation and policy feedback.
- App → Navbar: shared chrome · Renders the persistent navigation shell.
- App → Footer: shared chrome · Renders the persistent footer shell.
- Router → Home: routes to · Entry route for the landing page.
- Router → Book: routes to · Booking route.
- Router → Login: routes to · Login route.
- Router → Register: routes to · Register route.
- Router → Appointments: routes to · Appointments route.
- Home → Book: prefills barber · Book Now handoff passes a selected barber into booking.
- Book → AuthContext: requires user · Booking depends on the active session.
- Book → localStorage: stores appointment · Writes new bookings into browser storage.
- Appointments → AuthContext: reads user · Scopes bookings to the logged-in user.
- Appointments → localStorage: reads bookings · Loads persisted appointment records.