A few weeks ago, I heard of the Hashnode x Netlify hackathon. I hadn't really participated in any hackathon back then, so I thought I could give it a shot. Why not? It should be easy!
Boy was I wrong.
I may not be winning this Hackathon, but I have definitely won. I've learned a ton of things from the tons of mistakes I made during this Hackathon.
So here's a quick rundown of what I made and what I learned.
The project: Hanna
Hanna is an analytics app for Hashnode. Designed to be self-hosted on Netlify and running on Github actions, Hanna is free and open-source, forever.
You can check out a demo of my Hanna instance
The tech stack
I used the following technologies to build Hanna:
- Svelte
- Tailwind
- Nodejs
- Netlify
- Github Actions
How does it work?
Fetching the stats
Being a backend developer, this was the easy part. It took me around two days to hack together a script that can set up an instance of Hanna painlessly and another script that fetches the user's stats every hour. All the scripts do are write a JSON file and commit changes, and Netlify takes care of the rest.
The UI
I'm going to make this clear: The UI is a mess.
I made many mistakes while building the UI. Some of them are:
- Not designing the app. I just jumped into the project and started coding.
- Using a weird color scheme. Although there is nothing wrong with it, it made adding 3rd party components a pain. You can still see the contrast issues if you check out Hanna.
- Using TailwindCSS. I'm not a big fan of tailwind, but I wanted to give it a spin to see if it is actually as good as it says. Using it is easy, but maintaining it is hard. It's hard to understand the rest of the code when there is a bunch of classes in your HTML.
Struggles
- First of all, writing the UI was a pain. It took me around 2 weeks to complete the frontend, while it took me just 2 days to finish the backend scripting et al. I really need to step up my frontend game.
- Getting the charting libraries to work was also an issue as the charting libraries' default theme doesn't look too good on the purple.
- Being a bit new to Tailwind and Svelte, development wasn't smooth. But I could manage.
Thank you for reading and thanks to Netlify and Hashnode for this Hackathon. This was a fun learning experience and I was a bit humbled by my frontend skills (or lack thereof)