Kampus Gratis
A comprehensive, gamified EdTech platform designed to provide accessible, high-quality education through a modern LMS experience.
Building a scalable learning ecosystem with Next.js 13 and Nx Monorepo.
Kampus Gratis is a feature-rich Learning Management System (LMS) built to bridge the educational gap. It offers a structured learning environment where students can enroll in faculties, manage study plans, and track their academic performance through a gamified interface.
Core Value
The project focuses on delivering a premium, high-performance user experience while maintaining a scalable codebase. By leveraging a monorepo architecture, it ensures consistency across student and admin platforms while providing interactive tools like real-time analytics and discussion hubs.
What Makes It Stand Out
The enterprise-grade Nx monorepo setup with shared libraries and an Atomic Design system allows multiple teams to work on different modules simultaneously without code duplication.
Atomic Design System
Implementation of a modular UI library based on Atomic Design principles (Atoms, Molecules, Organisms) for maximum reusability.
Advanced Data Visualization
Custom-styled analytical charts using Chart.js, featuring linear gradients and interactive tooltips for performance tracking.
Gamification Engine
Real-time leaderboard and point system integrated with student profiles to drive platform engagement.
Dynamic LMS Workflows
Complex state management for course progression, quiz attempts, and assignment submissions.
Optimized Media Delivery
Seamless integration of YouTube players and optimized image handling for a smooth learning experience.
Student Dashboard
A comprehensive overview of study progress and academic goals.
Learning Module
Structured course content with integrated video and interactive sessions.
Performance Analytics
Visual tracking of academic trends and GPA performance.
Leaderboard
Competitive ranking system showcasing top-performing students.
Scalable Monorepo Architecture
Utilized Nx to manage multiple applications and shared libraries, ensuring efficient build times and code sharing.
Hybrid State Management
Combined Recoil for global UI state and TanStack Query for robust server-state synchronization and caching.
Type-Safe API Integration
Implemented a centralized service layer with custom hooks and TypeScript interfaces for reliable data fetching.
Responsive UX Patterns
Developed a mobile-first UI with smooth transitions using Framer Motion and optimized layouts via Tailwind CSS.
Dependency Orchestration
Managing shared libraries and version consistency across different applications within the Nx workspace.
Real-time Interaction Logic
Synchronizing gamification points and discussion activities across complex, nested component structures.
Next.js 13 App Router
Deepened expertise in App Router patterns and server/client component optimization.
Monorepo Management
Mastered large-scale monorepo management using Nx for enterprise-grade frontend development.
Gamification UX
Enhanced skills in data visualization and gamification UX design for educational platforms.
Project Info
Highlights
- Enterprise-grade Nx Monorepo setup
- Advanced performance analytics with Chart.js
- Gamified student engagement system
- Modular Atomic Design architecture
- Seamless Next.js 13 implementation
