# balaji-bi/jj-residency-suite architecture

> Architecture diagram of the GitHub repository balaji-bi/jj-residency-suite, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/balaji-bi/jj-residency-suite
- Repository: https://github.com/balaji-bi/jj-residency-suite

## Overview

#### Purpose and Runtime
This is a Vite-served React/TypeScript single-page frontend for a hotel or room-booking experience, with public marketing/customer pages and a separate administrative interface. It runs in the browser; no backend, database, API client, or authentication provider is evident in the repository tree. Core bootstrap files are `src/main.tsx`, `src/App.tsx`, and `index.html`.

#### Application Composition
`src/App.tsx` is the likely top-level application and route composition boundary. Page-level features are organized under `src/pages`, separating customer journeys from administrative workflows:
- Public/customer pages: `src/pages/Index.tsx`, `src/pages/BrowseRooms.tsx`, `src/pages/MyBookings.tsx`
- Account and support content: `src/pages/Auth.tsx`, `src/pages/Profile.tsx`, `src/pages/Contact.tsx`
- Administrative pages: `src/pages/admin/AdminDashboard.tsx`, `src/pages/admin/AdminRooms.tsx`, `src/pages/admin/AdminOrders.tsx`

#### Public Customer Flow
The public flow starts from the landing page, allows users to browse room inventory, and exposes booking history/profile paths. The principal UI stages are represented by `src/pages/Index.tsx`, `src/pages/BrowseRooms.tsx`, and `src/pages/MyBookings.tsx`. Room presentation is encapsulated in reusable cards, notably `src/components/RoomCategoryCard.tsx`; shared navigation likely links these views through `src/components/Navbar.tsx` and `src/components/NavLink.tsx`.

#### Admin Boundary
Administration is isolated structurally through a dedicated layout and `pages/admin` namespace. `src/components/AdminLayout.tsx` is the key shell boundary for admin navigation/chrome, while operational views cover dashboard, rooms, orders, customers, revenue, careers, and contact submissions. Representative control surfaces are `src/pages/admin/AdminDashboard.tsx`, `src/pages/admin/AdminCustomers.tsx`, and `src/pages/admin/AdminRevenue.tsx`. The tree does not show a runtime authorization guard or server-side separation; this is a UI-level boundary unless implemented inside these files.

#### Shared Layout and Design System
Customer-facing pages use a common layout/navigation/footer layer: `src/components/Layout.tsx`, `src/components/Navbar.tsx`, and `src/components/Footer.tsx`. The application uses Tailwind CSS and a local shadcn-style component library under `src/components/ui`, providing standardized dialogs, forms, tables, navigation, feedback, and responsive primitives. Shared styling enters through `src/index.css`, `src/App.css`, and `tailwind.config.ts`.

#### Data and Integration Boundaries
No explicit persistence or remote-service integration layer appears in `src/lib`, which contains only `src/lib/utils.ts`; no API routes, ORM, server runtime, or environment files are listed. Consequently, booking, customer, room, revenue, and contact data are likely static or component-local unless page implementations introduce external calls. Introducing real workflows should establish a distinct API/data-access boundary rather than embedding service calls across `src/pages` and `src/pages/admin`.

#### Build and Delivery
Vite is the development/build runtime, configured by `vite.config.ts`; TypeScript compilation is governed by `tsconfig.json` and `tsconfig.app.json`. The project is intended for Node/npm development and Lovable-managed publishing, per `README.md`. Static deployment assets reside in `public`, including `public/robots.txt`.

Main entry points: [`src/components/Layout.tsx`](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/Layout.tsx) (Customer layout), [`src/components/AdminLayout.tsx`](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/AdminLayout.tsx) (Admin layout), [`src/App.tsx`](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/App.tsx) (App composition), [`src/pages/BrowseRooms.tsx`](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/BrowseRooms.tsx) (Browse rooms)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser SPA"]
  node_html["HTML entry<br/>Vite entry<br/>[index.html]"]
  node_main["React bootstrap<br/>React entry<br/>[main.tsx]"]
  node_app{{"App composition<br/>route boundary<br/>[App.tsx]"}}
  node_localdata[("Component-local data<br/>data boundary")]
end

subgraph group_customer["Customer experience"]
  node_landing["Landing page<br/>customer page<br/>[Index.tsx]"]
  node_browse["Browse rooms<br/>customer page<br/>[BrowseRooms.tsx]"]
  node_roomcard["Room category card<br/>room presentation"]
  node_bookings["My bookings<br/>customer page<br/>[MyBookings.tsx]"]
  node_account["Account and support<br/>page set<br/>[Auth.tsx]"]
end

subgraph group_admin["Admin interface"]
  node_adminlayout{{"Admin layout<br/>admin shell<br/>[AdminLayout.tsx]"}}
  node_admindashboard["Dashboard<br/>admin page<br/>[AdminDashboard.tsx]"]
  node_adminrooms["Room operations<br/>admin page<br/>[AdminRooms.tsx]"]
  node_adminorders["Order operations<br/>admin page<br/>[AdminOrders.tsx]"]
  node_admininsights["Customers and revenue<br/>admin page set<br/>[AdminCustomers.tsx]"]
end

subgraph group_shared["Shared UI"]
  node_layout["Customer layout<br/>layout shell<br/>[Layout.tsx]"]
  node_navbar["Navigation<br/>shared component<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>shared component<br/>[Footer.tsx]"]
  node_ui["UI component library<br/>shadcn-style primitives"]
end

subgraph group_delivery["Build and delivery"]
  node_vite["Vite build runtime<br/>build tooling<br/>[vite.config.ts]"]
  node_styles["Tailwind styling<br/>design tokens and CSS<br/>[tailwind.config.ts]"]
end

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"composes customer routes"| node_layout
node_app -->|"composes admin routes"| node_adminlayout
node_layout -->|"includes"| node_navbar
node_layout -->|"includes"| node_footer
node_layout -->|"renders"| node_landing
node_layout -->|"renders"| node_browse
node_layout -->|"renders"| node_bookings
node_layout -->|"renders"| node_account
node_navbar -->|"navigates to"| node_browse
node_browse -->|"presents rooms with"| node_roomcard
node_adminlayout -->|"renders"| node_admindashboard
node_adminlayout -->|"renders"| node_adminrooms
node_adminlayout -->|"renders"| node_adminorders
node_adminlayout -->|"renders"| node_admininsights
node_app -->|"uses"| node_ui
node_landing -.->|"uses"| node_localdata
node_browse -.->|"uses"| node_localdata
node_adminlayout -.->|"uses"| node_localdata
node_vite -->|"serves and builds"| node_html
node_styles -->|"styles"| node_ui

click node_html "https://github.com/balaji-bi/jj-residency-suite/blob/main/index.html"
click node_main "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/main.tsx"
click node_app "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/App.tsx"
click node_layout "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/Layout.tsx"
click node_navbar "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/Navbar.tsx"
click node_footer "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/Footer.tsx"
click node_ui "https://github.com/balaji-bi/jj-residency-suite/tree/main/src/components/ui"
click node_landing "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/Index.tsx"
click node_browse "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/BrowseRooms.tsx"
click node_roomcard "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/RoomCategoryCard.tsx"
click node_bookings "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/MyBookings.tsx"
click node_account "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/Auth.tsx"
click node_adminlayout "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/AdminLayout.tsx"
click node_admindashboard "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/admin/AdminDashboard.tsx"
click node_adminrooms "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/admin/AdminRooms.tsx"
click node_adminorders "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/admin/AdminOrders.tsx"
click node_admininsights "https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/admin/AdminCustomers.tsx"
click node_vite "https://github.com/balaji-bi/jj-residency-suite/blob/main/vite.config.ts"
click node_styles "https://github.com/balaji-bi/jj-residency-suite/blob/main/tailwind.config.ts"

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_html,node_main,node_app,node_localdata toneBlue
class node_landing,node_browse,node_roomcard,node_bookings,node_account toneAmber
class node_adminlayout,node_admindashboard,node_adminrooms,node_adminorders,node_admininsights toneMint
class node_layout,node_navbar,node_footer,node_ui toneRose
class node_vite,node_styles toneIndigo
```

## Components

### Browser SPA

Vite serves the React single-page application.

- [HTML entry](https://github.com/balaji-bi/jj-residency-suite/blob/main/index.html): Vite entry · `index.html`
- [React bootstrap](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/main.tsx): React entry · `src/main.tsx`
- [App composition](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/App.tsx): route boundary · Top-level page and route composition. · `src/App.tsx`
- **Component-local data**: data boundary · No API, persistence, or authentication provider is evident.

### Customer experience

- [Landing page](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/Index.tsx): customer page · `src/pages/Index.tsx`
- [Browse rooms](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/BrowseRooms.tsx): customer page · `src/pages/BrowseRooms.tsx`
- [Room category card](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/RoomCategoryCard.tsx): room presentation · `src/components/RoomCategoryCard.tsx`
- [My bookings](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/MyBookings.tsx): customer page · `src/pages/MyBookings.tsx`
- [Account and support](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/Auth.tsx): page set · Authentication, profile, and contact views. · `src/pages/Auth.tsx`

### Admin interface

A UI-level administrative boundary.

- [Admin layout](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/AdminLayout.tsx): admin shell · Dedicated admin navigation and chrome. · `src/components/AdminLayout.tsx`
- [Dashboard](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/admin/AdminDashboard.tsx): admin page · `src/pages/admin/AdminDashboard.tsx`
- [Room operations](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/admin/AdminRooms.tsx): admin page · `src/pages/admin/AdminRooms.tsx`
- [Order operations](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/admin/AdminOrders.tsx): admin page · `src/pages/admin/AdminOrders.tsx`
- [Customers and revenue](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/pages/admin/AdminCustomers.tsx): admin page set · Administrative customer and revenue views. · `src/pages/admin/AdminCustomers.tsx`

### Shared UI

- [Customer layout](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/Layout.tsx): layout shell · `src/components/Layout.tsx`
- [Navigation](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/Navbar.tsx): shared component · `src/components/Navbar.tsx`
- [Footer](https://github.com/balaji-bi/jj-residency-suite/blob/main/src/components/Footer.tsx): shared component · `src/components/Footer.tsx`
- [UI component library](https://github.com/balaji-bi/jj-residency-suite/tree/main/src/components/ui): shadcn-style primitives · Reusable forms, tables, dialogs, feedback, and responsive primitives. · `src/components/ui`

### Build and delivery

- [Vite build runtime](https://github.com/balaji-bi/jj-residency-suite/blob/main/vite.config.ts): build tooling · `vite.config.ts`
- [Tailwind styling](https://github.com/balaji-bi/jj-residency-suite/blob/main/tailwind.config.ts): design tokens and CSS · `tailwind.config.ts`

## Connections

- HTML entry → React bootstrap: loads
- React bootstrap → App composition: mounts
- App composition → Customer layout: composes customer routes
- App composition → Admin layout: composes admin routes
- Customer layout → Navigation: includes
- Customer layout → Footer: includes
- Customer layout → Landing page: renders
- Customer layout → Browse rooms: renders
- Customer layout → My bookings: renders
- Customer layout → Account and support: renders
- Navigation → Browse rooms: navigates to
- Browse rooms → Room category card: presents rooms with
- Admin layout → Dashboard: renders
- Admin layout → Room operations: renders
- Admin layout → Order operations: renders
- Admin layout → Customers and revenue: renders
- App composition → UI component library: uses
- Landing page → Component-local data: uses
- Browse rooms → Component-local data: uses
- Admin layout → Component-local data: uses
- Vite build runtime → HTML entry: serves and builds
- Tailwind styling → UI component library: styles