# rafyhossain/classradar architecture

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

- Interactive diagram: https://gitdiagram.com/rafyhossain/classradar
- Repository: https://github.com/rafyhossain/classradar

## Overview

#### Purpose and Runtime

This is a client-side React application for a class/school dashboard experience: public landing content, authentication screens, and an authenticated dashboard with class schedule, announcements, and quick actions. It runs as a Vite SPA with React HMR/build tooling; no backend, API client, persistence layer, or external service integration is present in the tree.

Entry/bootstrap points:
- `index.html`
- `src/main.jsx`
- `src/App.jsx`

#### Application Shell and Routing

`src/main.jsx` mounts the React application, while `src/App.jsx` provides the top-level application shell. Route definitions are centralized in:
- `src/routes/route.jsx`

The router is the primary control boundary: it maps public/authenticated-facing page routes to page components and handles the unmatched route through:
- `src/pages/NotFound.jsx`

No server-side routing or authentication enforcement boundary is evident; auth pages are currently presentation-level routes.

#### Layout Segmentation

Layouts separate route families and own persistent page chrome:
- `src/layouts/MainLayout.jsx`
- `src/layouts/AuthLayout.jsx`
- `src/layouts/DashboardLayout.jsx`

`MainLayout` supports the public landing experience, `AuthLayout` frames login/register pages, and `DashboardLayout` establishes the dashboard navigation structure. Shared navigation and footer primitives live under:
- `src/components/common/Navbar.jsx`
- `src/components/common/BottomNavbar.jsx`
- `src/components/common/Footer.jsx`

This is the main composition boundary between route content and reusable application chrome.

#### Public and Authentication Experiences

The public entry experience is composed from focused landing sections:
- `src/pages/Landing/LandingPage.jsx`
- `src/pages/Landing/sections/HeroSection.jsx`
- `src/pages/Landing/sections/FeaturesSection.jsx`

Authentication is represented by distinct login and registration screens:
- `src/pages/Auth/Login.jsx`
- `src/pages/Auth/Register.jsx`

These pages do not have corresponding state management, API, token, or identity-provider modules in the repository, so they should be treated as UI flows until backend integration is added.

#### Dashboard Feature Composition

Dashboard routes provide the core product UI:
- `src/pages/Dashboard/DashboardHome.jsx`
- `src/pages/Dashboard/Schedule.jsx`

`DashboardHome` is assembled from domain-oriented cards for summary information, upcoming classes, announcements, and actions:
- `src/components/dashboard/SummaryCard.jsx`
- `src/components/dashboard/UpcomingClassCard.jsx`
- `src/components/dashboard/RecentAnnouncements.jsx`

The dashboard’s component layer is largely presentational and receives or embeds display data rather than querying a data source.

#### Schedule Data and Derived Status

The schedule feature has a local data boundary:
- `src/constants/weeklySchedule.js`
- `src/pages/Dashboard/Schedule.jsx`

Schedule rendering derives user-facing class state and time display through:
- `src/utils/getClassStatus.js`
- `src/utils/formatTime.js`

Thus, the current primary data flow is static schedule data → schedule page/card rendering → derived status/time labels. Replacing `weeklySchedule.js` with API-backed data is the natural integration point, while preserving these derivation utilities as view-model logic.

#### UI System and Styling

Reusable UI primitives form a lightweight design-system boundary:
- `src/components/ui/button.jsx`
- `src/components/ui/navigation-menu.jsx`
- `src/components/ui/sheet.jsx`

Shared layout primitives are in `src/components/ui/Container.jsx` and `src/components/ui/Section.jsx`. Global and app-level styling is handled by:
- `src/index.css`
- `src/App.css`

Utility class composition is centralized in `src/lib/utils.js`, supporting consistent styling behavior across component layers.

Main entry points: [`src/routes/route.jsx`](https://github.com/rafyhossain/classradar/blob/main/src/routes/route.jsx) (Route definitions), [`src/components/ui/button.jsx`](https://github.com/rafyhossain/classradar/blob/main/src/components/ui/button.jsx) (UI primitives), [`src/App.jsx`](https://github.com/rafyhossain/classradar/blob/main/src/App.jsx) (Application shell), [`src/layouts/MainLayout.jsx`](https://github.com/rafyhossain/classradar/blob/main/src/layouts/MainLayout.jsx) (Route family layouts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_vite{{"Vite SPA<br/>runtime<br/>[index.html]"}}
  node_main["React bootstrap<br/>entry<br/>[main.jsx]"]
end

subgraph group_routing["Application Structure"]
  node_app["Application shell<br/>[App.jsx]"]
  node_routes{{"Route definitions<br/>router<br/>[route.jsx]"}}
  node_layouts["Route family layouts<br/>[MainLayout.jsx]"]
  node_navigation["Shared navigation and footer<br/>components<br/>[Navbar.jsx]"]
end

subgraph group_experiences["Route Experiences"]
  node_landing["Landing experience<br/>page<br/>[LandingPage.jsx]"]
  node_hero["Landing sections<br/>[HeroSection.jsx]"]
  node_auth["Login and registration<br/>pages<br/>[Login.jsx]"]
  node_notfound["Not found page<br/>[NotFound.jsx]"]
end

subgraph group_dashboard["Dashboard Feature"]
  node_dashboardhome["Dashboard home<br/>page<br/>[DashboardHome.jsx]"]
  node_dashboardcards["Dashboard cards<br/>components<br/>[SummaryCard.jsx]"]
  node_schedule["Schedule page<br/>[Schedule.jsx]"]
  node_scheduledata[("Weekly schedule<br/>local data<br/>[weeklySchedule.js]")]
  node_scheduleutils["Schedule view-model utilities<br/>[getClassStatus.js]"]
end

subgraph group_ui["UI System"]
  node_primitives["UI primitives<br/>design system<br/>[button.jsx]"]
  node_styles["Global styles<br/>styling<br/>[index.css]"]
  node_classutils["Class composition<br/>[utils.js]"]
end

node_vite -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"uses"| node_routes
node_routes -->|"selects layout"| node_layouts
node_routes -->|"public route"| node_landing
node_routes -->|"auth routes"| node_auth
node_routes -->|"dashboard route"| node_dashboardhome
node_routes -->|"schedule route"| node_schedule
node_routes -->|"unmatched route"| node_notfound
node_layouts -->|"owns chrome"| node_navigation
node_landing -->|"composes"| node_hero
node_dashboardhome -->|"composes"| node_dashboardcards
node_scheduledata -->|"static classes"| node_schedule
node_scheduleutils -->|"status and time labels"| node_schedule
node_primitives -.->|"layout building blocks"| node_layouts
node_primitives -.->|"reusable controls"| node_landing
node_primitives -.->|"reusable controls"| node_auth
node_primitives -.->|"reusable controls"| node_dashboardhome
node_classutils -->|"composes classes"| node_primitives
node_styles -.->|"global presentation"| node_app

click node_vite "https://github.com/rafyhossain/classradar/blob/main/index.html"
click node_main "https://github.com/rafyhossain/classradar/blob/main/src/main.jsx"
click node_app "https://github.com/rafyhossain/classradar/blob/main/src/App.jsx"
click node_routes "https://github.com/rafyhossain/classradar/blob/main/src/routes/route.jsx"
click node_layouts "https://github.com/rafyhossain/classradar/blob/main/src/layouts/MainLayout.jsx"
click node_navigation "https://github.com/rafyhossain/classradar/blob/main/src/components/common/Navbar.jsx"
click node_landing "https://github.com/rafyhossain/classradar/blob/main/src/pages/Landing/LandingPage.jsx"
click node_hero "https://github.com/rafyhossain/classradar/blob/main/src/pages/Landing/sections/HeroSection.jsx"
click node_auth "https://github.com/rafyhossain/classradar/blob/main/src/pages/Auth/Login.jsx"
click node_notfound "https://github.com/rafyhossain/classradar/blob/main/src/pages/NotFound.jsx"
click node_dashboardhome "https://github.com/rafyhossain/classradar/blob/main/src/pages/Dashboard/DashboardHome.jsx"
click node_dashboardcards "https://github.com/rafyhossain/classradar/blob/main/src/components/dashboard/SummaryCard.jsx"
click node_schedule "https://github.com/rafyhossain/classradar/blob/main/src/pages/Dashboard/Schedule.jsx"
click node_scheduledata "https://github.com/rafyhossain/classradar/blob/main/src/constants/weeklySchedule.js"
click node_scheduleutils "https://github.com/rafyhossain/classradar/blob/main/src/utils/getClassStatus.js"
click node_primitives "https://github.com/rafyhossain/classradar/blob/main/src/components/ui/button.jsx"
click node_styles "https://github.com/rafyhossain/classradar/blob/main/src/index.css"
click node_classutils "https://github.com/rafyhossain/classradar/blob/main/src/lib/utils.js"

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_vite,node_main toneBlue
class node_app,node_routes,node_layouts,node_navigation toneAmber
class node_landing,node_hero,node_auth,node_notfound toneMint
class node_dashboardhome,node_dashboardcards,node_schedule,node_scheduledata,node_scheduleutils toneRose
class node_primitives,node_styles,node_classutils toneIndigo
```

## Components

### Runtime

- [Vite SPA](https://github.com/rafyhossain/classradar/blob/main/index.html): runtime · Client-side React development and build runtime. · `index.html`
- [React bootstrap](https://github.com/rafyhossain/classradar/blob/main/src/main.jsx): entry · `src/main.jsx`

### Application Structure

- [Application shell](https://github.com/rafyhossain/classradar/blob/main/src/App.jsx): shell · `src/App.jsx`
- [Route definitions](https://github.com/rafyhossain/classradar/blob/main/src/routes/route.jsx): router · Primary control boundary for public, auth, and dashboard routes. · `src/routes/route.jsx`
- [Route family layouts](https://github.com/rafyhossain/classradar/blob/main/src/layouts/MainLayout.jsx): layout · Public, auth, and dashboard chrome are segmented here. · `src/layouts/MainLayout.jsx`
- [Shared navigation and footer](https://github.com/rafyhossain/classradar/blob/main/src/components/common/Navbar.jsx): components · `src/components/common/Navbar.jsx`

### Route Experiences

- [Landing experience](https://github.com/rafyhossain/classradar/blob/main/src/pages/Landing/LandingPage.jsx): page · Composes public hero and feature sections. · `src/pages/Landing/LandingPage.jsx`
- [Landing sections](https://github.com/rafyhossain/classradar/blob/main/src/pages/Landing/sections/HeroSection.jsx): sections · Hero and features content. · `src/pages/Landing/sections/HeroSection.jsx`
- [Login and registration](https://github.com/rafyhossain/classradar/blob/main/src/pages/Auth/Login.jsx): pages · Presentation-only authentication flows. · `src/pages/Auth/Login.jsx`
- [Not found page](https://github.com/rafyhossain/classradar/blob/main/src/pages/NotFound.jsx): page · `src/pages/NotFound.jsx`

### Dashboard Feature

- [Dashboard home](https://github.com/rafyhossain/classradar/blob/main/src/pages/Dashboard/DashboardHome.jsx): page · Core class summary and activity view. · `src/pages/Dashboard/DashboardHome.jsx`
- [Dashboard cards](https://github.com/rafyhossain/classradar/blob/main/src/components/dashboard/SummaryCard.jsx): components · Summary, upcoming class, announcements, and action UI. · `src/components/dashboard/SummaryCard.jsx`
- [Schedule page](https://github.com/rafyhossain/classradar/blob/main/src/pages/Dashboard/Schedule.jsx): page · Renders local weekly classes with derived display state. · `src/pages/Dashboard/Schedule.jsx`
- [Weekly schedule](https://github.com/rafyhossain/classradar/blob/main/src/constants/weeklySchedule.js): local data · Natural replacement point for future API-backed schedule data. · `src/constants/weeklySchedule.js`
- [Schedule view-model utilities](https://github.com/rafyhossain/classradar/blob/main/src/utils/getClassStatus.js): utilities · Derives class status and formatted time labels. · `src/utils/getClassStatus.js`

### UI System

- [UI primitives](https://github.com/rafyhossain/classradar/blob/main/src/components/ui/button.jsx): design system · Buttons, navigation menus, sheets, containers, and sections. · `src/components/ui/button.jsx`
- [Global styles](https://github.com/rafyhossain/classradar/blob/main/src/index.css): styling · App and global CSS foundation. · `src/index.css`
- [Class composition](https://github.com/rafyhossain/classradar/blob/main/src/lib/utils.js): utility · `src/lib/utils.js`

## Connections

- Vite SPA → React bootstrap: loads
- React bootstrap → Application shell: mounts
- Application shell → Route definitions: uses
- Route definitions → Route family layouts: selects layout
- Route definitions → Landing experience: public route
- Route definitions → Login and registration: auth routes
- Route definitions → Dashboard home: dashboard route
- Route definitions → Schedule page: schedule route
- Route definitions → Not found page: unmatched route
- Route family layouts → Shared navigation and footer: owns chrome
- Landing experience → Landing sections: composes
- Dashboard home → Dashboard cards: composes
- Weekly schedule → Schedule page: static classes
- Schedule view-model utilities → Schedule page: status and time labels
- UI primitives → Route family layouts: layout building blocks
- UI primitives → Landing experience: reusable controls
- UI primitives → Login and registration: reusable controls
- UI primitives → Dashboard home: reusable controls
- Class composition → UI primitives: composes classes
- Global styles → Application shell: global presentation