Assignment Progress Tracker PWA
A high-performance, academic-focused Progressive Web App designed to streamline the lifecycle of complex assignments. Featuring a structured checkpoint system, real-time notifications, and multi-role dashboards, it bridges the gap between students and instructors in higher education environments.
TECH_STACK
PROJECT_OVERVIEW
Assignment Progress Tracker PWA
A high-performance, enterprise-grade Learning Management System (LMS) extension designed to streamline complex academic workflows. This Progressive Web App (PWA) enables students and instructors to manage multi-stage assignments, such as theses or research papers, through a structured and sequential checkpoint system.
Key Features
Multi-Role Ecosystem
- Student Dashboard: Features real-time progress tracking, drag-and-drop file submissions for PDF and DOCX formats, and integrated feedback loops.
- Instructor Portal: Provides batch review operations, automated deadline management, and comprehensive student performance analytics.
- Admin Command Center: Centralized management for users, template building with drag-and-drop checkpoint sequencing, and system-wide health monitoring.
Technical Implementation
- Sequential Workflow Engine: Enforces structured academic progress by requiring students to complete predefined milestones in a specific order.
- Real-Time Synergy: A multi-channel notification system featuring In-App alerts, Email integration via Resend, and Web Push API for instantaneous engagement.
- Interactive Analytics: Role-based dashboards utilizing dynamic visualizations (Recharts) and automated reporting with PDF, Excel, and CSV export capabilities.
- Offline-First PWA: Fully installable on mobile and desktop platforms, featuring offline access and background data synchronization.
Tech Stack
| Category | Technology |
|---|---|
| Frontend | Next.js 15+ (App Router), React 19, TypeScript |
| Styling | Tailwind CSS 4, shadcn/ui, Radix UI Primitives |
| Backend/ORM | Prisma ORM, PostgreSQL |
| Authentication | Auth.js (v5 Beta) with RBAC and 2FA (TOTP) |
| State/Caching | Redis, Adaptive Polling System |
| Infrastructure | AWS S3 (Storage), Resend (Email Infrastructure), Web Push API |
| Testing | Playwright (E2E), Vitest (Unit/Integration) |
| Localization | next-intl (Bilingual support: English & Indonesian) |
Engineering Excellence
- Hybrid Architecture: Combines high-level dashboard summaries with dedicated, full-featured workflow pages for complex operations.
- Production Standards: Optimized for performance with lazy loading, SSR prefetching, and strict TypeScript type-safety.
- Accessibility: Built with ARIA compliance and comprehensive keyboard navigation support.
- Security: Implements token-based password resets, active session management, and granular permission controls.
Project Structure
src/app: Next.js App Router with i18n routing logic.src/components: Atomic UI components built with shadcn/ui.src/lib/services: Encapsulated business logic layer for modular maintainability.src/lib/repositories: Data access layer utilizing Prisma.prisma/: Database schema definitions and migration history.public/: PWA manifest and static assets.tests/: Comprehensive Playwright and Vitest testing suites.
RELATED_PROJECTS
Chasing Chapters
Chasing Chapters is a premium, bilingual book-review platform built with Next.js 16 and Payload CMS 3.0. It combines a boutique bookstore aesthetic with a powerful publishing workflow, featuring automated English-to-Indonesian translations and high-performance static rendering.
Portfolio v2: The Ubuntu Terminal Experience
A high-performance portfolio website and custom-built Content Management System (CMS) featuring a distinctive Ubuntu Terminal-inspired aesthetic. Developed with TanStack Start (React 19) and a self-hosted Convex backend, the platform provides a real-time environment for managing professional projects, technical skills, and blog content. It includes a dynamic PDF resume generator, a secure administrative dashboard, and comprehensive SEO optimization.