How desalerohit/barber-appointment-system works
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: App.jsx App · ToastContext.jsx ToastContext · Book.jsx Book · Appointments.jsx Appointments
Components 14
Runtime
Vite entry and React bootstrap boundary.
- index.html · HTML mount point for the SPA.
index.html - main.jsx · React application bootstrap and top-level wiring.
src/main.jsx - App · Root composition point for providers, layout, and routes.
src/App.jsx - Router · Browser-side navigation between pages.
State
Global context and browser persistence.
- AuthContext · Identity and login state: register, login, logout, current user.
src/context/AuthContext.jsx - ToastContext · Global toast notifications for success, error, and info messages.
src/context/ToastContext.jsx - localStorage · Client-side storage for accounts, session, and appointments.
Pages
Route-level screens and user flows.
- Home · Marketing entry page with barber cards and book-now handoff.
src/pages/Home.jsx - Book · Creates appointments with barber, service, date, time, and summary.
src/pages/Book.jsx - Login · Route-level sign-in screen.
src/pages/Login.jsx - Register · Route-level account creation screen.
src/pages/Register.jsx - Appointments · Lists the active user's bookings and supports cancellation.
src/pages/Appointments.jsx
Connections 23
- 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.