Karate Learning Platform

This project was created for my family’s karate school. The main goal is to provide a video learning platform where students can learn and practice karate techniques.

I am constantly adding new features. I divided the project development into 3 main phases:

Phase 1: Landing Page

The first phase was to create a landing page for the school. The landing page includes information about the school, the instructors and testimonials. There is also an about page, a frequently asked questions page and a contact page with a form and a map.

For this phase I could have used any static site generator or even a no-code tool like Webflow. But I decided to use SvelteKit since the beginning because I need to add more dynamic features in the next phases.

This phase is already done and deployed to karatefenix.com.

Phase 2. Blog and Classes page

The second phase consisted on adding two more sections to the website: a blog and a classes page.

The blog is used to share news and articles about karate. I used Directus as a headless CMS to manage the blog content.

The classes page displays information about the classes. And there is also a schedule page that displays the classes in a weekly calendar.

Throughout the whole project I have been using Figma to design the UI first, I end up changing the design a lot but it helps me to have a clear idea of what I want to build.

Phase 3. Video Learning Platform

The third phase is to add a video learning platform where students can learn and practice karate techniques. This is the main feature of the project.

Each student will have only access to the videos of the techniques of their current belt. The videos will be organized by belt and by category. For example, the yellow belt will have access to the yellow belt videos and the white belt videos. The videos will be organized by category, for example, kihon, kata, kumite, etc.

I also want the theming of the website to change depending on the belt of the student. For example, if the student is a yellow belt, the website will have a yellow theme.

I am still thinking about where to host the videos. I am considering using Vimeo, Youtube, Cloudinary or Mux.

The other thing I am still thinking about is how to handle authentication. The platform is only for students of the school (at least for now) and it’s gonna used by people of all ages so I need to make it as easy as possible to use. I’m not sure if I should use social logins, email and password, or something else like magic links. Also, for the registration I don’t know if a form makes sense or if I should provide a way for the instructors to create the accounts.

Tech Stack

• SvelteKit for the frontend. Great choice for this project. It has a great developer experience and it allows me to create static pages and dynamic pages with server side rendering.
• TailwindCSS for the styling with DaisyUI. I love TailwindCSS and I use it all the time. I decided to use DaisyUI because it has some nice components and it’s easy to customize.
• Supabase for the database, authentication and storage. Supabase is a great tool. It’s easy to use and it has a great developer experience. It provides a PostgreSQL database, a lot of authentication methods and a storage service. Right now I’m under the free plan but I’m considering upgrading to the paid plan in the future to get more storage and some other features like image transformations.
• Directus for the headless CMS. I needed an easy to use CMS for the instructors to manage the data. I wanted to use an already built CMS instead of building my own because I didn’t want to spend a lot of time on this. I needed something that I could connect to Supabase and Directus was the best option. The downside is that Directus cannot be hosted in a serverless environment at the moment, so I am hosting it on Railway at the moment but I want to explore other options in the future.