An educational web application designed to help children learn and practice Indonesian pronunciation through interactive media, gamified lessons, and speech recognition technology.
Tech Stack
- Laravel 8 – Backend framework with MVC structure
- Blade Templating – Server-side rendering for dynamic content
- MySQL – Relational database for user progress and content management
- Bootstrap 4 – Responsive and child-friendly UI components
- JavaScript + jQuery – Frontend interactivity and animations
- Web Speech API – Real-time speech recognition and pronunciation feedback
Key Features
Structured Learning Path
- 4 Progressive Levels:
- PRA-TK (Pre-Kindergarten)
- TK-A (Transition to Kindergarten)
- TK-B (Kindergarten to Elementary)
- RD (Reading Development)
- Visual progress tracking with completion badges
Interactive Speech Practice
- Real-time pronunciation assessment using Web Speech API
- Instant visual feedback on speech accuracy
- Audio comparison between student and model pronunciation
- Repetition exercises with scoring system
Gamified Learning Experience
- Colorful, child-friendly interface with engaging animations
- Reward system with stars and achievement badges
- Interactive exercises with drag-and-drop and voice recording
- Progress tracking with visual indicators
Teacher/Parent Dashboard
- Monitor student progress across all levels
- View pronunciation accuracy reports
- Track time spent on each exercise
- Identify areas needing improvement
Technical Implementation
- Custom Laravel Authentication – Multi-role system (students, teachers, admins)
- Responsive Design – Works on tablets, laptops, and desktop computers
- Audio Processing – Client-side audio recording and server-side storage
- Progress Tracking – MySQL database storing user scores and completion data
- Interactive UI – jQuery animations and Bootstrap 4 components for engaging experience
Impact & Results
- Successfully deployed as final year project with full functional implementation
- Tested with actual users receiving positive feedback on engagement
- Proven effective for early childhood pronunciation practice
- Modular architecture allowing easy addition of new content and levels
This project demonstrates the ability to create engaging educational technology that combines pedagogical design with modern web development principles.