An internal web application for PPM Manajemen that manages an end-to-end employee training point system — from activity submission and multi-tier approval to leaderboards and admin reporting. Built full-stack from the ground up, with a focus on performance, bilingual accessibility, and a mobile-first experience.
Key Features
- Activity Submission & Approval — Employees submit training activities with supporting proof, routed through a structured admin approval workflow
- Leaderboard & Gamification — Real-time employee point rankings to drive participation
- Admin Dashboard — Bulk data import, Excel export, and centralized approval management
- In-App Chat — Communication feature with 30-day auto-delete for storage efficiency
- PPE Registration — Integrated personal protective equipment registration module
- User Guide (/panduan) — Documentation page built with a modular component architecture for easier maintenance and content updates
- Bilingual Support (ID/EN) — Seamless language switching via a custom Context Provider
- Dark Mode & Full Responsive — Consistent UI across all devices, including a dedicated mobile bottom navigation
Tech Stack
- Frontend: Next.js, React, Tailwind CSS
- Backend/Infra: Redis (Upstash) for caching & session management
- State Management: Custom Context Provider (LandingLanguageProvider) for i18n
Key Technical Implementation
- Redis Performance Optimization — Refactored N+1 query patterns into batched calls using
mget, significantly reducing Redis round-trips and improving load times
- Quota-Aware Architecture — Redesigned chat polling intervals to reduce request consumption, including the ability to temporarily disable non-critical features as the Upstash free-tier quota approached its limit — a real-world case study in trading off real-time UX against cost efficiency on serverless infrastructure
- Modular Component Architecture — The
/panduan page was built with reusable, isolated components, enabling faster content iteration without touching core logic
- Internationalization (i18n) System — Custom provider enabling scalable language switching without relying on an external i18n library
- Data Export Pipeline — Excel export system for admin reporting, handling data transformation from database to spreadsheet format
