DIG Capstone · UCF · 2025–2026
Arco
A gamified music education platform teaching children ages 5–11 the basics of violin and music theory through interactive lessons, mini-games, and a physical workbook.
Scroll
DIG Capstone · UCF · 2025–2026
A gamified music education platform teaching children ages 5–11 the basics of violin and music theory through interactive lessons, mini-games, and a physical workbook.
Overview
Most children's music education tools are either too expensive, not engaging, or fail to bridge the gap between at-home practice and digital learning. Young learners need an experience that's fun, age-appropriate, and accessible.
Arco combines structured video lessons, interactive mini-games, and a physical workbook connected via QR codes. Children earn stickers, medals, and unlock rewards as they progress — making learning feel like play.
I contributed to the front-end development, wire-framing the Contact Us, Events, FAQ, and Stickers sections in Figma, and helped with visual design decisions throughout the project lifecycle.
Built across 7 milestones over two semesters at UCF. Progressed from research and prototyping through full front-end and back-end integration, testing, and final deployment.
Screenshots
Tech Stack
Plain HTML, CSS, and JavaScript on the front-end — no frameworks — paired with a PHP + MySQL backend, containerized with Docker.
Features
Video lessons covering violin anatomy, how to hold the bow, string names, the musical staff, note types, scales, and key signatures — designed for ages 5–11.
Interactive games like Match-Em Up, String Surprise, Note Math, and What Comes Next? reinforce lesson content through play at the end of each module.
A virtual violin fingerboard where users tap strings to hear notes and see them appear on the musical staff in real time — no pressure, just exploration.
Medals for completing lessons, stickers from the physical workbook, and limited-time event rewards keep young learners motivated and coming back.
A companion workbook with lesson exercises. Each page has a QR code — scan it to unlock exclusive digital stickers that can't be earned any other way.
A password-protected Grown-Up Corner lets parents set daily limits, restrict content by grade level, view progress stats, and manage the subscription.
A PayPal-powered subscription tier that unlocks advanced lessons, exclusive games, and premium events. Built with PayPal Sandbox API for secure testing.
Full login, registration, OTP email verification, and password recovery flow. Sessions handled server-side with PHP, passwords hashed, credentials protected.
The backend tracks streaks, time spent, lessons completed, and QR sticker unlocks — giving parents visibility into their child's learning journey.
Development Journey
From research to a fully integrated, Docker-containerized application.
Milestone 1–2
Defined the target audience (ages 5–11), identified competitor gaps, and built the visual design guide — including the four-color Arco brand palette, typography system (Poppins + Lexend), icon library, and low-fidelity wireframes.
Milestone 3
Built a full Figma hi-fi prototype covering all screens. Conducted focus group testing with real kids and parents, uncovering critical gaps (missing checkout, lesson page, logout flow) and documented mitigation priorities.
Milestone 5
Translated the prototype into a working HTML/CSS/JavaScript interface. Implemented a modular architecture with reusable frame layouts and dynamic content injection. Added custom video controls, magnetic buttons, and a full asset inventory of 100+ SVGs.
Milestone 6
Built a PHP + MySQL REST API containerized with Docker. Implemented authentication, lesson progress, subscription handling, QR code validation, and PayPal Sandbox payment processing. Connected the physical workbook to the digital platform via Python-generated QR codes.
Milestone 7
Ran 41 comprehensive test cases across navigation, lesson flow, gamification, rewards, parental controls, and Premier Club. 39 of 41 tests passed. The 2 failures were QR-code tests dependent on the physical workbook not yet being printed.
By the numbers
Test cases
Milestones
Team members
Lesson tracks
GitHub commits
The Team
A six-person team working across design, front-end, back-end, content, and testing for two semesters at UCF.
Source Code
The full codebase is on GitHub — HTML, CSS, JavaScript, PHP, SQL, Docker, and everything in between.