OpenMat — BJJ Training Tracker

OpenMat — BJJ Training Tracker (Personal Project)

As someone who trains Brazilian Jiu-Jitsu regularly, I used to track my sessions using messy notes and spreadsheets. I wanted a cleaner, more structured way to log sessions, analyse my training habits, and gain insights over time — so I built OpenMat, a simple web app for logging BJJ sessions and displaying training stats.

MY ROLE

Product Designer & Full-Stack Builder responsible for UX, UI, database design, front-end development, and deploying the final product to production.

METHODS USED

User Need Analysis, Wireframing, UI Design, Figma-to-Code Workflow, MVP Iteration.

Problem Identification

I started by identifying a personal pain point: tracking my Brazilian Jiu-Jitsu sessions through scattered notes and spreadsheets. I mapped out the frustrations, defined core user needs, and scoped a minimal feature set—quick logging, viewing training history, weekly/monthly stats, and visualising the Gi vs No-Gi split. This formed the foundation of the MVP and ensured the product stayed focused on solving a real problem.

UX/UI Design in Figma

I designed three core screens in Figma—Log Session, Training History, and a Stats Dashboard. The goal was simplicity, speed of input, and clean readability, especially in a dark UI suitable for evening training contexts. These screens established the interaction flow and visual language for the product.

Figma → Code with Builder.io

To accelerate development, I used Builder.io’s Figma-to-Code AI tools to generate an initial React/Next.js component structure. This gave me a functional scaffold that I could refine and expand manually, speeding up the early stages of front-end development without compromising on design integrity.

Development in VS Code

I built the application using Next.js 16, TypeScript, Tailwind CSS, and the Supabase JavaScript client. This included implementing the session logging workflow, training history, weekly summary calculations, and Gi/No-Gi distribution visualisation. The UI was built responsively to support both mobile and desktop layouts.

Supabase Database Setup

I created a full backend in Supabase, including a sessions table with fields for date, type, duration, intensity, notes, and timestamps. I enabled row-level security and wrote date-based SQL queries to power weekly and lifetime statistics. This provided real, persistent data and enabled meaningful insights for users.

Git + GitHub Version Control

I initialised a Git repository, committed the project in stages, and configured GitHub as the remote origin. After resolving Git Credential Manager issues, I established a clean workflow with branches and commits. This enabled seamless integration with Vercel’s automated deployment pipeline.

Deployment on Vercel

Finally, I deployed the application using Vercel, connecting the GitHub repo for automatic CI/CD. I configured environment variables for Supabase, fixed prerendering and date handling issues, and updated Next.js to patch security warnings. The app now runs in production and is fully accessible online.

UX Strategy — Designing for Clarity & Trust (6).jpg

View website

Outcome

A live, working full-stack application that tracks BJJ training sessions, analyses weekly activity, and visualises Gi/No-Gi distribution — solving a real personal problem while demonstrating end-to-end product thinking.

Impact & Learnings

Turned a personal pain point into a fully deployed product that now streamlines how I track BJJ training.
Demonstrated full end-to-end ownership: problem identification, UX/UI design, development, database setup, and deployment.
Learned the value of tight MVP scoping and rapid iteration across design and code.
Gained practical experience with Supabase for schema design, security, and date-based queries.
Improved understanding of real-world deployment workflows through debugging environment and build issues on Vercel.
Saw how AI-assisted tools accelerate development while still requiring strong refinement and problem-solving.