A secure, modern web application for KMRL (Kochi Metro Rail Limited) train induction system with role-based access control and multi-factor authentication.
🚀 Application is live at: https://gks281263.github.io/KMRL
- Multi-Factor Authentication (MFA): OTP-based two-factor authentication
- Role-Based Access Control: Support for Supervisor, Maintenance Staff, Branding Manager, Depot Ops, and Admin roles
- Session Management: Secure token-based authentication with automatic refresh
- Rate Limiting: Protection against brute force attacks
- Google-like Minimal Design: Clean, authoritative government product aesthetic
- Responsive Design: Desktop-first with mobile breakpoints at 1024/768/480px
- Accessibility: Full keyboard navigation, ARIA attributes, WCAG AA compliance
- Color Psychology: Blue for trust/reliability, green for success, amber for warnings, red for errors
- TypeScript: Strict mode for type safety
- React 18: Functional components with hooks
- React Query: Efficient data fetching and caching
- Form Validation: Zod schema validation with React Hook Form
- Testing: Comprehensive unit tests with Vitest and Testing Library
src/
├── components/ui/ # Reusable UI components
│ ├── Button.tsx
│ ├── Card.tsx
│ ├── Modal.tsx
│ ├── Toggle.tsx
│ └── Select.tsx
├── pages/ # Page components
│ ├── Login.tsx
│ ├── Login.test.tsx
│ └── Login.stories.tsx
├── services/api/ # API service layer
│ └── auth.ts
├── hooks/ # Custom React hooks
│ └── useAuth.ts
├── types/ # TypeScript type definitions
│ ├── auth.ts
│ └── common.ts
├── utils/ # Utility functions
│ ├── cn.ts
│ └── i18n.ts
├── styles/ # Styling and design tokens
│ └── design-tokens.css
└── test/ # Test setup
└── setup.ts
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone <repository-url> cd kmrl-train-induction
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
# Development
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
# Testing
npm run test # Run unit tests
npm run test:ui # Run tests with UI
# Code Quality
npm run lint # Run ESLint
npm run type-check # Run TypeScript type checkingThe application includes comprehensive unit tests for:
- Form validation
- Authentication flows
- Component rendering
- Error handling
- Accessibility features
# Run all tests
npm run test
# Run tests in watch mode
npm run test -- --watch
# Run tests with coverage
npm run test -- --coverage# Test login as Supervisor
npm run test:e2eThe frontend expects a Django REST API with the following endpoints:
POST /api/auth/login/- User authenticationPOST /api/auth/verify-otp/- MFA OTP verificationGET /api/auth/me/- Get current user infoPOST /api/auth/logout/- User logoutPOST /api/auth/refresh/- Token refresh
See API_STUBS.md for detailed API documentation and example responses.
Create a .env file in the root directory:
VITE_API_BASE_URL=https://api.kmrl.gov.in/api
VITE_APP_NAME=KMRL Train Induction- Primary Blue:
#0b66ff- Trust, reliability, main actions - Success Green:
#22c55e- Valid certificates, on-time status - Warning Amber:
#f59e0b- Near-expiry items, attention needed - Danger Red:
#ef4444- Expired certificates, failed sync - Neutral Gray:
#f5f5f5- Clean surfaces, backgrounds - Accent Teal:
#14b8a6- Branding manager elements
- Font Family: Inter (Google Fonts)
- Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)
- Line Heights: 1.25 (tight), 1.5 (normal), 1.75 (relaxed)
- Base Unit: 4px
- Scale: xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px), 3xl (64px)
- Cards: 16px (2xl)
- Buttons: 8px (lg)
- Inputs: 8px (lg)
The application follows WCAG AA standards:
- Keyboard Navigation: All interactive elements accessible via keyboard
- Screen Reader Support: Proper ARIA labels and descriptions
- Color Contrast: Sufficient contrast ratios for all text
- Focus Management: Clear focus indicators and logical tab order
- Error Handling: Accessible error messages and validation
The application is i18n-ready using a simple translation function:
import { t } from '@/utils/i18n';
// Usage
t('login.title') // "KMRL Train Induction — Secure Access"
t('login.mfa.countdown', { seconds: 30 }) // "Resend available in 30s"npm run buildThe build output will be in the dist/ directory, ready for deployment to any static hosting service.
The application is automatically deployed to GitHub Pages at: https://gks281263.github.io/KMRL
npm run deploy- Base Path:
/KMRL/(configured invite.config.ts) - Homepage:
https://gks281263.github.io/KMRL(configured inpackage.json) - 404 Redirect: Handles client-side routing properly
- Build Output:
dist/directory
- Login Page (
/login) - Secure authentication with MFA - Data Ingestion Dashboard (
/data-ingestion) - Monitor data sources - Unified Data Model (
/unified-data-model) - Train data management - Validation Dashboard (
/validation) - Hard-rule validations
- Vercel: Zero-config deployment with automatic HTTPS
- Netlify: Easy deployment with form handling
- AWS S3 + CloudFront: Scalable static hosting
- GitHub Pages: Free hosting for public repositories
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript strict mode
- Use functional components and hooks
- Write comprehensive tests
- Follow accessibility guidelines
- Use the established design system
This project is licensed under the MIT License - see the LICENSE file for details.
For technical support or questions:
- Email: ops@kmrl.gov.in
- Documentation: See
API_STUBS.mdfor API details - Issues: Use GitHub Issues for bug reports and feature requests
KMRL Train Induction - Secure, Modern, Accessible