How smit-lad-coder/hrms-by-smit-lad works
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: App.tsx App shell · DataContext.tsx Data state · routes.ts API routes · index.ts Server entry
Components 20
Client
React/Vite frontend and UI composition
- App entry · Bootstraps the SPA from HTML into React.
client/index.html - Main · Wires the app root, providers, and routing.
client/src/main.tsx - App shell · Top-level application composition and route switching.
client/src/App.tsx - Dashboard shell · Authenticated shell with persistent navigation and content area.
client/src/components/layout/DashboardLayout.tsx - Sidebar · Primary dashboard navigation for logged-in users.
client/src/components/layout/Sidebar.tsx - UI kit · Reusable presentation primitives such as buttons, dialogs, tables, forms, and overlays.
client/src/components/ui - Auth state · Manages login/session state and access control.
client/src/context/AuthContext.tsx - Data state · Centralized domain data access for employees, attendance, payroll, and leaves.
client/src/context/DataContext.tsx - Query client · Client-side query and caching layer for server data.
client/src/lib/queryClient.ts - Login · Authentication entry screen.
client/src/pages/auth/Login.tsx - Dashboards · Role-based dashboard views for admins and employees.
client/src/pages/dashboard/AdminDashboard.tsx - Employees · Employee list management and admin actions.
client/src/pages/admin/EmployeeList.tsx - HR pages · Operational screens for attendance, leaves, payroll, and profile.
client/src/pages/attendance/Attendance.tsx - Not found · Route fallback for unknown paths.
client/src/pages/not-found.tsx
Server
Node/Express runtime and persistence boundary
- Server entry · Starts the Express process and bootstraps the backend.
server/index.ts - API routes · Defines the HTTP surface consumed by the frontend.
server/routes.ts - Storage · Abstracts reads and writes for application data.
server/storage.ts - Vite bridge · Connects the server to Vite during development and asset serving.
server/vite.ts - Static serve · Serves the built frontend in production.
server/static.ts
Shared
Contracts and models used by both sides
- Schema · Shared types and schema definitions between client and server.
shared/schema.ts
Connections 24
- 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.