TK Mitra Bunda

1. Project Summary

• Project Name: TK Mitra Bunda - Digital Attendance System
• Project Type: Full-Stack Web Application / SaaS MVP
• Industry: Education / EdTech
• Client Type: Kindergarten Institution (TK Mitra Bunda)
• Development Status: MVP / Version 1.0 (Completed)
• Timeline: 4 - 6 Weeks
• My Role: Lead Full-Stack Developer, UI/UX Designer, Software Architect
• Team Size: 1 (Solo Project)
• Target Platform: Web (Desktop optimized for administration, Tablet/Mobile optimized for QR scanning)

2. Background

In many traditional educational institutions, especially kindergartens (TK), student attendance is still recorded manually using paper-based ledger books. Teachers spend the first 15 minutes of every morning calling out names and marking attendance. When it comes to dismissal time, the chaos increases as there is no accurate, real-time logging of exactly what time a child was picked up and by whom.

For the school administration, at the end of every month, staff must manually tally the attendance records to generate reports, a process highly susceptible to human error. Parents and administrators have no verifiable digital trail of when a child arrived or left the premises. The school needed a digital, touchless, and instantaneous solution to track attendance and dismissal times accurately, generating instant reports while impressing parents with modern technology.

3. Business Problems

1. Inefficient Morning Routines: Calling attendance manually consumes valuable teaching time and delays the start of morning activities.
2. Lack of Dismissal Tracking: There was no precise record of when a child left the school. This is a critical security and operational issue in kindergartens where child handover timing must be strictly monitored.
3. Time-Consuming Monthly Reporting: Staff spent hours manually counting "Hadir", "Sakit", "Izin", and "Alpa" tallies across multiple physical books to create monthly Excel reports.
4. Data Inaccuracy and Loss: Physical books can be lost, damaged, or filled out incorrectly, leading to permanent loss of historical attendance data.
5. Lack of Modern Branding: The school wanted to position itself as a forward-thinking, tech-enabled institution to attract prospective parents. A manual paper system hindered this brand image.

4. Project Goals

Functional Goals:

• Provide a reliable, fast web-based QR code scanner that works on any device with a camera.
• Automatically separate "Arrival" (Kehadiran) and "Dismissal" (Kepulangan) scans based on time configurations.
• Allow administrators to easily add, edit, and delete student data, and auto-generate QR codes.
• Provide a 1-click export to Excel for daily and monthly reporting.

Business Goals:

• Eliminate 100% of paper-based attendance tracking.
• Reduce the time taken for morning attendance from 15 minutes to under 2 minutes.
• Automate the end-of-month reporting process, saving administration staff hours of manual labor.

Operational Goals:

• Ensure the system is easy enough to be used by teachers with minimal technical literacy.
• Provide clear visual and auditory feedback (Text-to-Speech) so teachers do not need to constantly look at the screen while scanning students.

5. Proposed Solution

The proposed solution was a QR-based Digital Attendance Web Application built with a modern JavaScript stack.

• Architecture: I chose Next.js App Router integrated with Supabase. Next.js Server Actions handle business logic securely on the server without exposing traditional API endpoints, while Supabase provides robust PostgreSQL storage and Row Level Security (RLS).
• Technologies: React 19 and Tailwind CSS 4 were chosen to rapidly build a highly responsive, visually premium interface. html5-qrcode was implemented for client-side scanning to offload image processing from the server, ensuring zero-latency scans.
• Workflows: Each student receives a unique QR code. A tablet or laptop is placed at the school gate. As students arrive, they scan their QR code. The system verifies the code, logs the timestamp, and triggers a Text-to-Speech audio confirmation (e.g., "Aisyah, Hadir!"). At a pre-configured time (e.g., 12:00 PM), the scanner automatically switches to "Dismissal" mode.
• User Experience: The UI relies on a glassmorphism aesthetic, rich gradients, and large, clear typography. Complex data tables adapt into stackable cards on mobile devices. This ensures the app feels premium and is foolproof for non-technical users.

6. Target Users

• Super Admin / Principal: Full access to view overall statistics, manage the system's global settings (like configuring the automatic dismissal time switch), and generate full historical reports.
• Admin / Teacher: Can add or edit student records, manually override attendance (e.g., marking a child as Sick or Excused with a note), and operate the QR scanner interface at the school gate.
• Student (Passive User): Carries the generated QR code (printed on an ID card or lanyard) to be scanned by the system.

7. Complete Feature Breakdown

1. Smart QR Scanning Interface

Note: Fast QR scanner interface with real-time scan history on the side.

• Purpose: To instantly identify a student and record their timestamp.
• Business Benefit: Eliminates manual roll calls; provides undeniable proof of arrival/dismissal times.
• Technical Implementation: Uses html5-qrcode accessing the device camera. The client sends the decoded payload to a Supabase database. Web Speech API (window.speechSynthesis) is triggered on success for audio feedback.
• User Flow: Open /scan → Grant Camera Permission → Hold QR up to camera → Hear audio confirmation → See log update on the right side of the screen.

2. Time-Aware Attendance Modes

• Purpose: Differentiate between morning arrival and afternoon dismissal.
• Business Benefit: Solves the critical issue of tracking exact pickup times for young children.
• Technical Implementation: The system checks the current time against a jam_pulang configuration stored in Supabase. It automatically toggles the scanning logic and UI state without manual intervention.
• User Flow: Teacher sets "Switch to Dismissal" at 12:00 PM → Before 12:00, scans register as 'Hadir' → After 12:00, the UI turns Violet, and scans register as 'Pulang'.

3. Comprehensive Dashboard & Manual Override

Note: Interactive monitoring Dashboard to view daily/monthly attendance statistics and perform manual overrides.

• Purpose: Allow teachers to view daily stats and manually input attendance for children who forgot their QR cards or are absent.
• Business Benefit: Provides flexibility; the system remains usable even if physical QR cards are lost.
• Technical Implementation: A highly interactive React component utilizing state to filter data. Modals and inline-editing allow updating a student's status (Sakit, Izin, Alpa) and adding textual notes.

4. Excel & PDF Report Generation

• Purpose: Export data for archiving and offline processing.
• Business Benefit: Saves administration staff hours of manual tallying at the end of the month.
• Technical Implementation: Uses the xlsx library to format JSON data into multi-sheet Excel workbooks, and custom logic to generate printable PDFs for the QR codes.

5. Student Data Management (CRUD)

Note: Comprehensive student data management page with Create, Update, and Delete features, alongside QR code generation.

• Purpose: Manage the student database centrally and efficiently.
• Business Benefit: Makes it easy for admins to update data without managing external files or separate spreadsheets.
• Technical Implementation: Full CRUD operations integrated with Supabase. Automated QR Code generation triggered instantly upon new data creation.

8. User Journey

9. Technical Architecture

• Frontend: Next.js 16.2 App Router serving as the React foundation. Client Components ('use client') handle stateful UI like modals and scanning, while Server Components fetch initial data.
• Backend: Next.js Server Actions execute server-side Node.js logic securely. No traditional REST API routing is necessary, reducing boilerplate.
• Database: Supabase (PostgreSQL) hosted in the cloud.
• Authentication: Supabase Auth issues JWTs stored in secure cookies, validated by Next.js Middleware on protected routes.
• Data Flow: Client triggers Action → Action securely queries Supabase → Action returns mutation result → Client triggers router.refresh() to fetch the new Server Component state.
• Security: Database is locked down via Row Level Security (RLS). Only authenticated requests carrying a valid JWT can select/insert data.

10. Lessons Learned

Demonstrated Engineering Knowledge:

• Deep understanding of the Next.js App Router paradigm, strictly separating Server and Client boundaries.
• Mastery of modern CSS and responsive design principles, prioritizing Mobile-First UX.
• Proficiency in leveraging BaaS (Backend-as-a-Service) like Supabase to accelerate MVP delivery without sacrificing relational data integrity.

Areas for Improvement:

• Component Granularity: Realized the danger of letting Client Components grow too large. Future projects will enforce stricter component modularity from day one.
• Client vs Server Trust: Learned that business logic (like timestamping attendance) must exclusively live on the server to prevent data tampering.

11. Business Impact

• Time Saved: Reduces a 15-minute morning attendance routine to under 2 minutes. Saves administrators over 10 hours of manual spreadsheet compilation at the end of every month.
• Operational Efficiency: Provides undisputed, exact timestamp records of when a child is handed over for dismissal, eliminating parent-teacher disputes.
• Cost Reduction: Eliminates the need for physical ledger books and dedicated fingerprint hardware.
• Brand Image: Elevates the school's reputation as a premium, technology-forward institution.

12. Why This Project Matters

This project demonstrates my ability to architect and deliver a complete, end-to-end SaaS product independently. It showcases not just code-writing abilities, but strong product management and UX design sensibilities. By identifying a real-world bottleneck—school attendance and child security—and crafting a tailored, highly polished digital solution, I proved my capability to bridge the gap between technical engineering and tangible business value. The integration of edge-case features, such as Web Speech API for hands-free audio feedback, highlights a deep empathy for the end-user (teachers) that goes beyond basic CRUD operations.

13. Technical Highlights

• Time-Aware UI/UX: The scanner automatically switches context (Arrival vs Dismissal) based on a server-synced clock, seamlessly changing database mutation targets and UI color schemes without user intervention.
• Adaptive Responsive Design: Transforming complex desktop data tables into highly readable, stacked mobile cards using pure CSS/Tailwind, ensuring zero degradation in UX for mobile users.
• Zero-Friction Hardware Integration: Utilizing HTML5 WebRTC APIs to access device cameras for barcode scanning directly in the browser, bypassing the need for native App Store deployments.