{"id":59,"date":"2018-08-09T23:43:45","date_gmt":"2018-08-09T23:43:45","guid":{"rendered":"https:\/\/www.antpace.com\/blog\/?p=59"},"modified":"2025-08-25T13:52:57","modified_gmt":"2025-08-25T13:52:57","slug":"bjj-tracker","status":"publish","type":"post","link":"https:\/\/www.antpace.com\/blog\/bjj-tracker\/","title":{"rendered":"BJJ Tracker, a Fitness App"},"content":{"rendered":"

www.BJJTracker.com<\/a><\/p>\n

BJJ Tracker is a fitness app for tracking Brazilian jiu jitsu training<\/a>. It’s the sort of fitness app I was looking for, but couldn’t find. Version 1.0 is a bare bones MVP<\/a>, but has a list of features on the way. Future versions will add gamification (including challenges and goals), UX\/UI enhancements, training recommendations, and more.<\/p>\n

The app allows users to record their training sessions, with details about drilling and sparring, as well as competition. This data is visualized over charts and calendars. The idea started from physically writing my training sessions onto an actual calendar, with a minimum goal per week. Building it has been a great exercise in digital product development, software design, and UI\/UX strategy.<\/p>\n

\"fitness<\/p>\n

Software<\/h2>\n

BJJ Tracker is a web app, hosted on a AWS Linux server, running Apache, PHP, and MySql. I used Initializr<\/a> to generate a bootstrap template to get my front-end started. One goal of this project was to build a web app framework that I could use to quickly get future projects running. This code would include user registration and login services, as well as other back-end concerns, on top of a front-end. I\u2019ve cleaned most of this code into a generic repo on GitHub<\/a>. You can read my post explaining its features<\/a>.<\/p>\n

Design<\/h2>\n

This app was designed with \u201cmobile first\u201d in mind, assuming that most users will be on a smart phone. The look and feel of the color palette, font-choice, and UI layout took some experimenting and visual research. It\u2019s not final, and will be subject to split testing over time. I used Font Awesome<\/a> to add icons as visual cues, giving the app a more finished look. The three lined (hamburger) menu in the top right comes as standard UI, using Simple MobileMenu<\/a>, a jQuery plugin. Other UI elements include a top status message, and \u201cIn-Your-Face\u201d status message, both of which are custom built notifications that I’ve wrapped as javascript plugins<\/a>. Having a calendar section was important to me, and I consider to be a primary feature of the app. I use Full Calendar<\/a> to generate the full month view. The homepage (dashboard) focuses on a week view. Google charts is used for the \u201ctechniques\u201d graph.<\/p>\n

\"logo<\/p>\n

The logo is a work-in-progress. The textual part was easy – pick a font, add a sharp outline, and a drop shadow. I always start with a 1024×1024 canvas. The symbol begins with simple shapes, triangles and circles. I left this process for last, saving my focus for the actual product. This allowed me to rapidly iterate design versions, and see how it would look directly in the user interface. Below is the current portrayal – and I’m excited for next versions.<\/p>\n

\"BJJ
BJJTracker.com<\/figcaption><\/figure>\n

Full Calendar<\/h2>\n

Fullcalendar.io<\/a> has been my go-to solution for adding Calendars to websites. It’s free, and only needs two file references<\/a> to work (a CSS file and a JavaScript file). You can host those files your self, or use a CDN. And, the UI is easily customized with a bit of <style> code:<\/p>\n

<!-- <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fullcalendar\/3.9.0\/fullcalendar.min.css\" rel=\"stylesheet\"> -->\n<link href=\"\/css\/fullcalendar.min.css\" rel=\"stylesheet\">\n<style>\n#calendar {\n    margin: 0 auto;\n    width: 100%;\n}\n#calendar h2{\n    font-size: 18px;\n}\n.fc-scroller.fc-day-grid-container{\n    height: auto !important;\n}\n.fc-button{\n    padding: 5px !important;\n    outline: none;\n    border: 1px solid #2176AE;\n    background-color: #2176AE;\n    color: white;\n    text-align: center;\n    box-shadow: 1px 1px;\n    border-radius: 6px !important;\n    background-image: none;\n    text-transform: capitalize;\n    font-size: 12px !important;\n    height: 25px !important;\n    margin-left: 5px !important;\n}\n.fc-state-disabled{\n    display: none;\n}\n<div class=\"ap-container top-ap-container\" > <div id='calendar'><\/div> <\/div>\n\n<script src=\"js\/vendor\/moment.min.js\"><\/script>\n<script src=\"js\/vendor\/fullcalendar.js\"><\/script>\n<!-- <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fullcalendar\/3.9.0\/fullcalendar.js\"><\/script> -->\n\n<script>\n\n$(document).ready(function() {\n\tvar date = new Date();\n\tvar d = date.getDate();\n\tvar m = date.getMonth();\n\tvar y = date.getFullYear();\n\tvar eventsArray = [];\n\t<?php\n\tif(!$view_record_response[\"record_not_found\"]){\n\t\t$all_record_rows = $view_record_response[\"all_record_rows\"];\n\t\tforeach ($all_record_rows as $key => $value){\n\t\t\t$record_date = $value['date'];\n\t\t\t$record_type = $value['type'];\n\t\t\t$rid = $value['recordid'];\n\t\t\t$nameOfDay = date('D', strtotime($record_date));\n\t\t\t$nameOfDay = lcfirst($nameOfDay);\n\t\t\t$color = \"\";\n\t\t\tif($record_type == \"competition\"){\n\t\t\t\t$color = \"red\";\n\t\t\t}\n\t\t\t?>\n\n\t\t\tvar event = {\n\t\t\ttitle: \"<?php echo $record_type; ?>\",\n\t\t\tstart: '<?php echo $record_date; ?>',\n\t\t\tend: '<?php echo $record_date; ?>',\n\t\t\tcolor: '<?php echo $color; ?>',\n\t\t\turl: \"view-record.php?rid=<?php echo $rid?>\"\n\t\t\t}\n\t\t\teventsArray.push(event);\n\n\t<?php\n\t\t} \/\/end foreach\n\t} \/\/end if\n\t?>\n\n\t$('#calendar').fullCalendar({\n\t\teditable: false,\n\t\tevents: eventsArray\n\t});\n});\n<\/script>\n<\/pre>\n
You can see I get the back-end data through my PHP code (view_record_response<\/em>), and pass it along on the front-end (eventsArray<\/em>) to FullCalendar.<\/p>\n
Challenges and next steps<\/h2>\n
One goal of this project was to get started fast, so people could begin using it. Deciding what to include out of a long list of ideas proved challenging. I could have kept adding features, and never been ready to make the site public. I meant to keep functionality basic, but still wanted the thing to be useful. The design needed to be simple, yet still had to look finished. I won\u2019t know how close I came to getting this right until I analyze user feedback. The real plan is to do a little bit better next time, and to keep iterating. Using this as foundation will let future ventures start a step ahead. Already, I’ve begun implementing updates, and getting ready to deploy to the App Store and Google Play. Look out for coming updates and other products that are in the works! Don’t forget to visit the BJJ Tracker blog<\/a>.<\/p>\n
\"bjj<\/p>\n","protected":false},"excerpt":{"rendered":"
www.BJJTracker.com BJJ Tracker is a fitness app for tracking Brazilian jiu jitsu training. It’s the sort of fitness app I was looking for, but couldn’t find. Version 1.0 is a bare bones MVP, but has a list of features on the way. Future versions will add gamification (including challenges and goals), UX\/UI enhancements, training recommendations, … <\/p>\n
Continue reading “BJJ Tracker, a Fitness App”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,5],"tags":[17,37,50],"class_list":["post-59","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-web-development","tag-bjj","tag-design","tag-fitness"],"_links":{"self":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":1,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":3136,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/59\/revisions\/3136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media\/3135"}],"wp:attachment":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}