Skip to content

INDEX.md

Latest commit

 

History

History
264 lines (246 loc) · 10.2 KB

INDEX.md

File metadata and controls

264 lines (246 loc) · 10.2 KB

Project Index - Student's University Practical Training Management Information System

Overview

This is a full-stack application for managing university practical training programs. The system consists of a Node.js/Express backend with TypeScript and a React frontend with Vite.

Backend (Backend/)

Technology Stack

  • Runtime: Node.js with TypeScript
  • Framework: Express.js
  • Database: SQLite (with Sequelize ORM)
  • Authentication: JWT tokens with bcrypt for password hashing
  • File Upload: Multer for handling file uploads
  • Email: Nodemailer for email functionality
  • Validation: Express-validator for request validation

Project Structure

Backend/
├── src/
│   ├── @types/           # TypeScript type definitions
│   ├── config/           # Database configuration and connections
│   ├── constants/        # Application constants
│   ├── controllers/      # Route controllers (business logic)
│   │   ├── AuthController.ts
│   │   ├── CompanyController.ts
│   │   ├── EvaluationController.ts
│   │   ├── StatisticsController.ts
│   │   ├── StudentController.ts
│   │   ├── TrainerController.ts
│   │   ├── TrainingController.ts
│   │   ├── TrainingRequestController.ts
│   │   └── UserController.ts
│   ├── enums/           # Application enums
│   ├── middlewares/     # Express middlewares
│   │   ├── cors.ts
│   │   ├── errorHandler.ts
│   │   ├── handleValidationResult.ts
│   │   ├── index.ts
│   │   ├── verifyAccessToken.ts
│   │   ├── verifyResetToken.ts
│   │   └── verifyRole.ts
│   ├── models/          # Sequelize database models
│   │   ├── Answer.ts
│   │   ├── AnsweredQuestion.ts
│   │   ├── Associations.ts
│   │   ├── Company.ts
│   │   ├── CompanyBranch.ts
│   │   ├── CompanyField.ts
│   │   ├── Evaluation.ts
│   │   ├── Field.ts
│   │   ├── index.ts
│   │   ├── Note.ts
│   │   ├── Permission.ts
│   │   ├── Question.ts
│   │   ├── Role.ts
│   │   ├── Student.ts
│   │   ├── Trainer.ts
│   │   ├── Training.ts
│   │   └── User.ts
│   ├── routes/          # API route definitions
│   │   ├── AuthRouter.ts
│   │   ├── CompanyRouter.ts
│   │   ├── EvaluationRouter.ts
│   │   ├── FileRoute.ts
│   │   ├── index.ts
│   │   ├── RoleRouter.ts
│   │   ├── StatisticsRouter.ts
│   │   ├── StudentRouter.ts
│   │   ├── TrainerRouter.ts
│   │   ├── TrainingRequestRouter.ts
│   │   ├── TrainingRouter.ts
│   │   └── UserRouter.ts
│   ├── services/        # Business logic services
│   ├── types/           # TypeScript type definitions
│   ├── utils/           # Utility functions
│   ├── validators/      # Request validation schemas
│   ├── app.ts           # Express app configuration
│   └── server.ts        # Server entry point
├── database.sqlite      # SQLite database file
├── nodemon.json         # Nodemon configuration
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript configuration
└── yarn.lock           # Yarn lock file

Key Features

  • Authentication & Authorization: JWT-based auth with role-based access control
  • File Management: File upload and management capabilities
  • Email Integration: Password reset and notification emails
  • Data Validation: Comprehensive request validation
  • Database ORM: Sequelize for database operations
  • Security: CORS, authentication middleware, password hashing

Scripts

  • npm run dev: Start development server with nodemon
  • npm run start: Start production server
  • npm run build: Build TypeScript to JavaScript

Frontend (Frontend/)

Technology Stack

  • Framework: React 18 with TypeScript
  • Build Tool: Vite
  • UI Library: Material-UI (MUI) v5
  • State Management: React Query (TanStack Query)
  • Routing: React Router DOM v6
  • Forms: Formik with Yup validation
  • Charts: Chart.js with react-chartjs-2
  • Internationalization: i18next
  • Testing: Vitest with Testing Library

Project Structure

Frontend/
├── src/
│   ├── api/             # API service functions
│   │   ├── addField.ts
│   │   ├── forgetPassword.ts
│   │   ├── getAllFields.ts
│   │   ├── getBranch.ts
│   │   ├── getCompany.ts
│   │   ├── getEvaluation.ts
│   │   ├── getQuestions.ts
│   │   ├── index.ts
│   │   ├── logout.ts
│   │   ├── progress.ts
│   │   ├── types.ts
│   │   └── verifyAccessToken.ts
│   ├── components/      # Reusable UI components
│   │   ├── AccountMenu/
│   │   ├── AppMenu/
│   │   ├── AppMenuItem/
│   │   ├── AppNavbar/
│   │   ├── AppSideDrawer/
│   │   ├── AppSideDrawerMultiLevel/
│   │   ├── DataGrid/
│   │   ├── DataGridTanstack/
│   │   ├── FormsUI/
│   │   ├── hooks/
│   │   ├── Inputs/
│   │   ├── Language/
│   │   ├── Transition/
│   │   ├── constants.ts
│   │   └── types.ts
│   ├── constants/       # Application constants
│   ├── containers/      # Container components
│   ├── context/         # React context providers
│   ├── ErrorBoundary/   # Error boundary components
│   ├── hooks/           # Custom React hooks
│   ├── icons/           # Icon components
│   ├── images/          # Image assets
│   ├── locals/          # Localization files
│   ├── lotties/         # Lottie animation files
│   ├── pages/           # Page components
│   │   ├── AccessDenied/
│   │   ├── Admin/
│   │   ├── company/
│   │   ├── Dashboard/
│   │   ├── DataGridInfinitePlayground/
│   │   ├── DataGridPaginatedPlayground/
│   │   ├── EditorPlayground/
│   │   ├── ForgetPassword/
│   │   ├── Home/
│   │   ├── InfiniteScrollPlayground/
│   │   ├── LandingPage/
│   │   ├── Login/
│   │   ├── NotFound/
│   │   ├── resetPassword/
│   │   ├── Student/
│   │   ├── trainer/
│   │   └── university/
│   ├── routes/          # Routing configuration
│   │   ├── AppRoutes.tsx
│   │   ├── constants.tsx
│   │   ├── hooks/
│   │   ├── index.ts
│   │   ├── ProtectedRoute.tsx
│   │   ├── types.ts
│   │   └── utils/
│   ├── styling/         # Theme and styling
│   ├── types/           # TypeScript type definitions
│   ├── UnexpectedError/ # Error handling components
│   ├── utils/           # Utility functions
│   ├── App.tsx          # Main App component
│   ├── i18n.tsx         # Internationalization setup
│   ├── index.css        # Global styles
│   ├── main.tsx         # Application entry point
│   ├── queryClient.ts   # React Query configuration
│   ├── setupTests.ts    # Test setup
│   └── vite-env.d.ts    # Vite type definitions
├── public/              # Static assets
├── index.html           # HTML template
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript configuration
├── tsconfig.node.json   # Node TypeScript configuration
├── vite.config.ts       # Vite configuration
└── yarn.lock           # Yarn lock file

Key Features

  • Modern React: Functional components with hooks
  • Material Design: MUI components with custom theming
  • Data Management: React Query for server state
  • Form Handling: Formik with comprehensive validation
  • Routing: Protected routes with authentication
  • Internationalization: Multi-language support
  • Data Visualization: Charts and data grids
  • Error Handling: Error boundaries and user feedback
  • Performance: Code splitting and lazy loading

Scripts

  • npm run dev: Start development server (port 3500)
  • npm run build: Build for production
  • npm run preview: Preview production build
  • npm run test: Run tests with Vitest
  • npm run format: Format code with Prettier

Database Schema

The application uses SQLite with the following main entities:

  • Users: Authentication and user management
  • Students: Student information and profiles
  • Trainers: Trainer/mentor information
  • Companies: Company and branch information
  • Trainings: Training program details
  • Evaluations: Training evaluations and assessments
  • Questions & Answers: Evaluation questionnaire system

Development Setup

Backend Setup

  1. Navigate to Backend directory
  2. Install dependencies: yarn install
  3. Configure environment variables
  4. Run database migrations: npm run build && npm start
  5. Start development server: npm run dev

Frontend Setup

  1. Navigate to Frontend directory
  2. Install dependencies: yarn install
  3. Start development server: npm run dev
  4. Application will be available at http://localhost:3500

Architecture Patterns

  • Backend: MVC pattern with Express.js
  • Frontend: Component-based architecture with React
  • State Management: Server state with React Query, local state with React hooks
  • Authentication: JWT tokens with role-based access control
  • API Communication: RESTful APIs with Axios

Security Features

  • JWT authentication
  • Password hashing with bcrypt
  • CORS configuration
  • Input validation and sanitization
  • Role-based access control
  • File upload security

Development Tools

  • Linting: ESLint with TypeScript support
  • Formatting: Prettier
  • Git Hooks: Husky with lint-staged
  • Type Checking: TypeScript strict mode
  • Hot Reload: Nodemon (backend), Vite (frontend)