# sumitsonawane2711/react-production-setup architecture

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

- Interactive diagram: https://gitdiagram.com/sumitsonawane2711/react-production-setup
- Repository: https://github.com/sumitsonawane2711/react-production-setup

## Overview

#### Purpose and Runtime

This is a Vite-built React + TypeScript frontend starter structured for production concerns: authentication, protected dashboard access, shared API/state infrastructure, localization, validation, unit tests, and CI. The browser application starts at `src/main.tsx`, renders the root application in `src/App.tsx`, and uses `src/router.tsx` for route composition. Vite serves/builds the SPA via `index.html` and `vite.config.ts`.

#### Application Routing and Layout Boundaries

`src/router.tsx` is the navigation boundary between public auth pages and authenticated application content. Auth views are hosted under `src/shared/layouts/AuthLayout.tsx`; dashboard content is hosted under `src/shared/layouts/DashboardLayout.tsx`. `src/shared/components/ProtectedRoutes.tsx` gates protected routes based on authentication state, redirecting unauthenticated users before dashboard rendering. The current authenticated landing content is `src/shared/components/DashboardHome.tsx`.

#### Authentication Feature

Authentication is a self-contained feature under `src/features/auth`. User flows enter through `src/features/auth/pages/LoginPage.tsx` and `src/features/auth/pages/SignupPage.tsx`, which compose `src/features/auth/components/LoginForm.tsx` and `src/features/auth/components/SignupForm.tsx`. Input contracts and client-side validation are separated into `src/features/auth/interfaces/loginInterface.ts`, `src/features/auth/interfaces/signupInterface.ts`, `src/features/auth/schemas/LoginSchema.ts`, and `src/features/auth/schemas/SignupSchema.ts`.

#### Auth State and Session Control

Auth state is centralized in `src/features/auth/stores/authSlice.ts`, exposed to UI consumers through `src/features/auth/hooks/useAuthStore.ts`. Login, signup, and logout are service boundaries in `src/features/auth/services/loginService.ts`, `src/features/auth/services/signupService.ts`, and `src/features/auth/services/logoutService.ts`; these isolate remote/session operations from pages and form components. `src/features/auth/components/LogoutButton.tsx` initiates session termination from authenticated UI.

#### API and Environment Boundary

HTTP communication is centralized rather than performed directly by feature components. `src/shared/libs/Axios.ts` and `src/shared/libs/apiClient.ts` provide the API-client layer intended for common request behavior such as base URL, headers, and error handling. Environment values are read through `src/shared/configs/env.ts`, with `.env.example` documenting expected deployment inputs. This creates a boundary between Vite build-time configuration and feature services.

#### Shared Application Shell and State

Cross-feature application state is represented by `src/shared/stores/appStore.ts` and accessed through `src/shared/hooks/useAppStore.ts`, with its state contract in `src/shared/interfaces/appInterface.ts`. Shared visual shell elements reside in `src/shared/components/Navbar.tsx`, while common error text is centralized in `src/shared/constants/errorMessages.ts`. Feature-specific state remains under `src/features/auth`, avoiding coupling authentication storage to general app state.

#### Assets, Localization, and Delivery Controls

Static UI resources are organized under `src/shared/assets`, and locale dictionaries currently support English and Hindi through `src/shared/locales/english.json` and `src/shared/locales/hindi.json`. The repository uses Node/npm for dependency execution, Vite for bundling, and Vitest/Testing Library for unit coverage. Delivery controls include GitHub Actions at `.github/workflows/ci.yaml`, Husky hooks under `.husky`, and lint/format/commit conventions configured at the repository root. The README also identifies optional Sentry React/Vite integration as the intended error-monitoring service, though no Sentry source paths are present.

Main entry points: [`src/App.tsx`](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/App.tsx) (Root app), [`src/features/auth/services/loginService.ts`](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/services/loginService.ts) (Session services), [`src/router.tsx`](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/router.tsx) (Route composition), [`src/shared/layouts/DashboardLayout.tsx`](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/layouts/DashboardLayout.tsx) (Dashboard layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser Runtime"]
  node_vite{{"Vite build<br/>build tool<br/>[vite.config.ts]"}}
  node_entry["Application entry<br/>React entry<br/>[main.tsx]"]
  node_app["Root app<br/>React root<br/>[App.tsx]"]
end

subgraph group_routing["Routing &amp; Shell"]
  node_router["Route composition<br/>router<br/>[router.tsx]"]
  node_auth_layout["Auth layout<br/>public layout<br/>[AuthLayout.tsx]"]
  node_dashboard_layout["Dashboard layout<br/>authenticated layout"]
  node_protected_routes["Protected routes<br/>route guard"]
  node_dashboard_home["Dashboard home<br/>authenticated page<br/>[DashboardHome.tsx]"]
end

subgraph group_auth["Authentication Feature"]
  node_auth_pages["Login &amp; signup pages<br/>auth pages<br/>[LoginPage.tsx]"]
  node_auth_forms["Login &amp; signup forms<br/>auth UI<br/>[LoginForm.tsx]"]
  node_auth_contracts["Auth contracts &amp; schemas<br/>validation contracts<br/>[loginInterface.ts]"]
  node_auth_services["Session services<br/>auth services<br/>[loginService.ts]"]
  node_auth_store[("Auth state<br/>feature state<br/>[authSlice.ts]")]
  node_logout["Logout button<br/>auth UI<br/>[LogoutButton.tsx]"]
end

subgraph group_shared["Shared Infrastructure"]
  node_api_client["API client layer<br/>HTTP client<br/>[apiClient.ts]"]
  node_environment["Environment config<br/>runtime config<br/>[env.ts]"]
  node_app_state[("Shared app state<br/>application state<br/>[appStore.ts]")]
  node_locales["English &amp; Hindi locales<br/>locale dictionaries<br/>[english.json]"]
end

subgraph group_delivery["Delivery Controls"]
  node_ci["CI workflow<br/>GitHub Actions<br/>[ci.yaml]"]
end

node_vite -->|"loads"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"mounts"| node_router
node_router -->|"public routes"| node_auth_layout
node_router -->|"protected routes"| node_protected_routes
node_protected_routes -->|"permits authenticated users"| node_dashboard_layout
node_dashboard_layout -->|"hosts"| node_dashboard_home
node_protected_routes -->|"checks session"| node_auth_store
node_auth_layout -->|"hosts"| node_auth_pages
node_auth_pages -->|"composes"| node_auth_forms
node_auth_forms -->|"validates with"| node_auth_contracts
node_auth_forms -->|"submits to"| node_auth_services
node_auth_services -->|"updates session"| node_auth_store
node_auth_services -->|"uses"| node_api_client
node_api_client -->|"reads settings"| node_environment
node_dashboard_layout -->|"includes"| node_logout
node_logout -->|"terminates session"| node_auth_services
node_app -.->|"uses"| node_app_state
node_app -.->|"loads"| node_locales

click node_vite "https://github.com/sumitsonawane2711/react-production-setup/blob/main/vite.config.ts"
click node_entry "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/main.tsx"
click node_app "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/App.tsx"
click node_router "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/router.tsx"
click node_auth_layout "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/layouts/AuthLayout.tsx"
click node_dashboard_layout "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/layouts/DashboardLayout.tsx"
click node_protected_routes "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/components/ProtectedRoutes.tsx"
click node_dashboard_home "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/components/DashboardHome.tsx"
click node_auth_pages "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/pages/LoginPage.tsx"
click node_auth_forms "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/components/LoginForm.tsx"
click node_auth_contracts "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/interfaces/loginInterface.ts"
click node_auth_services "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/services/loginService.ts"
click node_auth_store "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/stores/authSlice.ts"
click node_logout "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/components/LogoutButton.tsx"
click node_api_client "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/libs/apiClient.ts"
click node_environment "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/configs/env.ts"
click node_app_state "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/stores/appStore.ts"
click node_locales "https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/locales/english.json"
click node_ci "https://github.com/sumitsonawane2711/react-production-setup/blob/main/.github/workflows/ci.yaml"

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_entry,node_app toneBlue
class node_router,node_auth_layout,node_dashboard_layout,node_protected_routes,node_dashboard_home toneAmber
class node_auth_pages,node_auth_forms,node_auth_contracts,node_auth_services,node_auth_store,node_logout toneMint
class node_api_client,node_environment,node_app_state,node_locales toneRose
class node_ci toneIndigo
```

## Components

### Browser Runtime

- [Vite build](https://github.com/sumitsonawane2711/react-production-setup/blob/main/vite.config.ts): build tool · Serves and bundles the SPA. · `vite.config.ts`
- [Application entry](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/main.tsx): React entry · `src/main.tsx`
- [Root app](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/App.tsx): React root · `src/App.tsx`

### Routing & Shell

- [Route composition](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/router.tsx): router · Separates public auth and protected application routes. · `src/router.tsx`
- [Auth layout](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/layouts/AuthLayout.tsx): public layout · `src/shared/layouts/AuthLayout.tsx`
- [Dashboard layout](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/layouts/DashboardLayout.tsx): authenticated layout · `src/shared/layouts/DashboardLayout.tsx`
- [Protected routes](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/components/ProtectedRoutes.tsx): route guard · Redirects unauthenticated users before dashboard rendering. · `src/shared/components/ProtectedRoutes.tsx`
- [Dashboard home](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/components/DashboardHome.tsx): authenticated page · `src/shared/components/DashboardHome.tsx`

### Authentication Feature

- [Login & signup pages](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/pages/LoginPage.tsx): auth pages · `src/features/auth/pages/LoginPage.tsx`
- [Login & signup forms](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/components/LoginForm.tsx): auth UI · `src/features/auth/components/LoginForm.tsx`
- [Auth contracts & schemas](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/interfaces/loginInterface.ts): validation contracts · `src/features/auth/interfaces/loginInterface.ts`
- [Session services](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/services/loginService.ts): auth services · Login, signup, and logout isolate remote session operations. · `src/features/auth/services/loginService.ts`
- [Auth state](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/stores/authSlice.ts): feature state · Exposed to UI through the auth store hook. · `src/features/auth/stores/authSlice.ts`
- [Logout button](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/features/auth/components/LogoutButton.tsx): auth UI · `src/features/auth/components/LogoutButton.tsx`

### Shared Infrastructure

- [API client layer](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/libs/apiClient.ts): HTTP client · Centralizes common request behavior. · `src/shared/libs/apiClient.ts`
- [Environment config](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/configs/env.ts): runtime config · `src/shared/configs/env.ts`
- [Shared app state](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/stores/appStore.ts): application state · General cross-feature state exposed through an app-store hook. · `src/shared/stores/appStore.ts`
- [English & Hindi locales](https://github.com/sumitsonawane2711/react-production-setup/blob/main/src/shared/locales/english.json): locale dictionaries · `src/shared/locales/english.json`

### Delivery Controls

- [CI workflow](https://github.com/sumitsonawane2711/react-production-setup/blob/main/.github/workflows/ci.yaml): GitHub Actions · Runs delivery checks alongside repository hooks and conventions. · `.github/workflows/ci.yaml`

## Connections

- Vite build → Application entry: loads
- Application entry → Root app: renders
- Root app → Route composition: mounts
- Route composition → Auth layout: public routes
- Route composition → Protected routes: protected routes
- Protected routes → Dashboard layout: permits authenticated users
- Dashboard layout → Dashboard home: hosts
- Protected routes → Auth state: checks session
- Auth layout → Login & signup pages: hosts
- Login & signup pages → Login & signup forms: composes
- Login & signup forms → Auth contracts & schemas: validates with
- Login & signup forms → Session services: submits to
- Session services → Auth state: updates session
- Session services → API client layer: uses
- API client layer → Environment config: reads settings
- Dashboard layout → Logout button: includes
- Logout button → Session services: terminates session
- Root app → Shared app state: uses
- Root app → English & Hindi locales: loads