CrossComITS - Interactive Training System

CrossComITS is a modern learning management platform designed for creating, managing, and delivering interactive educational content. Built with a monorepo architecture using NX, the platform combines powerful content authoring tools with H5P integration for rich, interactive learning experiences.

📸 Screenshots

Homepage	Main Dashboard	Login
Collection Overview	Lesson Details	FAQ
About Page	Management Dashboard	Lesson Management
Your content	Content Management

✨ Features

• Interactive Content Creation: Rich text editor with support for multimedia, formatting, and H5P interactive elements
• H5P Integration: Full integration with H5P content types for quizzes, presentations, interactive videos, and more
• Course Management: Hierarchical organization of courses, modules, and lessons
• User Management: Role-based access control (Admin, Teacher, Student)
• Media Library: Centralized storage and management of media assets
• Progressive Web App: Installable web application with offline capabilities
• Responsive Design: Mobile-first design that works on all devices
• RESTful API: Well-documented backend API with Swagger/OpenAPI
• Infrastructure as Code: AWS deployment managed with Pulumi

🏗 Architecture

This project is organized as an NX monorepo containing:

crosscom-its/
├── apps/
│   ├── frontend/              # React-based web application
│   ├── server/                # NestJS backend API
│   ├── infrastructure_frontend/   # Pulumi infrastructure for frontend
│   └── infrastructure_server/     # Pulumi infrastructure for backend
├── libs/
│   └── shared-nest/           # Shared NestJS utilities and modules
└── art/                       # Screenshots and visual assets

🚀 Tech Stack

Frontend

• React 18 - Modern UI library
• Material-UI (MUI) - Component library
• React Router - Client-side routing
• Zustand - State management
• Slate.js - Rich text editor
• H5P React - Interactive content integration
• i18next - Internationalization
• Vite - Fast build tool and dev server

Backend

• NestJS 10 - Progressive Node.js framework
• TypeORM - SQL database ORM
• MySQL - Primary database
• MongoDB - H5P content storage
• Redis - Caching layer
• AWS S3 - File storage
• Passport JWT - Authentication
• Swagger - API documentation

Infrastructure

• Pulumi - Infrastructure as Code
• AWS - Cloud hosting platform
• Docker - Containerization

Development

• NX - Monorepo management
• TypeScript - Type-safe JavaScript
• ESLint & Prettier - Code quality
• Jest & Vitest - Testing frameworks
• Playwright - E2E testing

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18+ - JavaScript runtime
• npm - Package manager
• MySQL - Database server
• MongoDB - NoSQL database for H5P
• Redis - Caching server
• FFmpeg - Media processing (required for video handling)

Installing FFmpeg

macOS:

brew install ffmpeg

Ubuntu/Debian:

sudo apt-get update
sudo apt-get install ffmpeg

Windows: Download from ffmpeg.org and add to PATH

🛠 Installation

1. Clone the repository

git clone <repository-url>
cd crosscom-its

2. Install dependencies

npm install --legacy-peer-deps

3. Configure environment variables

Create a .env file in apps/server/src/assets/ based on the following template:

NODE_ENV=local
FRONTEND_URL=http://localhost:4200

# Database Configuration
DATABASE_HOST=localhost
DATABASE_PORT=3306
DATABASE_USER=root
DATABASE_PASSWORD=your_password
DATABASE=crosscom_its

# JWT Authentication
JWT_SECRET=your_secret_key_here

# Server Configuration
PORT=3001

# AWS S3 Storage
S3_BUCKET_NAME=crosscom-its-bucket
H5P_CONTENT_S3_BUCKET=h5p-content
H5P_TEMPORARY_S3_BUCKET=h5p-temp

# MongoDB for H5P Storage
H5P_MONGODB_URL=localhost
H5P_MONGODB_USER=root
H5P_MONGODB_PASSWORD=your_mongodb_password

# Redis Cache
H5P_REDIS_HOST=localhost
H5P_REDIS_PORT=6379

# SMTP Email Configuration
SMTP_HOST=smtp.gmail.com
SMTP_PORT=465
SMTP_SECURE=true
SMTP_USER=your_email@gmail.com
SMTP_PASSWORD=your_app_password
SMTP_FROM_NAME=CrossComITS Platform
SMTP_FROM_EMAIL=your_email@gmail.com

4. Set up databases

MySQL:

mysql -u root -p
CREATE DATABASE crosscom_its;

MongoDB:

# Start MongoDB service
mongod --dbpath /path/to/data

Redis:

# Start Redis service
redis-server

5. Run database migrations

npx nx run server:migration:run

🏃 Running the Application

Development Mode

Start the backend server:

npx nx run server:serve

The API will be available at http://localhost:3001

Start the frontend application:

npx nx run frontend:serve

The web app will be available at http://localhost:4200

Run both concurrently:

npx nx run-many --target=serve --projects=server,frontend

Production Build

Build all applications:

npx nx run-many --target=build --all

Build specific app:

npx nx build server
npx nx build frontend

📚 API Documentation

When running the server, Swagger API documentation is available at:

http://localhost:3001/api/docs

This provides interactive documentation for all available endpoints.

🧪 Testing

Run all tests:

npx nx run-many --target=test --all

Run tests for specific app:

npx nx test server
npx nx test frontend

Run E2E tests:

npx nx e2e frontend-e2e

Test with coverage:

npx nx test server --coverage

🔍 Code Quality

Linting:

npx nx run-many --target=lint --all

Format code:

npx prettier --write .

Type checking:

npx nx run-many --target=type-check --all

📦 Project Structure

Apps

• apps/frontend/ - React web application with Material-UI

  • Handles user interface and interaction
  • Integrates H5P content player
  • Progressive Web App capabilities

• apps/server/ - NestJS backend API

  • RESTful API endpoints
  • Database management with TypeORM
  • File upload and processing
  • Authentication and authorization

• apps/infrastructure_frontend/ - Frontend infrastructure

  • Pulumi configuration for AWS CloudFront
  • S3 bucket for static hosting
  • CDN configuration

• apps/infrastructure_server/ - Backend infrastructure

  • Pulumi configuration for AWS ECS
  • Application Load Balancer
  • RDS database instances
  • S3 buckets for storage

Libs

• libs/shared-nest/ - Shared NestJS utilities
  • Common decorators
  • Swagger configuration
  • Shared DTOs and entities
  • Utility functions

🚢 Deployment

AWS Deployment with Pulumi

1. Configure AWS credentials:

aws configure

2. Deploy infrastructure:

cd apps/infrastructure_server
pulumi up

3. Deploy frontend infrastructure:

cd apps/infrastructure_frontend
pulumi up

Environment-specific Builds

The application supports different environments:

• local - Local development
• development - Development server
• staging - Staging environment
• production - Production environment

Configure the NODE_ENV variable in your .env file accordingly.

🤝 Contributing

1. Create a feature branch (git checkout -b feature/amazing-feature)
2. Commit your changes following conventional commits (git commit -m 'feat: add amazing feature')
3. Push to the branch (git push origin feature/amazing-feature)
4. Open a Pull Request

Commit Convention

This project uses Conventional Commits:

• feat: - New features
• fix: - Bug fixes
• docs: - Documentation changes
• style: - Code style changes (formatting, etc.)
• refactor: - Code refactoring
• test: - Adding or updating tests
• chore: - Maintenance tasks

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔧 Troubleshooting

Common Issues

Port already in use:

# Kill process on port 3001 (backend)
lsof -ti:3001 | xargs kill -9

# Kill process on port 4200 (frontend)
lsof -ti:4200 | xargs kill -9

Database connection errors:

• Ensure MySQL is running: mysql.server start
• Check credentials in .env file
• Verify database exists: SHOW DATABASES;

MongoDB connection issues:

• Ensure MongoDB is running: brew services start mongodb-community
• Check MongoDB URL in .env file

Redis connection issues:

• Ensure Redis is running: redis-cli ping
• Should return PONG if running correctly

FFmpeg not found:

• Verify installation: ffmpeg -version
• Ensure FFmpeg is in your system PATH

NPM install fails:

• Use --legacy-peer-deps flag: npm install --legacy-peer-deps
• Clear cache: npm cache clean --force

📞 Support

For issues and questions:

• Create an issue in the GitHub repository
• Check existing documentation in the /apps subdirectories
• Review the API documentation at /api/docs

🙌 Contributers

Thans go to these awesome contributors:

🎯 Roadmap

Future enhancements planned:

• Enhanced analytics and reporting
• Advanced user progress tracking
• Mobile native applications
• Real-time collaboration features
• Advanced quiz and assessment tools
• Integration with external LMS systems
• Multi-language support expansion
• Advanced media editing capabilities

---

Built with ❤️ using NX, NestJS, and React