Capture the session.
Members log the training date, choose Gi or No-Gi, and note the technique or position covered. Personal reflections sit alongside the session details.
← Back to selected work
App case study / DISS BJJ
MatLog.
Keep the lesson.
Build the habit.
A training logbook built for DISS BJJ club members. Somewhere to record the session, reflect on what you learnt and return to your coach’s feedback.
Explore the project
- Client
- DISS BJJ, Diss
- Project
- Member training logbook
- Built with
- JavaScript + Firebase
- Created by
- Ben at Counterform
The starting point
Give the details
somewhere to live.
There’s a lot to take in during a Brazilian Jiu-Jitsu class: a new position, a small adjustment, a detail you want to try next time. MatLog gives members a place to write those things down.
After building the DISS BJJ website, I created this companion web app around a simple routine: train, record, reflect and revisit. It brings session notes and coach feedback together in one place.
It’s built for the club’s members and coaches, with separate views for each part of that routine.
The experience
From the mats
to your next session.
Keep the history.
Previous entries appear in training history, with the most recent sessions first. Members can filter by date and edit their entries as they reflect.
Continue the conversation.
A coach view brings the club’s training logs together for review. Coaches can add or update feedback for members to read alongside their own notes.
Under the hood
A focused app.
A connected foundation.
The interface runs in the browser. Firebase handles accounts and stores the training records behind it.
Browser
HTML + CSS + JavaScript
Student and coach viewsFirebase Authentication
Email and password accounts
Cloud Firestore
Profiles, training logs and coach feedback
A responsive browser interface
HTML and CSS provide the layout, adapting the forms and history view to different screen sizes. Vanilla JavaScript handles form actions, loading entries and sending updates to Firebase.
Accounts with Firebase Authentication
Email and password sign-in identifies the user. Their profile determines whether the app displays the student view or the coach view.
Training records in Cloud Firestore
User profiles and training logs are stored in separate collections. Each entry brings together the session date, training type, technique, personal notes and coach feedback.
Direct connections, clear responsibilities
The browser talks directly to Firebase’s authentication and database services. Entries are fetched as views load or refresh, including after updates. GitHub keeps the application source under version control.
The finished tool
Built around
a club’s routine.
MatLog brings recording, reviewing and feedback into one browser-based tool. Members have a structured place for their training notes, and coaches can respond in the context of each session.
The project shows another side of Counterform: building a web app around a specific activity, with the features needed to support it.
An idea for your business or club?
Let’s make it
work for you.
I build affordable one-page websites and individually scoped web apps. Tell me what you’d like people to be able to do, and we can work through the right starting point.
Talk to Ben ben@counterform.uk