Sistem Sekolah Digital
Web DevelopmentProject Overview
A school management platform built as a paid freelance engagement for a private educational institution. The client's identity is kept confidential under NDA. The system modernizes daily operations around attendance — combining face recognition and QR scanning — with realtime dashboards, automated recaps, and role-based access for staff. Built with a modern React 19 + TypeScript stack for a fast, type-safe, and maintainable codebase.
What I Built
Attendance engine. Built a dual-mode attendance flow — face recognition via the browser camera plus a QR fallback — so check-in stays fast even when a camera isn't ideal.
Realtime dashboards. Wired Socket.io so attendance and activity dashboards update live as students check in, with charts rendered via Recharts.
Role-based access. Implemented distinct permission scopes for admin, teacher, and staff, gating features and data per role.
Type-safe delivery. End-to-end TypeScript with Zod validation and TanStack Query, containerized with Docker for consistent deployment.
Technical Implementation
Frontend. React 19 + TypeScript on Vite, with Radix UI primitives and Tailwind for an accessible, consistent design system.
Data layer. TanStack Query for server-state caching, React Hook Form + Zod for validated forms, and Recharts for dashboards.
Realtime & vision. Socket.io for live updates, in-browser face recognition, and QR scanning for the attendance flow.
Infrastructure. Node.js API backed by PostgreSQL, containerized with Docker and deployed to Google Cloud.
Technologies Used
frontend
data
realtime
infra
Key Features Shipped
Client confidentiality
This was delivered for a private institution under NDA, so the client's name, branding, and live screenshots are omitted. The summary above focuses on the engineering — architecture, stack, and features — rather than any identifying details.