Muay Thaideas: A Roundhouse Kickstart

JJB9922 — Mon, 20 Nov 2023 00:34:22 +0000

https://github.com/JJB9922/MuayThaideas/

Introduction: No Thoughts, Head Empty

No thoughts, head empty; the only reason I decided to put this app together in the first place.

For those of you who also enjoy recreationally getting punched in the head, you may also have had the joy of standing in front of a punching bag throwing shots/combinations at random while your mind drifts to thinking about whether 2 bears could beat a gorilla in a fight... (They definitely couldn't)

The point of Muay Thaideas is to min-max bag work by providing both structure and content to the training. Almost like having a virtual coach feeding you stuff to try out and practice (without the ~~benefit of~~ verbal abuse in the mix).

The Project

The initial idea for the app was super simple, pretty much CRUD without the CUD - I'd leave that to feed the cows.

A user could set up a workout by inputting their overall workout time, round time and rest time. The app would grab a combo from a pre-built array, display it, hide it for the rest period, then display a new one on the next round.

However, while looking at the actual design, some new features creeped in that would be useful and justified.

Ability for user to add their own combinations,as well as sorting by beginner/advanced. This would open the app up to fighters at a range of skill levels, and could help those with injuries or disabilities be picky with their session.
Ability to import/export a user database. If a team is using the app, or friends who are comfortable in a similar style, they could workout to the same plan. This might be especially powerful leading up to a fight - a fighter knows what gameplan they need to execute, so they can dial in and work those combinations whenever they get free time for bag work.

A (Somewhat) Non-Technical Overview

Building this app went without a hitch for the most part. Reaching MVP took about 4 evenings after my normal 9-5, Usually building from 6-8pm until ~1am.

I started by generating a colour palette, designing the UI as and when necessary - since I was expecting the app to be so small, there were no wireframes involved. This was probably a step I shouldn't have skipped, as having stared at the app for 20+ hours now, the small inconsistencies and imperfections are sticking out like a sore thumb.

The main 4 pages in this app are the home screen, the combo list, the workout setup and the workout itself. Getting the combo list working was the first hurdle - having not used React Native before and trying to integrate it with SQLite was an interesting challenge. Was SQLite the best choice? Potentially... However I like the idea of a "combination marketplace", so perhaps something like MongoDB could have been employed to leave room for an even better method of sharing combinations.

As for the workout screen itself - I do see space for a video/gif player. There's a Muay Thai instructional by Jean-Charles Skarbowsky, and one really nice detail is that after he details a combination, he shows a clip of the exact combination being used effectively in a professional fight. This visual concept could highly empower the built-in combinations.

Visuals

These screenshots are taken from the app as of November 20th 2023.

Technical Details

Initially, I debated between Kotlin, Flutter and React Native. Having some experience with React from an excellent course, as well as building an internal tool for my job in React, it seemed like a great idea to try React Native. This came quite naturally, as Native is very similar to React, with setting up a screen being as easy as wrapping some content in a <View> component. Other components also baked into react native such as <Text>, <TextInput> and <Button> make prototyping a breeze.

The CSS-like styling is also simple to use, making UI design and testing easy enough.

For building and deployment, Expo was a dream - fast reloads for previewing, the ability to flip between web and android via hardware or an emulator, and even handling building of APKs through EAS - perfect for this small project. Expo also has it's own set of well-documented packages available for use, making things like using Android's file system for a built in SQLite database easy.

Homepage

Simple - two buttons and a navigation container dealt with by react-navigation.

Combo List

The first portion of this was setting up the SQLite database. This is split into two parts: the user and built in databases. The user portion just generates a .db file, and contains all of the CRUD operations as separate functions.

Different buttons are linked to these so you can create combinations, read and output them as a list, update their names and delete them. This is also where import/export is handled - which simply uses the expo filesystem to push out and pull in .db files, replacing whatever was there before.

The built-in database is much simpler - it uses filesystem to download the built-in DB from the app's assets folder, then uses a basic SQL query to print them out.

Workout Setup

This is where the user sets up their Workout - in case you hadn't guessed. This is simply a set of buttons, toggles and text boxes - each parameter set here is then pushed over to the Workout screen.

Workout

Most of the logic goes on here. A couple of timers tick down, with the round timer being switched with the rest timer as it hits 0, and vice versa.

The combination visual works by putting the selected database combinations into an array, then using a random number to select an index in the array.

The rest is quite simple - a pause/play which will stop/start the timer ticks, a skip feature which allows the user to instantly set the current round/rest timer to 0, an extend rest function which allows the user to add 10 seconds to the current rest timer, and a cancel workout button which returns the user to the set up page.

Future

Aside from the additional features already mentioned, I don't think this app needs to be overcomplicated - it does exactly what I needed it to and I can't see it becoming obsolete anytime soon.

However, the code is all open source - if anyone has ideas, I'll continue maintaining the repo, looking at PRs, etc.

Depending on how large the user base grows, hypothetically, it would also be cool to have a hub for uploading combo databases. This could even separate by sport - boxing, karate, TKD - anything that involves drilling could make use of the system. If users were able to head somewhere and grab, say, a largely populated advanced boxing database, that would be very cool.

Another interesting idea for me is logging - having the app log how many workouts you've done, display statistics, maybe even some sort of achievement / badge system. Gamifying anything always turns out to be a great motivator in my case, and I'm sure it wouldn't be a feature that goes unappreciated!

All said, please feel free to poke around the codebase and make the app work for you however you'd like to :) The GitHub does have a few releases attached where you can download and run the APK on your own Android device!

https://github.com/JJB9922/MuayThaideas/releases
Discord: LesGretsch

Acknowledgements

Thanks to @menilek for giving the push to attach a blog to this project :) Do follow if you're interested in blogs from an experienced full-stack engineer!

DEV Community: JJB9922