Fullstack Training System

| 1 | 2 |
|---|---|
| Customer | Training System |
| Industry | Business Training |
| Services | UX/UI Design, Fullstack Development, System Integration, Document Management (R2), PWA Optimization |
| Main Challenge | Create a unified platform to manage training, assessments, and reporting for multiple companies, with optimized storage and responsive experience |
Introduction
The Training System MVP is a fullstack platform developed with Next.js 15 (App Router) that allows multiple companies to centrally manage training, assessments, and compliance. Its modular, scalable and responsive design allows it to adapt to different user roles (Superuser, Company Administrator and Employee), offering everything from content creation to the visualization of participation and performance metrics.
💡 Key Objective: Unify in a single system the management of business training and compliance assessment, optimizing the user experience and reducing the operational burden on administrators. Previously, everything was managed with Drive, Google Forms and WhatsApp.
Project Objectives
- Implement a robust authentication system with differentiated roles and permissions.
- Develop personalized dashboards according to the type of user.
- Integrate a training module with support for video, rich text, and progress tracking.
- Create an assessment module with different types of questions and score calculation.
- Incorporate an interactive reporting system with PDF/Excel export.
- Implement push notifications for key events (new trainings, reminders).
- Design the platform as a PWA for optimal use on mobile devices.
- Securely and scalably manage documents and media files using R2, optimizing storage and costs.
Design and Development Process
1. Research and Architecture
A fullstack monorepo architecture with Next.js 15 and PostgreSQL (Prisma ORM) was defined, ensuring consistency between frontend and backend.
- Key technologies: Next.js 15, Tailwind CSS, shadcn/ui, NextAuth.js, Firebase Cloud Messaging, R2 for document management, TypeScript.
- Principles: modularity, scalability, performance optimization and security.
2. Frontend and Backend Development
- Frontend: Implemented with App Router, shadcn/ui and Tailwind CSS for reusable and stylized components.
- Backend: API Routes organizadas por módulos (auth, companies, trainings, evaluations, reports).
- Authentication and Roles: Configuring NextAuth with middleware for access control.
- Document Management: Integration with R2 to store and serve videos, documents and multimedia files of training, guaranteeing high availability and low cost.


