# zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client architecture

> Architecture diagram of the GitHub repository zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client
- Repository: https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client

## Overview

1. SportNest is a Next.js App Router client application. The repo is organized around routed screens in `src/app`, with most business UI living in reusable components under `src/app/components`. It is primarily a frontend for a separate backend API, with only auth-specific route handling inside this repo.

2. The application shell is defined globally in `src/app/layout.js` and styled through `src/app/globals.css`, TailwindCSS, and DaisyUI. The shared shell likely wraps all pages with common navigation and footer components, while `loading.jsx` files provide route-level pending states and `not-found.jsx` handles unknown routes.

3. The public-facing marketing layer is concentrated on the home and informational pages: `src/app/page.js`, `about-us`, plus sections like `Banner`, `HowItWorks`, `WhyChooseUs`, `Testimonials`, `FeaturedFacilities`, and `Footer`. This makes the homepage a conversion entry point rather than just a dashboard.

4. Facility discovery is centered on `all-facilities` and `all-facilities/[id]`. The list page uses search/filter UI, card summaries, and sport-type filtering, while the detail page uses `FacilitiesDetails` to show a single facility and likely acts as the handoff into booking.

5. Booking is a dedicated flow implemented by `BookingForm`, with cancellation handled by `BookingCancelAlert` and booking history surfaced in `MyBooking`. The data path is: user action in the UI -> form/alert component -> backend API call -> updated booking state shown on the bookings page.

6. Facility management is a separate owner/admin-style subsystem. `add-facility`, `manage-facilities`, `EditFacilityForm`, and `FacilityDeleteAlert` support creating, editing, and deleting facilities, so the architecture distinguishes between browsing/bookings and facility CRUD operations.

7. Authentication is handled through Better Auth. The local auth boundary is exposed at `src/app/api/auth/[...all]/route.js`, while `src/lib/auth.js` and `src/lib/auth-client.js` separate server/client auth setup. The README also indicates email/password and Google login, with protected routes guarded by JWT-based access control.

8. The app’s main business data does not live in this repository. Client pages call an external backend via `NEXT_PUBLIC_API_URL`, which is where facility, booking, and user data are fetched and mutated. MongoDB is mentioned in the README, but it is part of the backend persistence layer, not the frontend runtime.

9. `src/proxy.js` is the request-time protection boundary for private routes. It likely redirects unauthenticated users away from booking/management pages and keeps the public pages accessible without login.

10. The component architecture is intentionally modular: forms, cards, alerts, navigation, and content sections are isolated as separate React components. That keeps page files thin and makes it easier to diagram the system as a set of route-level screens composed from shared UI primitives, with auth and data access as the main cross-cutting concerns.

11. Operationally, the project is built for browser deployment on Vercel, with environment variables for auth and backend integration. Key external dependencies that materially affect architecture are Next.js App Router, Better Auth, axios-style HTTP calls, and UI libraries for styling and interaction.

Main entry points: [`src/proxy.js`](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/proxy.js) (Route guard), [`src/app/layout.js`](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/layout.js) (App shell), [`src/app/page.js`](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/page.js) (Home page), [`src/app/components/Navbar.jsx`](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/Navbar.jsx) (Navbar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_app["App Router"]
  node_n_shell["App shell<br/>layout + styles<br/>[layout.js]"]
  node_n_home["Home page<br/>marketing route<br/>[page.js]"]
  node_n_about["About us<br/>informational route<br/>[page.jsx]"]
  node_n_facilities_list["All facilities<br/>browse route<br/>[page.jsx]"]
  node_n_facility_detail["Facility detail<br/>detail route<br/>[page.jsx]"]
  node_n_booking_create["Add booking<br/>booking form route<br/>[BookingForm.jsx]"]
  node_n_bookings["My bookings<br/>user route<br/>[page.jsx]"]
  node_n_facility_create["Add facility<br/>owner route<br/>[page.jsx]"]
  node_n_facility_manage["Manage facilities<br/>owner route<br/>[page.jsx]"]
  node_n_login["Login<br/>auth route<br/>[page.jsx]"]
  node_n_register["Register<br/>auth route<br/>[page.jsx]"]
end

subgraph group_grp_ui["Shared UI"]
  node_n_nav["Navbar<br/>navigation component<br/>[Navbar.jsx]"]
  node_n_footer["Footer<br/>layout component<br/>[Footer.jsx]"]
  node_n_sections["Landing sections<br/>content components<br/>[Banner.jsx]"]
  node_n_facility_ui["Facility UI<br/>browse/detail components<br/>[FacilitiesCard.jsx]"]
  node_n_owner_ui["Owner forms<br/>crud components"]
  node_n_booking_ui["Booking actions<br/>booking components<br/>[MyBooking.jsx]"]
end

subgraph group_grp_auth["Auth & Access"]
  node_n_auth_api["Auth API<br/>better-auth endpoint<br/>[route.js]"]
  node_n_auth_server["Server auth<br/>auth config<br/>[auth.js]"]
  node_n_auth_client["Client auth<br/>auth client<br/>[auth-client.js]"]
  node_n_proxy["Route guard<br/>proxy middleware<br/>[proxy.js]"]
end

node_n_shell -->|"wraps"| node_n_nav
node_n_shell -->|"wraps"| node_n_footer
node_n_shell -->|"hosts"| node_n_home
node_n_home -->|"composed of"| node_n_sections
node_n_home -->|"reuses"| node_n_footer
node_n_about -->|"reuses"| node_n_footer
node_n_facilities_list -->|"uses"| node_n_facility_ui
node_n_facilities_list -->|"links to"| node_n_facility_detail
node_n_facility_detail -->|"handoff to"| node_n_booking_create
node_n_booking_create -->|"updates"| node_n_booking_ui
node_n_bookings -->|"renders"| node_n_booking_ui
node_n_facility_create -->|"uses"| node_n_owner_ui
node_n_facility_manage -->|"uses"| node_n_owner_ui
node_n_login -->|"uses"| node_n_auth_client
node_n_register -->|"uses"| node_n_auth_client
node_n_auth_api -->|"backed by"| node_n_auth_server
node_n_proxy -->|"checks"| node_n_auth_server
node_n_proxy -->|"protects"| node_n_facility_create
node_n_proxy -->|"protects"| node_n_facility_manage
node_n_proxy -->|"protects"| node_n_bookings
node_n_facility_ui -->|"feeds"| node_n_booking_create
node_n_nav -->|"routes to"| node_n_login
node_n_nav -->|"routes to"| node_n_facilities_list

click node_n_shell "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/layout.js"
click node_n_home "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/page.js"
click node_n_about "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/about-us/page.jsx"
click node_n_facilities_list "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/all-facilities/page.jsx"
click node_n_facility_detail "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/all-facilities/[id]/page.jsx"
click node_n_booking_create "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/BookingForm.jsx"
click node_n_bookings "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/my-bookings/page.jsx"
click node_n_facility_create "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/add-facility/page.jsx"
click node_n_facility_manage "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/manage-facilities/page.jsx"
click node_n_login "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/login/page.jsx"
click node_n_register "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/register/page.jsx"
click node_n_auth_api "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/api/auth/[...all]/route.js"
click node_n_auth_server "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/lib/auth.js"
click node_n_auth_client "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/lib/auth-client.js"
click node_n_proxy "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/proxy.js"
click node_n_nav "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/Navbar.jsx"
click node_n_footer "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/Footer.jsx"
click node_n_sections "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/Banner.jsx"
click node_n_facility_ui "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/FacilitiesCard.jsx"
click node_n_owner_ui "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/AddFacilityForm.jsx"
click node_n_booking_ui "https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/MyBooking.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_n_shell,node_n_home,node_n_about,node_n_facilities_list,node_n_facility_detail,node_n_booking_create,node_n_bookings,node_n_facility_create,node_n_facility_manage,node_n_login,node_n_register toneBlue
class node_n_nav,node_n_footer,node_n_sections,node_n_facility_ui,node_n_owner_ui,node_n_booking_ui toneAmber
class node_n_auth_api,node_n_auth_server,node_n_auth_client,node_n_proxy toneMint
```

## Components

### App Router

Route-level screens, shell, and request handling in the Next.js client app.

- [App shell](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/layout.js): layout + styles · Global layout and styling foundation for the app. · `src/app/layout.js`
- [Home page](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/page.js): marketing route · Public landing page that introduces the service and conversion content. · `src/app/page.js`
- [About us](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/about-us/page.jsx): informational route · Public informational page about the product or company. · `src/app/about-us/page.jsx`
- [All facilities](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/all-facilities/page.jsx): browse route · Facility discovery page with search, filtering, and card summaries. · `src/app/all-facilities/page.jsx`
- [Facility detail](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/all-facilities/[id]/page.jsx): detail route · Single facility view that supports booking handoff. · `src/app/all-facilities/[id]/page.jsx`
- [Add booking](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/BookingForm.jsx): booking form route · Booking creation flow for selecting a facility and submitting reservation data. · `src/app/components/BookingForm.jsx`
- [My bookings](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/my-bookings/page.jsx): user route · User booking history and booking management view. · `src/app/my-bookings/page.jsx`
- [Add facility](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/add-facility/page.jsx): owner route · Facility creation screen for owner or admin workflows. · `src/app/add-facility/page.jsx`
- [Manage facilities](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/manage-facilities/page.jsx): owner route · Facility CRUD management page for editing and deleting listings. · `src/app/manage-facilities/page.jsx`
- [Login](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/login/page.jsx): auth route · Sign-in page for authenticated access to private flows. · `src/app/login/page.jsx`
- [Register](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/register/page.jsx): auth route · Account creation page for new users. · `src/app/register/page.jsx`

### Shared UI

Reusable page sections and interaction components composed by route files.

- [Navbar](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/Navbar.jsx): navigation component · Shared top-level navigation used across screens. · `src/app/components/Navbar.jsx`
- [Footer](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/Footer.jsx): layout component · Shared footer shown in the application shell and marketing pages. · `src/app/components/Footer.jsx`
- [Landing sections](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/Banner.jsx): content components · Homepage conversion sections including banner, process, trust, testimonials, and featured facilities. · `src/app/components/Banner.jsx`
- [Facility UI](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/FacilitiesCard.jsx): browse/detail components · Reusable cards, filters, detail view, and booking-related actions for facilities. · `src/app/components/FacilitiesCard.jsx`
- [Owner forms](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/AddFacilityForm.jsx): crud components · Reusable create, edit, and delete components for facility management. · `src/app/components/AddFacilityForm.jsx`
- [Booking actions](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/components/MyBooking.jsx): booking components · Booking history and cancellation interaction components. · `src/app/components/MyBooking.jsx`

### Auth & Access

Local auth integration and route protection boundaries.

- [Auth API](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/app/api/auth/[...all]/route.js): better-auth endpoint · Catch-all auth route exposed under the App Router API boundary. · `src/app/api/auth/[...all]/route.js`
- [Server auth](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/lib/auth.js): auth config · Server-side Better Auth setup and access control definitions. · `src/lib/auth.js`
- [Client auth](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/lib/auth-client.js): auth client · Client-side auth integration used by login and session-aware UI. · `src/lib/auth-client.js`
- [Route guard](https://github.com/zihad-1883/l1-a9-sportnest-sports-facility-booking-management-system-client/blob/main/src/proxy.js): proxy middleware · Request-time protection boundary for private routes. · `src/proxy.js`

## Connections

- App shell → Navbar: wraps · Shared shell includes global navigation.
- App shell → Footer: wraps · Shared shell includes the site footer.
- App shell → Home page: hosts · Layout frames the routed pages.
- Home page → Landing sections: composed of · Home page is assembled from marketing sections.
- Home page → Footer: reuses · Public pages share footer content.
- About us → Footer: reuses · Informational pages share the global footer.
- All facilities → Facility UI: uses · List page relies on card and filter components.
- All facilities → Facility detail: links to · Browsing flows into a single-facility view.
- Facility detail → Add booking: handoff to · Detail page leads into booking creation.
- Add booking → Booking actions: updates · Booking flow feeds user booking state and actions.
- My bookings → Booking actions: renders · Bookings page displays booking history and cancellations.
- Add facility → Owner forms: uses · Owner create flow is built from reusable form components.
- Manage facilities → Owner forms: uses · Management page relies on edit and delete UI.
- Login → Client auth: uses · Login page connects to the client auth layer.
- Register → Client auth: uses · Registration page connects to the client auth layer.
- Auth API → Server auth: backed by · API route is implemented through the server auth configuration.
- Route guard → Server auth: checks · Route guard depends on auth state and access rules.
- Route guard → Add facility: protects · Private owner pages are guarded at request time.
- Route guard → Manage facilities: protects · Private owner pages are guarded at request time.
- Route guard → My bookings: protects · Private user pages are guarded at request time.
- Facility UI → Add booking: feeds · Facility detail and list UI feed booking actions.
- Navbar → Login: routes to · Navigation exposes access to auth pages.
- Navbar → All facilities: routes to · Navigation exposes discovery pages.