# RE Workflow Management System - Frontend Setup Guide **Version:** 1.0 **Date:** October 16, 2025 **Technology Stack:** React 19 + TypeScript 5.7 + Vite 6.0 + Redux Toolkit 2.5 + Material-UI 6.3 --- ## Table of Contents 1. [Frontend Architecture Overview](#frontend-architecture-overview) 2. [Technology Stack](#technology-stack) 3. [Project Folder Structure](#project-folder-structure) 4. [TypeScript Configuration](#typescript-configuration) 5. [State Management (Redux Toolkit)](#state-management-redux-toolkit) 6. [Component Structure](#component-structure) 7. [Configuration Management](#configuration-management) 8. [Deployment Architecture](#deployment-architecture) 9. [Development Setup Instructions](#development-setup-instructions) --- ## 1. Frontend Architecture Overview ### High-Level Architecture ``` ┌─────────────────────────────────────────────────────────────┐ │ CLIENT LAYER │ │ React.js SPA (Single Page Application) │ │ - Material-UI / Ant Design Components │ │ - Redux Toolkit for State Management │ │ - React Router for Navigation │ │ - Axios for API Communication │ │ - Vite for Build & Development │ └─────────────────────────────────────────────────────────────┘ ↕ HTTPS/REST API ┌─────────────────────────────────────────────────────────────┐ │ BACKEND API LAYER │ │ Express.js REST API Server │ │ - Node.js + TypeScript │ │ - PostgreSQL Database │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 2. Technology Stack | Component | Technology | Version | Purpose | |-----------|-----------|---------|---------| | **Frontend Library** | React.js | 19.0.x | UI component library | | **Frontend Language** | TypeScript (TSX) | 5.7.x | Type-safe frontend development | | **UI Framework** | Material-UI (MUI) | 6.3.x | Component design system | | **Build Tool** | Vite | 6.0.x | Ultra-fast build & dev server | | **State Management** | Redux Toolkit | 2.5.x | Application state management | | **Routing** | React Router DOM | 7.1.x | Client-side routing | | **HTTP Client** | Axios | 1.7.x | API communication | | **Form Management** | Formik | 2.4.x | Form state management | | **Form Validation** | Yup | 1.6.x | Schema validation | | **Date Utilities** | date-fns | 4.1.x | Date manipulation | | **Charts** | Recharts | 2.15.x | Data visualization | | **Notifications** | React Toastify | 11.0.x | Toast notifications | | **File Upload** | React Dropzone | 14.3.x | File upload UI | | **Testing** | Vitest + React Testing Library | 2.1.x/16.1.x | Component testing | | **Code Quality** | ESLint + Prettier | 9.x/3.x | Code linting & formatting | --- ## 3. Project Folder Structure ### Frontend Repository (`re-workflow-frontend`) ``` re-workflow-frontend/ │ ├── public/ # Static assets │ ├── index.html │ ├── favicon.ico │ ├── robots.txt │ └── manifest.json │ ├── src/ # Source code │ ├── index.tsx # Application entry point │ ├── App.tsx # Root component │ ├── App.css │ ├── react-app-env.d.ts # React TypeScript declarations │ │ │ ├── types/ # TypeScript type definitions │ │ ├── index.ts # Main types export │ │ ├── user.types.ts # User types │ │ ├── workflow.types.ts # Workflow types │ │ ├── approval.types.ts # Approval types │ │ ├── document.types.ts # Document types │ │ ├── notification.types.ts # Notification types │ │ ├── common.types.ts # Common types │ │ └── api.types.ts # API response types │ │ │ ├── assets/ # Static assets │ │ ├── images/ │ │ ├── icons/ │ │ ├── fonts/ │ │ └── styles/ │ │ ├── global.css │ │ ├── variables.css │ │ └── theme.ts │ │ │ ├── components/ # Reusable components │ │ ├── common/ # Generic components │ │ │ ├── Button/ │ │ │ │ ├── Button.tsx │ │ │ │ ├── Button.module.css │ │ │ │ ├── Button.types.ts │ │ │ │ └── Button.test.tsx │ │ │ ├── Input/ │ │ │ ├── Dropdown/ │ │ │ ├── Modal/ │ │ │ ├── Card/ │ │ │ ├── Table/ │ │ │ ├── Tabs/ │ │ │ ├── Pagination/ │ │ │ ├── Loader/ │ │ │ ├── Notification/ │ │ │ └── ErrorBoundary/ │ │ │ │ │ ├── layout/ # Layout components │ │ │ ├── Header/ │ │ │ │ ├── Header.tsx │ │ │ │ ├── Header.module.css │ │ │ │ └── Header.types.ts │ │ │ ├── Sidebar/ │ │ │ ├── Footer/ │ │ │ ├── Navigation/ │ │ │ └── PageLayout/ │ │ │ │ │ ├── workflow/ # Workflow-specific components │ │ │ ├── TemplateSelector/ │ │ │ ├── BasicInformation/ │ │ │ ├── ApprovalWorkflow/ │ │ │ │ ├── ApprovalWorkflow.tsx │ │ │ │ ├── ApproverLevel.tsx │ │ │ │ ├── TATCalculator.tsx │ │ │ │ ├── ApprovalSummary.tsx │ │ │ │ └── types.ts │ │ │ ├── ParticipantAccess/ │ │ │ │ ├── ParticipantAccess.tsx │ │ │ │ ├── SpectatorList.tsx │ │ │ │ ├── UserTagging.tsx │ │ │ │ └── types.ts │ │ │ ├── DocumentUpload/ │ │ │ │ ├── DocumentUpload.tsx │ │ │ │ ├── FilePreview.tsx │ │ │ │ ├── GoogleDocsLink.tsx │ │ │ │ └── types.ts │ │ │ ├── ReviewSubmit/ │ │ │ └── WizardStepper/ │ │ │ │ │ ├── request/ # Request management components │ │ │ ├── RequestCard/ │ │ │ ├── RequestList/ │ │ │ ├── RequestDetail/ │ │ │ │ ├── RequestOverview.tsx │ │ │ │ ├── WorkflowTab.tsx │ │ │ │ ├── DocumentTab.tsx │ │ │ │ ├── ActivityTab.tsx │ │ │ │ ├── TATProgressBar.tsx │ │ │ │ └── types.ts │ │ │ ├── StatusBadge/ │ │ │ └── PriorityIndicator/ │ │ │ │ │ ├── approval/ # Approval action components │ │ │ ├── ApprovalModal/ │ │ │ ├── RejectionModal/ │ │ │ ├── ApprovalHistory/ │ │ │ └── ConclusionRemark/ │ │ │ │ │ ├── workNote/ # Work notes / chat components │ │ │ ├── WorkNoteChat/ │ │ │ ├── MessageItem/ │ │ │ ├── MessageComposer/ │ │ │ ├── FileAttachment/ │ │ │ └── UserMention/ │ │ │ │ │ ├── notification/ # Notification components │ │ │ ├── NotificationBell/ │ │ │ ├── NotificationList/ │ │ │ ├── NotificationItem/ │ │ │ └── NotificationSettings/ │ │ │ │ │ └── dashboard/ # Dashboard components │ │ ├── DashboardCard/ │ │ ├── StatisticsWidget/ │ │ ├── RecentRequests/ │ │ └── QuickActions/ │ │ │ ├── pages/ # Page components (routes) │ │ ├── Auth/ │ │ │ ├── Login.tsx │ │ │ └── SSOCallback.tsx │ │ ├── Dashboard/ │ │ │ └── Dashboard.tsx │ │ ├── CreateRequest/ │ │ │ └── CreateRequest.tsx │ │ ├── MyRequests/ │ │ │ └── MyRequests.tsx │ │ ├── OpenRequests/ │ │ │ └── OpenRequests.tsx │ │ ├── ClosedRequests/ │ │ │ └── ClosedRequests.tsx │ │ ├── RequestDetail/ │ │ │ └── RequestDetail.tsx │ │ ├── NotFound/ │ │ │ └── NotFound.tsx │ │ └── Unauthorized/ │ │ └── Unauthorized.tsx │ │ │ ├── redux/ # Redux state management │ │ ├── store.ts # Redux store configuration │ │ ├── hooks.ts # Typed Redux hooks │ │ ├── slices/ │ │ │ ├── authSlice.ts │ │ │ ├── workflowSlice.ts │ │ │ ├── approvalSlice.ts │ │ │ ├── notificationSlice.ts │ │ │ ├── documentSlice.ts │ │ │ ├── workNoteSlice.ts │ │ │ ├── participantSlice.ts │ │ │ └── uiSlice.ts │ │ └── middleware/ │ │ └── apiMiddleware.ts │ │ │ ├── services/ # API service layer │ │ ├── api.ts # Axios instance configuration │ │ ├── auth.service.ts │ │ ├── workflow.service.ts │ │ ├── approval.service.ts │ │ ├── document.service.ts │ │ ├── notification.service.ts │ │ ├── workNote.service.ts │ │ ├── participant.service.ts │ │ ├── dashboard.service.ts │ │ └── user.service.ts │ │ │ ├── hooks/ # Custom React hooks │ │ ├── useAuth.ts │ │ ├── useWorkflow.ts │ │ ├── useNotification.ts │ │ ├── useDebounce.ts │ │ ├── useInfiniteScroll.ts │ │ ├── useLocalStorage.ts │ │ └── useWebSocket.ts │ │ │ ├── utils/ # Utility functions │ │ ├── constants.ts │ │ ├── validators.ts │ │ ├── formatters.ts │ │ ├── dateUtils.ts │ │ ├── fileUtils.ts │ │ ├── errorHandler.ts │ │ └── helpers.ts │ │ │ ├── routes/ # React Router configuration │ │ ├── AppRoutes.tsx │ │ ├── PrivateRoute.tsx │ │ └── PublicRoute.tsx │ │ │ └── config/ # Frontend configuration │ ├── api.config.ts │ ├── theme.config.ts │ └── constants.config.ts │ ├── dist/ # Build output (Vite) │ ├── tests/ # Test files │ ├── components/ │ ├── pages/ │ ├── redux/ │ ├── services/ │ └── setup.js │ ├── docs/ # Component documentation │ └── storybook/ │ ├── nginx/ # Nginx configuration for production │ └── default.conf │ ├── .env.example ├── .env.development ├── .env.production ├── .eslintrc.json ├── .prettierrc ├── .gitignore ├── .dockerignore ├── Dockerfile ├── vite.config.ts # Vite configuration ├── tsconfig.json # TypeScript configuration ├── package.json ├── package-lock.json └── README.md ``` --- ## 4. TypeScript Configuration ### `tsconfig.json` ```json { "compilerOptions": { "target": "ES2020", "lib": ["ES2020", "DOM", "DOM.Iterable"], "jsx": "react-jsx", "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "allowJs": true, "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "noImplicitAny": true, "strictNullChecks": true, "strictFunctionTypes": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "allowSyntheticDefaultImports": true, "isolatedModules": true, "noEmit": true, "baseUrl": "./src", "paths": { "@/*": ["./*"], "@components/*": ["components/*"], "@pages/*": ["pages/*"], "@services/*": ["services/*"], "@redux/*": ["redux/*"], "@hooks/*": ["hooks/*"], "@utils/*": ["utils/*"], "@types/*": ["types/*"], "@config/*": ["config/*"], "@assets/*": ["assets/*"] } }, "include": ["src"], "exclude": ["node_modules", "build", "dist"] } ``` ### `vite.config.ts` ```typescript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path'; export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), '@components': path.resolve(__dirname, './src/components'), '@pages': path.resolve(__dirname, './src/pages'), '@services': path.resolve(__dirname, './src/services'), '@redux': path.resolve(__dirname, './src/redux'), '@hooks': path.resolve(__dirname, './src/hooks'), '@utils': path.resolve(__dirname, './src/utils'), '@types': path.resolve(__dirname, './src/types'), '@config': path.resolve(__dirname, './src/config'), '@assets': path.resolve(__dirname, './src/assets'), }, }, server: { port: 3000, proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, }, }, }, build: { outDir: 'dist', sourcemap: true, }, }); ``` --- ## 5. State Management (Redux Toolkit) ### Redux Store Configuration #### `src/redux/store.ts` ```typescript import { configureStore } from '@reduxjs/toolkit'; import authReducer from './slices/authSlice'; import workflowReducer from './slices/workflowSlice'; import approvalReducer from './slices/approvalSlice'; import notificationReducer from './slices/notificationSlice'; import documentReducer from './slices/documentSlice'; import workNoteReducer from './slices/workNoteSlice'; import participantReducer from './slices/participantSlice'; import uiReducer from './slices/uiSlice'; export const store = configureStore({ reducer: { auth: authReducer, workflow: workflowReducer, approval: approvalReducer, notification: notificationReducer, document: documentReducer, workNote: workNoteReducer, participant: participantReducer, ui: uiReducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: ['persist/PERSIST'], }, }), }); export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; ``` ### Typed Redux Hooks #### `src/redux/hooks.ts` ```typescript import { useDispatch, useSelector } from 'react-redux'; import type { TypedUseSelectorHook } from 'react-redux'; import type { RootState, AppDispatch } from './store'; // Use throughout your app instead of plain `useDispatch` and `useSelector` export const useAppDispatch: () => AppDispatch = useDispatch; export const useAppSelector: TypedUseSelectorHook = useSelector; ``` ### Type Definitions #### `src/types/common.types.ts` ```typescript export enum Priority { STANDARD = 'STANDARD', EXPRESS = 'EXPRESS' } export enum WorkflowStatus { DRAFT = 'DRAFT', PENDING = 'PENDING', IN_PROGRESS = 'IN_PROGRESS', APPROVED = 'APPROVED', REJECTED = 'REJECTED', CLOSED = 'CLOSED' } export interface ApiResponse { success: boolean; message: string; data?: T; error?: string; timestamp: string; } export interface PaginatedResponse { data: T[]; pagination: { page: number; limit: number; total: number; totalPages: number; }; } ``` --- ## 6. Component Structure ### Example: Button Component #### `src/components/common/Button/Button.tsx` ```typescript import React from 'react'; import styles from './Button.module.css'; interface ButtonProps { label: string; onClick: () => void; variant?: 'primary' | 'secondary' | 'danger'; disabled?: boolean; fullWidth?: boolean; } const Button: React.FC = ({ label, onClick, variant = 'primary', disabled = false, fullWidth = false, }) => { return ( ); }; export default Button; ``` #### `src/components/common/Button/Button.types.ts` ```typescript export interface ButtonProps { label: string; onClick: () => void; variant?: 'primary' | 'secondary' | 'danger'; disabled?: boolean; fullWidth?: boolean; } ``` --- ## 7. Configuration Management ### Environment Variables #### `.env.example` ```bash # frontend/.env.example # Application REACT_APP_ENV=development REACT_APP_NAME=RE Workflow Management REACT_APP_VERSION=1.0.0 # API Configuration REACT_APP_API_BASE_URL=http://localhost:5000/api/v1 REACT_APP_API_TIMEOUT=30000 # SSO Configuration REACT_APP_SSO_LOGIN_URL=http://localhost:5000/api/v1/auth/login REACT_APP_SSO_LOGOUT_URL=http://localhost:5000/api/v1/auth/logout # Feature Flags REACT_APP_ENABLE_NOTIFICATIONS=true REACT_APP_ENABLE_EMAIL_NOTIFICATIONS=false REACT_APP_ENABLE_ANALYTICS=true # File Upload REACT_APP_MAX_FILE_SIZE_MB=10 REACT_APP_ALLOWED_FILE_TYPES=pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,jpeg,png,gif # Google Integration REACT_APP_GOOGLE_API_KEY=your_google_api_key # UI Configuration REACT_APP_THEME_PRIMARY_COLOR=#1976d2 REACT_APP_ITEMS_PER_PAGE=20 ``` ### API Configuration #### `src/config/api.config.ts` ```typescript export const API_CONFIG = { baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api/v1', timeout: parseInt(import.meta.env.VITE_API_TIMEOUT || '30000'), headers: { 'Content-Type': 'application/json', }, }; export const API_ENDPOINTS = { auth: { login: '/auth/login', logout: '/auth/logout', me: '/auth/me', }, workflows: { getAll: '/workflows', create: '/workflows', getById: (id: string) => `/workflows/${id}`, update: (id: string) => `/workflows/${id}`, submit: (id: string) => `/workflows/${id}/submit`, }, // ... more endpoints }; ``` --- ## 8. Deployment Architecture ### Dockerfile #### `Dockerfile` ```dockerfile # re-workflow-frontend/Dockerfile FROM node:22-alpine AS builder WORKDIR /app # Copy package files COPY package*.json ./ # Install dependencies RUN npm ci # Copy source code COPY . . # Build application with Vite RUN npm run build # ===================================== # Production Image with Nginx # ===================================== FROM nginx:alpine # Copy custom nginx config COPY nginx/default.conf /etc/nginx/conf.d/default.conf # Copy built files from builder (Vite outputs to 'dist' by default) COPY --from=builder /app/dist /usr/share/nginx/html # Expose port EXPOSE 80 # Health check HEALTHCHECK --interval=30s --timeout=3s \ CMD wget --quiet --tries=1 --spider http://localhost/ || exit 1 CMD ["nginx", "-g", "daemon off;"] ``` ### Nginx Configuration #### `nginx/default.conf` ```nginx server { listen 80; server_name localhost; root /usr/share/nginx/html; index index.html; # Gzip compression gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # Security headers add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; # React Router support location / { try_files $uri $uri/ /index.html; } # Cache static assets location /assets/ { expires 1y; add_header Cache-Control "public, immutable"; } # Health check endpoint location /health { access_log off; return 200 "healthy\n"; add_header Content-Type text/plain; } } ``` ### CI/CD Pipeline (GitHub Actions) #### `.github/workflows/frontend-deploy.yml` ```yaml # .github/workflows/frontend-deploy.yml name: Frontend CI/CD on: push: branches: [main, develop] pull_request: branches: [main] jobs: test-and-build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '22' - name: Install dependencies run: npm ci - name: Run linter run: npm run lint - name: Run tests run: npm test - name: Build application run: npm run build - name: Build Docker image run: docker build -t gcr.io/re-project/re-workflow-frontend:${{ github.sha }} . - name: Push to GCR run: docker push gcr.io/re-project/re-workflow-frontend:${{ github.sha }} ``` --- ## 9. Development Setup Instructions ### 9.1 Prerequisites - **Node.js:** v22.x LTS - **npm:** v10.x or higher - **Git:** Latest version - **TypeScript:** v5.7.x (installed as dev dependency) - **Backend API:** Running on `http://localhost:5000` (see backend documentation) ### 9.2 Local Development Setup #### Step 1: Clone Frontend Repository ```bash git clone https://github.com/royalenfield/re-workflow-frontend.git cd re-workflow-frontend ``` #### Step 2: Configure Frontend Environment ```bash # Copy environment file cp .env.example .env # Edit .env with backend API URL nano .env # or use your preferred editor # Set REACT_APP_API_BASE_URL=http://localhost:5000/api/v1 ``` #### Step 3: Install Dependencies & Run Frontend ```bash # Install dependencies npm install # Run TypeScript type checking npm run type-check # Start development server (Vite with hot reload) npm run dev # Frontend will run on: http://localhost:3000 ``` #### Step 4: Access Application - **Frontend:** http://localhost:3000 - **Backend API:** http://localhost:5000 - **API Documentation:** http://localhost:5000/api-docs - **Health Check:** http://localhost:5000/health ### 9.3 Docker Setup ```bash # From frontend repository root cd re-workflow-frontend # Copy environment file cp .env.example .env # Build Docker image docker build -t re-workflow-frontend . # Run frontend container docker run -d -p 3000:80 --name frontend re-workflow-frontend # Access frontend: http://localhost:3000 # Stop container docker stop frontend docker rm frontend ``` ### 9.4 Running Tests ```bash # From frontend repository cd re-workflow-frontend npm test # Run all tests (Vitest) npm run test:ui # Interactive UI mode (Vitest) npm run test:coverage # With coverage report # Coverage report will be in: coverage/ ``` ### 9.5 Code Quality Checks ```bash # From frontend repository cd re-workflow-frontend npm run lint # ESLint check (React + TypeScript rules) npm run lint:fix # Auto-fix issues npm run format # Prettier formatting npm run type-check # TypeScript type checking only (no build) # Run all quality checks together npm run lint && npm run type-check && npm test ``` ### 9.6 Git Workflow ```bash # Feature branch workflow git checkout -b feature/your-feature-name git add . git commit -m "feat: add your feature description" git push origin feature/your-feature-name # Create Pull Request on GitHub/GitLab # After approval and merge: git checkout main git pull origin main ``` **Branch Strategy:** - `main` - Production-ready code - `develop` - Integration branch for features - `feature/*` - New features - `bugfix/*` - Bug fixes - `hotfix/*` - Production hotfixes **Commit Message Convention (Conventional Commits):** - `feat:` - New feature - `fix:` - Bug fix - `docs:` - Documentation changes - `style:` - Code style changes (formatting) - `refactor:` - Code refactoring - `test:` - Test additions or changes - `chore:` - Build process or tool changes --- ## 10. Package.json ```json { "name": "re-workflow-frontend", "version": "1.0.0", "description": "Royal Enfield Workflow Management System - Frontend (TypeScript)", "private": true, "dependencies": { "react": "^19.0.0", "react-dom": "^19.0.0", "react-router-dom": "^7.1.1", "@reduxjs/toolkit": "^2.5.0", "react-redux": "^9.2.0", "@mui/material": "^6.3.0", "@mui/icons-material": "^6.3.0", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "axios": "^1.7.9", "formik": "^2.4.6", "yup": "^1.6.3", "zod": "^3.24.1", "react-dropzone": "^14.3.5", "date-fns": "^4.1.0", "recharts": "^2.15.0", "react-toastify": "^11.0.2" }, "devDependencies": { "@types/react": "^19.0.6", "@types/react-dom": "^19.0.2", "@types/node": "^22.10.5", "typescript": "^5.7.2", "vite": "^6.0.7", "@vitejs/plugin-react": "^4.3.4", "@testing-library/react": "^16.1.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/user-event": "^14.5.2", "eslint": "^9.17.0", "@typescript-eslint/eslint-plugin": "^8.19.1", "@typescript-eslint/parser": "^8.19.1", "prettier": "^3.4.2", "vitest": "^2.1.8" }, "scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview", "test": "vitest", "test:ui": "vitest --ui", "test:coverage": "vitest --coverage", "lint": "eslint src/**/*.{ts,tsx}", "lint:fix": "eslint src/**/*.{ts,tsx} --fix", "format": "prettier --write \"src/**/*.{ts,tsx,css}\"", "type-check": "tsc --noEmit" }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] }, "browserslist": { "production": [">0.2%", "not dead", "not op_mini all"], "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"] }, "engines": { "node": ">=22.0.0", "npm": ">=10.0.0" } } ``` --- ## Summary This frontend documentation provides: ✅ **Complete Frontend Architecture** - React SPA with Vite, Redux Toolkit, TypeScript ✅ **Technology Stack** - React 19 + TypeScript 5.7 + Vite 6.0 + Material-UI 6.3 ✅ **Folder Structure** - Detailed organization with TypeScript conventions ✅ **Type Definitions** - Comprehensive type safety with interfaces and enums ✅ **Redux Toolkit Setup** - Fully typed state management ✅ **Component Structure** - Reusable, testable components ✅ **Configuration Management** - Environment variables and settings ✅ **Deployment Architecture** - Docker, Nginx, CI/CD pipelines ✅ **Development Setup** - Step-by-step installation and configuration ✅ **Testing Strategy** - Vitest and React Testing Library ✅ **Code Quality** - ESLint, Prettier, TypeScript best practices **Technology Stack:** React 19 + TypeScript 5.7 + Vite 6.0 + Redux Toolkit 2.5 + Material-UI 6.3 **Repository:** `re-workflow-frontend` (Independent Repository) **Status:** ✅ Ready for Implementation