Rendering creativity... Don't adjust your resolution!

Fullstack Training System

Fullstack Training System
Web Development
In Development
NextJS
PostgreSQL
12
CustomerTraining System
IndustryBusiness Training
ServicesUX/UI Design, Fullstack Development, System Integration, Document Management (R2), PWA Optimization
Main ChallengeCreate 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

  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

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.
Superadmin view when managing a training

Superadmin view when managing a training

View of an assigned training and Company Admin view

View of an assigned training and Company Admin view

Training file management with R2 Cloudflare

Training file management with R2 Cloudflare

Share

© 2025 Mateo Avila

Projects | Fullstack Training System