Case study
MMA Class Tracker
A small web app that tracks martial arts class attendance with experience points and levels. Progress syncs across devices.
- Client
- Side project
- My role
- Design and development
- Year
- 2023
- Points per classHarder classes are worth more points
- LevelsProgress bars and a new character at each level
- SyncedProgress is stored in Firebase and works on any device
Project overview
My friends and I wanted a reason to keep going to martial arts class, so I built a tracker that turns attendance into a game. Each class you attend adds experience points, harder classes add more, and when the bar fills you level up and unlock a new character.
The front end is HTML, CSS and JavaScript with animated progress bars. Google Firebase stores everyone's progress so the app stays in sync between phones and laptops. It is fully responsive, which was one of the reasons I built it: I wanted practice with responsive layouts.
It is a small app, but it worked. We went to class more often, and the project gave me practice with state, syncing and animation that I still use on client work.
Tools used
- HTML & CSS
- JavaScript
- Google Firebase
- GitHub
- Netlify