How dipakgohilsimform/react-workflow works
This is a React workflow-app client with public login and a protected dashboard shell. The main user path is login, server-side session validation, then access to the dashboard; the client also provides theme, navigation, reusable UI, and session-timeout capabilities. The graph follows the visible router, provider, layout, and authentication-service relationships. Several feature implementations, including the login form and timeout integration, were not excerpted, so their internal behavior and connections are left unasserted.
Main entry points: App.tsx React app · privateLayout.tsx Protected layout · index.tsx Route configuration · auth-provider.tsx Auth provider
Components 24
Application shell
- React app
src/App.tsx - Route configuration
src/routes/index.tsx - Public auth layout
src/pages/public/authLayout.tsx - Protected layout
src/pages/private/privateLayout.tsx
Authentication
- Login page
src/pages/public/login/index.tsx - Login form
src/features/auth/LoginForm.tsx - Auth context
src/hooks/useAuth.ts - Auth provider
src/lib/auth-provider.tsx - Session validation
src/hooks/useSession.ts - Auth API service
src/services/auth.service.ts - Auth data types
src/types/auth.type.ts - Session timeout
src/hooks/useSessionTimeout.ts
Dashboard
- Dashboard page
src/pages/private/dashboard/index.tsx - Dashboard navigation
src/features/dashboard/AppSidebar.tsx - Dashboard header
src/features/dashboard/SiteHeader.tsx
Shared client infrastructure
- HTTP client
src/lib/axios.ts - UI primitives
src/components/ui - Data table
src/components/shared/DataTable.tsx - Error boundary
src/components/shared/ErrorBoundary.tsx - Query client
src/lib/query-client.ts - Theme provider
src/lib/theme-provider.tsx - Theme hook
src/hooks/useTheme.ts
Other components
- User
- Auth backend
Connections 25
- User → React app: uses
- React app → Error boundary: wraps
src/App.tsx - React app → Query client: provides
src/App.tsx - React app → Auth provider: provides
src/App.tsx - React app → Theme provider: provides
src/App.tsx - React app → Route configuration: renders routes
src/App.tsx - Route configuration → Public auth layout: routes to
src/routes/index.tsx - Route configuration → Protected layout: routes to
src/routes/index.tsx - Route configuration → Login page: routes to
src/routes/index.tsx - Route configuration → Dashboard page: routes to
src/routes/index.tsx - Login page → Login form: renders
src/pages/public/login/index.tsx - Protected layout → Auth context: reads auth state
src/pages/private/privateLayout.tsx - Protected layout → Session validation: validates session
src/pages/private/privateLayout.tsx - Protected layout → Dashboard navigation: renders
src/pages/private/privateLayout.tsx - Protected layout → Dashboard header: renders
src/pages/private/privateLayout.tsx - Protected layout → Dashboard page: outlet renders
src/routes/index.tsx - Session validation → Auth API service: queries
src/hooks/useSession.ts - Auth API service → HTTP client: sends requests
src/services/auth.service.ts - HTTP client → Auth backend: sends HTTP
- Auth provider → Auth context: provides state
src/lib/auth-provider.tsx - Auth provider → HTTP client: configures
src/lib/auth-provider.tsx - Auth provider → Query client: uses
src/lib/auth-provider.tsx - Dashboard navigation → UI primitives: uses sidebar
src/features/dashboard/AppSidebar.tsx - Data table → UI primitives: uses controls
src/components/shared/DataTable.tsx - Theme provider → Theme hook: uses
src/lib/theme-provider.tsx