Combat Crafter

Combat Crafter Thumbnail
Landing Page Screenshot
Mobile View Dark Mode
Workouts Page

Inspiration

I have both positive and negative influences that led me into martial arts. It's a great way of using my body, it's a fun, and its a good way to meet people. But having seen the reality of violence, I know first hand how important it is to protect myself and those around me. Its because of these reasons that martial arts has become a big part of my life in recent years. I got into boxing and Muay Thai about two years ago and fell in love with striking. In my pursuit of mastery, one problem I've had is finding structure and high quality training resources. I'd search the ends of the earth looking to figure out how I can get better head movement, footwork, and explosiveness. But there isn't a centralized place to get quality training material.

I've also had a lot of people ask me to train them. I don't think I've ever met somebody that doesnt want to learn how to fight. That desire to be physically formidable is universal.

But the problem for hobbyists and amateurs like me, and also for complete beginners, is that the knowledge of martial arts is not fully democratized. Information regarding technique, training, and growth is still concentrated amongst professional fighters, gyms, and personal trainers.

So I had a thought - What if I made martial arts training more accessible?

I also wanted to work on something that I actually enjoy. So I combined the things I love the most into one project. I love to draw. I love to code. And I love to fight.

And thats how Combat Crafter was born.

What it does

Combat Crafter has a library of techniques, resources, and workouts for progressing as a fighter. It also has AI generated training plans based on a variety of parameters to fit your goals.

How I built it

I had a clear idea in my head of what it was going to look like. I used Procreate and Photoshop for the illustrations. I designed wireframes in Figma to clarify my vision for the web app. Alongside the wireframes I also setup a design system for the colors and typography. Once I had a structure to go off on, I used DaisyUI and TailwindCSS alongside ReactJS to build the front end. For the backend, I used Firebase to hold the data, and the ChatGPT AI to auto-generate workout plans. After all of that was finished, I deployed the app using Netlify to combatcrafter.com.

Challenges I ran into

Deploying the web app without compromising the ChatGPT API Key was pretty difficult. I couldn't leave the key in my .env file without getting an error saying it was undefined.

Accomplishments that I'm proud of

I'm satisfied with the UI and the way it turned out. I'm also really satisfied about the illustration for the head movement page. I think it looks cool.