I have been doing Karate for over 20 years now.

Life has had me move at least four times in the last five years, so it has been difficult to set down roots and open a formal school.

I made a fun video about that back in the day here: https://youtu.be/fp2bIasixbU

Two years ago, I decided to start a website to at least start hosting free Zoom classes and see if I could start teaching people in my area privately.

At that time, I just had the basics of HTML,CSS, JavaScript, a couple of old assets, and you guessed it, React.JS.

Recently, I was finally able to get my schedule to a point to start having Karate classes again, but I decided the old website needed a full refactor.

Today, I’m going to walk you through the tech stack I used for both sites and what I learned along the way.

The Old Site

Back in 2023, for many beginner guides, we were told that npx create-react-app, was the way to go. Though I forgot where exactly I saw how to start a project with React, this is how I started this particular project.

And I ran into a lot of different beginner issues for the frontend.

Here is a nonexhaustive list.Here is a nonexhaustive list.Here is a nonexhaustive list.Here is a nonexhaustive list.

• How do I size this media right?
• How do I center the div?
• How do I link the navigation to other pages?
• Why can’t I just run this on Github pages?
• What is Bootstrap?
• How many CSS folders do I need?

A lot of trial and error went into building this tiny, not perfect looking site.I took the path of using Bootstrap for a majority of the UI components. At the time it felt like cheating because I did not build everything from ground up, like I had in every other tutorial. At the same time, it got the thing off the ground. Hilariously enough, I thought I needed to put the CDN for Bootstrap and download the NPM for it to work.

The hardest part to my memory was figuring out how React Router worked. But it became a very useful boilerplate for later projects to handle the essential routing in React projects. But React Router itself has become a weird hot mess of its own, so I just stick to basic download and routing, and with any hope, those kids can finally figure themselves out one day. If you know, you know.

The stack ended up being the following:

• React JS
• React Router
• Bootstrap 4
• Framer Motion

It was a hot mess, but a functioning hot mess. And for a while, like many functioning messes, especially when you do not know what you are doing and are afraid the whole thing will come tumbling down if you change one thing, I just left it as is. I had plans to make it multilingual with i18n, but those did not come to fruition.

Feel free to view both the site and the github repo here: https://github.com/jebersole13/olddojosite

Then in February 2025, I heard the news that finally Create React App had been deprecated. Instead of trying to knock over this functioning mess, and with lessons learned since the last time I had worked it in 2024, I decided we needed a complete refactor from the ground up.

The New Site

In considering our needs, I decided we needed a way for students to sign up for classes, and to receive emails automatically.

The host we were using, Netlify, has a very handy form submission add-on for free, but it was not going to cut it for our needs.

Additionally, in considering the future of the site, I wanted to use a framework I felt fitted our needs better. But we also needed a proper email system, a database for student records, and lastly, something that was built for content.

This led to Astro.JS becoming our framework of choice. It has a lot of things out of the box I was originally looking for in a framework. For the UI, I went with my go-to CSS framework Tailwind. This is not to say Tailwind is better than Bootstrap, but as my instincts two years ago were, I wanted to build my own UI components. This is a skill I strive to perfect.

For the backend API, I decided to use the trusty Django Rest Framework to communicate with the database. Some might call this overkill. I call it a reliable solution. More on that later. As in my previous post, I am hosting our backend on Digital Ocean, but for our database, I decided I did not want to be in CLI hell trying to see who was signing up.So I chose to have a nice, eyeball-friendly gui with Supabase. And of course, MailGun for our email system. This may look familiar with my last project. Why mess with success?

For obvious security reasons, I am not making the whole codebase available. However, I did create a similar code base here: https://github.com/jebersole13/astrodjangoexample

I decided I wanted to create my own little acronym of Tailwind CSS, Astro JS, Django, and Digital Ocean. So my friends, I give you TADDS! Will it catch on? Probably not. Will I use this stack? Yeah, because it works. Maybe it is as much of a hot mess as the last site. But it works.

The tech stack in the end:

• Tailwind CSS
• Astro JS
• Django Rest Framework
• Digital Ocean Droplet
• Supabase Postgresql Database

The elephant in the room:

Did I use AI? You will never know.

The real elephant: Why not just use Django for the whole site?

There is a legitimate argument here for simplicity by just using Django, with Tailwind, and cutting out Astro JS altogether. Halfway into building this, I was this close to doing just that. I honestly am tempted to rebuild the whole site again from the ground up only using Django. But I wanted to see if I could make this work, and it worked. And still works at the time of writing.

My goal now is to expand out the site’s content more, finally implement the language toggle, and try to make the site look as good as it can.

https://kotekarate.com

If you have read this far, thank you for reading.

Please feel free to drop me a line with any questions, comments, critiques, constructive criticisms, or compliments.

See you next Monday.

Jon