A comprehensive simulation tool for training and assessment, featuring role-based access control, interactive training modules, and real-time performance tracking.
- 🔐 Role-based access control with JWT authentication
- 📊 Interactive dashboards for trainees, trainers, and administrators
- 🎯 Training plan management and progress tracking
- 🎮 Interactive simulation modules with audio/visual components
- 📝 Real-time performance assessment and scoring
- 📊 Detailed playback and analysis features
- 🔄 Comprehensive simulation management system
- React 18 with TypeScript
- Material-UI (MUI) for UI components
- React Router for navigation
- JWT for authentication
- Vite for build tooling
- WaveSurfer.js for audio visualization
- Retell SDK for voice interactions
Before you begin, ensure you have installed:
- Node.js (v18 or higher)
- npm (v9 or higher)
-
Install dependencies:
npm install
-
Create a
.envfile in the root directory with the following content:VITE_API_URL=https://everise-backend.replit.app
-
Start the development server:
npm run dev
The application will be available at
http://localhost:5173
src/
├── api/ # API integration files
├── assets/ # Static assets (images, fonts)
├── components/ # React components
│ ├── common/ # Shared components
│ ├── dashboard/ # Dashboard-specific components
│ └── layout/ # Layout components
├── context/ # React context providers
├── hooks/ # Custom React hooks
├── services/ # API services
├── theme/ # Theme configuration
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run generate-api- Generate API types from OpenAPI spec
The application uses JWT tokens for authentication. Tokens are stored in localStorage and include role-based permissions. The permission structure is as follows:
{
"WS-2025-1001": {
"permissions": {
"simulator": {
"training": ["read", "write"],
"playback": ["read"],
"dashboard_admin": ["read", "write"]
}
}
}
}-
Component Structure
- Use functional components with TypeScript
- Implement proper type definitions
- Use React hooks for state management
-
Styling
- Use MUI components as base
- Follow theme configuration in
src/theme
-
State Management
- Use React Context for global state
- Implement proper error boundaries
- Handle loading states appropriately
-
Code Quality
- Follow ESLint configuration
- Write meaningful component and function names
- Add proper documentation for complex logic
-
Build the application:
npm run build
-
Preview the production build:
npm run preview
-
Deploy the
distdirectory to your hosting service