To make products people use, one needs some frontend skills. Historically, frontend is a weakness of mine and I've been constrained to clunky CLIs and APIs to get what I want to do done. No longer! Last week I sat myself down and read the Svelte and SvelteKit documentation front to back. Since learning in software happens when you build something, I decided to build a leaderboard website for my latest obsession, Yomi Hustle.
You can find the Yomi Hustle leaderboard here.
The Development Toolchain
- Svelte is my UI Framework. I use Svelte to manipulate what is on the webpage at any given time.
- SvelteKit is my Application Framework. SvelteKit chooses what page should be shown to a user and uses Svelte itself for the rendering. Sveltekit provides functionality like routing to show different svelte pages for things like
- Tailwind CSS is a CSS framework that enables you dictate your styling on the HTML elements themselves, without needing to hand write CSS.
- DaisyUI is a UI component library that uses Tailwind to give you pre-styled HTML components for things like buttons, tables, navbars, etc.
To create the skeleton for my project, I followed the setup instructions provided by SvelteKit, TailwindCSS, and DaisyUI. If you want to mimic this setup with simple an
npm i, feel free to clone my Github repo with this skeleton.
When creating the SvelteKit app, I opted into using TypeScript.
Making the Leaderboard
Dynamically loading data is really easy in Svelte. Let's look at how I made the homepage photographed above.
I'll skip over the boring parts of
<Leaderboard /> and show the key bits.
Now let's look at what this mysterious
These pieces together comprise what you see when you visit https://yomi-leaderboards-frontend.vercel.app/. You might have noticed that I am using Vercel for hosting.
It really is that Easy! This writeup is not means to be a tutorial, but just an overview on how I created this dashboard over the course of a work-session one weekend. If you click on any user's name you can see their match history too!
If you have any questions about specific implementation details, reach out to me at contact [at] thornewolf.com. I am looking forward to hearing from you!