Fullstack Training System

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

1. Implement a robust authentication system with differentiated roles and permissions.
2. Develop personalized dashboards according to the type of user.
3. Integrate a training module with support for video, rich text, and progress tracking.
4. Create an assessment module with different types of questions and score calculation.
5. Incorporate an interactive reporting system with PDF/Excel export.
6. Implement push notifications for key events (new trainings, reminders).
7. Design the platform as a PWA for optimal use on mobile devices.
8. 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.

3. Functional Modules

4. Optimization and Best Practices

• React Hook Form for form management
• React Query for data synchronization with the server
• Lazy Loading y Suspense to improve performance
• Validation with Zod to prevent invalid data
• PWA Ready for a smooth mobile experience

Results

• Authentication and roles working correctly.
• Complete CRUD for companies, users, and training courses.
• Assessment system with multiple question types.
• Dynamic reports with filters and export.
• Active and configured push notifications.
• Responsive interface optimized for mobile devices.
• Document and video management through R2, ensuring efficient storage and fast content delivery.

Conclusions

This MVP managed to consolidate the entire business training and evaluation cycle into a single platform, reducing administrative management time and improving the end-user experience.

Integration with R2 ensures that files and videos are managed efficiently and scalably, providing a solid foundation for future expansion.

Its modular and scalable architecture makes it easy to add new features, such as integrations with external LMSs or advanced analytics.