sumitsonawane2711/react-production-setup

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.