# smit-lad-coder/hrms-by-smit-lad architecture

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

- Interactive diagram: https://gitdiagram.com/smit-lad-coder/hrms-by-smit-lad
- Repository: https://github.com/smit-lad-coder/hrms-by-smit-lad

## Overview

1. **Top-level shape**
   - This repository is a single-codebase full-stack app split into three clear boundaries: `client/` for the UI, `server/` for the API/runtime, and `shared/` for types/schema used by both sides.

2. **Frontend runtime**
   - The frontend is a **React + TypeScript + Vite** single-page application.
   - Entry points are `client/index.html`, `client/src/main.tsx`, and `client/src/App.tsx`.
   - Global styling lives in `client/src/index.css`, which likely also carries the design system and Tailwind-style base utilities.

3. **Page-level feature areas**
   - Business functionality is organized by route/page folders under `client/src/pages/`.
   - The main app areas are: `auth` (login), `dashboard` (admin and employee dashboards), `admin` (employee list management), `attendance`, `leaves`, `payroll`, `profile`, and `not-found`.
   - This makes the app’s screen map easy to diagram as feature modules rather than a generic component tree.

4. **Layout and navigation shell**
   - `client/src/components/layout/DashboardLayout.tsx` and `Sidebar.tsx` define the main authenticated shell.
   - The UI is centered around a dashboard navigation pattern: a persistent sidebar plus content area for feature pages.
   - This is the main visual boundary between authentication screens and the logged-in application.

5. **Reusable UI system**
   - `client/src/components/ui/` contains a large set of reusable primitives: buttons, dialogs, tables, forms, tabs, calendars, menus, toasts, etc.
   - The structure strongly suggests a **shadcn/ui + Radix-style component library** layered on top of utility CSS.
   - These are not business features; they are the presentation foundation consumed by all pages and layouts.

6. **Application state and cross-cutting concerns**
   - `client/src/context/AuthContext.tsx` manages login/session state and access control.
   - `client/src/context/DataContext.tsx` centralizes domain data for the app, likely exposing employees, attendance, payroll, and leave records to pages.
   - `client/src/hooks/use-toast.ts` and `use-mobile.tsx` provide shared UI behavior, while `lib/queryClient.ts` indicates a query/caching layer for data access.

7. **Domain model sharing**
   - `shared/schema.ts` is the key contract boundary between client and server.
   - `client/src/lib/types.ts` and `server/storage.ts` suggest the app relies on shared TypeScript models rather than duplicating shapes across layers.
   - `drizzle.config.ts` implies a **Drizzle ORM**-based persistence model; that is more consistent with the code tree than the README’s MongoDB badge.

8. **Backend structure**
   - The server is a Node.js/Express app under `server/`.
   - `server/index.ts` is the process entry point, `server/routes.ts` defines the API surface, and `server/storage.ts` abstracts persistence operations.
   - `server/static.ts` and `server/vite.ts` indicate the backend also handles serving the built frontend and integrating Vite during development.

9. **Data flow**
   - Typical flow is: UI page → context/query layer → server route → storage layer → shared schema/types → response back to the UI.
   - The presence of `mockData.ts` suggests the frontend can also operate with seeded or placeholder datasets, which is useful for development/demo mode.
   - This architecture keeps page components mostly presentation-focused while domain data lives behind context and storage boundaries.

10. **Build and tooling**
   - `vite.config.ts`, `postcss.config.js`, `components.json`, and `tsconfig.json` show a modern TypeScript build chain with component generation/configuration support.
   - `script/build.ts` likely orchestrates the production build across client and server.
   - `vite-plugin-meta-images.ts` indicates additional asset processing for generated metadata or image handling.

11. **Repo-level discrepancy to note in the diagram**
   - The README describes a generic HTML/CSS/JS + Node/Express + MongoDB setup, but the actual file tree shows a more specific **React/Vite/TypeScript monorepo with shared schema and an explicit server/client split**.
   - For an accurate architecture diagram, trust the code layout over the README badges.

12. **What is not visible**
   - No external SaaS integrations are evident from the tree.
   - Authentication appears to be internal to the app, but whether it is session-based, token-based, or mocked is not clear from the file list alone.
   - Similarly, the exact database engine is not exposed here; only the persistence abstraction and Drizzle configuration are visible.

Main entry points: [`client/src/App.tsx`](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/App.tsx) (App shell), [`client/src/context/DataContext.tsx`](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/context/DataContext.tsx) (Data state), [`server/routes.ts`](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/routes.ts) (API routes), [`server/index.ts`](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/index.ts) (Server entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client"]
  node_client_entry["App entry<br/>React/Vite entry<br/>[index.html]"]
  node_client_main["Main<br/>React bootstrap<br/>[main.tsx]"]
  node_client_app["App shell<br/>Route host<br/>[App.tsx]"]
  node_client_layout["Dashboard shell<br/>Layout"]
  node_client_sidebar["Sidebar<br/>Nav component<br/>[Sidebar.tsx]"]
  node_client_ui["UI kit<br/>Component library"]
  node_client_auth_ctx["Auth state<br/>React context<br/>[AuthContext.tsx]"]
  node_client_data_ctx["Data state<br/>React context<br/>[DataContext.tsx]"]
  node_client_query["Query client<br/>Data cache<br/>[queryClient.ts]"]
  node_client_pages_auth["Login<br/>Auth page<br/>[Login.tsx]"]
  node_client_pages_dash["Dashboards<br/>Feature pages<br/>[AdminDashboard.tsx]"]
  node_client_pages_admin["Employees<br/>Admin page<br/>[EmployeeList.tsx]"]
  node_client_pages_ops["HR pages<br/>Feature pages<br/>[Attendance.tsx]"]
  node_client_not_found["Not found<br/>Fallback page<br/>[not-found.tsx]"]
end

subgraph group_server["Server"]
  node_server_entry["Server entry<br/>Node runtime<br/>[index.ts]"]
  node_server_routes["API routes<br/>Express routes<br/>[routes.ts]"]
  node_server_storage["Storage<br/>Persistence layer<br/>[storage.ts]"]
  node_server_vite["Vite bridge<br/>Dev integration<br/>[vite.ts]"]
  node_server_static["Static serve<br/>Asset serving<br/>[static.ts]"]
end

subgraph group_shared["Shared"]
  node_shared_schema["Schema<br/>Shared contract<br/>[schema.ts]"]
end

node_client_entry -->|"loads"| node_client_main
node_client_main -->|"renders"| node_client_app
node_client_app -->|"uses"| node_client_layout
node_client_layout -->|"includes"| node_client_sidebar
node_client_app -->|"routes to"| node_client_pages_auth
node_client_app -->|"routes to"| node_client_pages_dash
node_client_app -->|"routes to"| node_client_pages_admin
node_client_app -->|"routes to"| node_client_pages_ops
node_client_app -->|"fallback"| node_client_not_found
node_client_pages_auth -->|"auth state"| node_client_auth_ctx
node_client_pages_dash -->|"reads data"| node_client_data_ctx
node_client_pages_admin -->|"reads data"| node_client_data_ctx
node_client_pages_ops -->|"reads data"| node_client_data_ctx
node_client_data_ctx -->|"fetches via"| node_client_query
node_client_query -->|"API calls"| node_server_routes
node_server_entry -->|"mounts"| node_server_routes
node_server_routes -->|"persists via"| node_server_storage
node_server_routes -->|"validates against"| node_shared_schema
node_client_data_ctx -->|"shares models"| node_shared_schema
node_server_storage -->|"shares models"| node_shared_schema
node_server_entry -->|"dev mode"| node_server_vite
node_server_entry -->|"prod mode"| node_server_static
node_client_app -->|"composes"| node_client_ui
node_client_layout -->|"composes"| node_client_ui

click node_client_entry "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/index.html"
click node_client_main "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/main.tsx"
click node_client_app "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/App.tsx"
click node_client_layout "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/components/layout/DashboardLayout.tsx"
click node_client_sidebar "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/components/layout/Sidebar.tsx"
click node_client_ui "https://github.com/smit-lad-coder/hrms-by-smit-lad/tree/main/client/src/components/ui"
click node_client_auth_ctx "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/context/AuthContext.tsx"
click node_client_data_ctx "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/context/DataContext.tsx"
click node_client_query "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/lib/queryClient.ts"
click node_client_pages_auth "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/auth/Login.tsx"
click node_client_pages_dash "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/dashboard/AdminDashboard.tsx"
click node_client_pages_admin "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/admin/EmployeeList.tsx"
click node_client_pages_ops "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/attendance/Attendance.tsx"
click node_client_not_found "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/not-found.tsx"
click node_server_entry "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/index.ts"
click node_server_routes "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/routes.ts"
click node_server_storage "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/storage.ts"
click node_server_vite "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/vite.ts"
click node_server_static "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/static.ts"
click node_shared_schema "https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/shared/schema.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_client_entry,node_client_main,node_client_app,node_client_layout,node_client_sidebar,node_client_ui,node_client_auth_ctx,node_client_data_ctx,node_client_query,node_client_pages_auth,node_client_pages_dash,node_client_pages_admin,node_client_pages_ops,node_client_not_found toneBlue
class node_server_entry,node_server_routes,node_server_storage,node_server_vite,node_server_static toneAmber
class node_shared_schema toneMint
```

## Components

### Client

React/Vite frontend and UI composition

- [App entry](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/index.html): React/Vite entry · Bootstraps the SPA from HTML into React. · `client/index.html`
- [Main](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/main.tsx): React bootstrap · Wires the app root, providers, and routing. · `client/src/main.tsx`
- [App shell](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/App.tsx): Route host · Top-level application composition and route switching. · `client/src/App.tsx`
- [Dashboard shell](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/components/layout/DashboardLayout.tsx): Layout · Authenticated shell with persistent navigation and content area. · `client/src/components/layout/DashboardLayout.tsx`
- [Sidebar](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/components/layout/Sidebar.tsx): Nav component · Primary dashboard navigation for logged-in users. · `client/src/components/layout/Sidebar.tsx`
- [UI kit](https://github.com/smit-lad-coder/hrms-by-smit-lad/tree/main/client/src/components/ui): Component library · Reusable presentation primitives such as buttons, dialogs, tables, forms, and overlays. · `client/src/components/ui`
- [Auth state](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/context/AuthContext.tsx): React context · Manages login/session state and access control. · `client/src/context/AuthContext.tsx`
- [Data state](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/context/DataContext.tsx): React context · Centralized domain data access for employees, attendance, payroll, and leaves. · `client/src/context/DataContext.tsx`
- [Query client](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/lib/queryClient.ts): Data cache · Client-side query and caching layer for server data. · `client/src/lib/queryClient.ts`
- [Login](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/auth/Login.tsx): Auth page · Authentication entry screen. · `client/src/pages/auth/Login.tsx`
- [Dashboards](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/dashboard/AdminDashboard.tsx): Feature pages · Role-based dashboard views for admins and employees. · `client/src/pages/dashboard/AdminDashboard.tsx`
- [Employees](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/admin/EmployeeList.tsx): Admin page · Employee list management and admin actions. · `client/src/pages/admin/EmployeeList.tsx`
- [HR pages](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/attendance/Attendance.tsx): Feature pages · Operational screens for attendance, leaves, payroll, and profile. · `client/src/pages/attendance/Attendance.tsx`
- [Not found](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/client/src/pages/not-found.tsx): Fallback page · Route fallback for unknown paths. · `client/src/pages/not-found.tsx`

### Server

Node/Express runtime and persistence boundary

- [Server entry](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/index.ts): Node runtime · Starts the Express process and bootstraps the backend. · `server/index.ts`
- [API routes](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/routes.ts): Express routes · Defines the HTTP surface consumed by the frontend. · `server/routes.ts`
- [Storage](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/storage.ts): Persistence layer · Abstracts reads and writes for application data. · `server/storage.ts`
- [Vite bridge](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/vite.ts): Dev integration · Connects the server to Vite during development and asset serving. · `server/vite.ts`
- [Static serve](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/server/static.ts): Asset serving · Serves the built frontend in production. · `server/static.ts`

### Shared

Contracts and models used by both sides

- [Schema](https://github.com/smit-lad-coder/hrms-by-smit-lad/blob/main/shared/schema.ts): Shared contract · Shared types and schema definitions between client and server. · `shared/schema.ts`

## Connections

- App entry → Main: loads · HTML mounts the React application.
- Main → App shell: renders · Bootstraps the top-level app composition.
- App shell → Dashboard shell: uses · Authenticated routes render inside the dashboard shell.
- Dashboard shell → Sidebar: includes · Layout contains persistent sidebar navigation.
- App shell → Login: routes to · Login screen for unauthenticated users.
- App shell → Dashboards: routes to · Role-based dashboard entry points.
- App shell → Employees: routes to · Admin employee management screen.
- App shell → HR pages: routes to · Operational HR screens such as attendance, leaves, payroll, and profile.
- App shell → Not found: fallback · Unknown routes resolve here.
- Login → Auth state: auth state · Login flow updates session and access state.
- Dashboards → Data state: reads data · Dashboards consume aggregated domain state.
- Employees → Data state: reads data · Admin views use shared employee data.
- HR pages → Data state: reads data · Operational pages depend on centralized domain data.
- Data state → Query client: fetches via · Context relies on query/caching for backend access.
- Query client → API routes: API calls · Client data layer talks to backend endpoints.
- Server entry → API routes: mounts · Server initializes the route table.
- API routes → Storage: persists via · Routes delegate data operations to storage.
- API routes → Schema: validates against · API contracts are defined in the shared schema.
- Data state → Schema: shares models · Frontend domain state aligns with backend contracts.
- Storage → Schema: shares models · Persistence layer uses the same domain shapes.
- Server entry → Vite bridge: dev mode · Development runtime integrates with Vite.
- Server entry → Static serve: prod mode · Production runtime serves built assets.
- App shell → UI kit: composes · Pages and layouts are built from reusable UI primitives.
- Dashboard shell → UI kit: composes · Shell uses shared UI primitives for navigation and structure.