I’M SHIPPING IT

First of all, I know that I haven’t been putting much effort into my devlogs recently. I prefer to work in silence and talk about my work once it’s finished.

Some context

Earlier this month, I created “HackClub Happiness Meter API” for the YSWS RaspAPI. The problem is that nobody used it. Probably because it’s an API, and most people don’t have an API client at arms reach. So I decided to create a frontend for it.

Why react?

Why not? I already knew a bit about React, and this was the perfect opportunity to learn a more. However, having now made the API (backend) in Go, I realized that I hate React(and for that matter web development in general) with all my heart. Backend development is much better. If I ever need to make a front end again, I’m absolutely vibecoding it.

Storytelling

There isn’t much to say here. The main difficulties I encountered while developing this app were::

• The design(thanks Tormentika, you saved the aesthetics of this project).
• Not getting my IP blacklisted address by Cloudflare.

For the sake of the story, I’m going to say a little more about the second one, adding a touch of ‘storytelling magic’ (just note that this happened at 11 pm Spanish time and I hadn’t slept enough):

At the time, I was trying to implement the Status feature. What I didn’t realize is that if the function that fetches the state is inside of a React component, it will be called every time the component is re-rendered. If the status feature then changes something in that component (which it absolutely did), it creates a loop that constantly requests the status from my API. On top of that, when my API rate limits my IP (I’m very proud of that rate limiter I put there for the extra points in Raspapi), it sends back a 429 (as it should), and for reasons unknown, the Status feature fetches faster. I’m talking about dozens of requests per second. Thankfully, I was able to stop it and fix it before Cloudflare had to step in and block me.

Extra help

I’m terrible at design. You can see how bad the design was in the previous devlogs. So, thank Tormentika for telling me which colours to use where! Another day survived without having to learn colour theory!

Enough talk. GO TRY IT NOW
https://happinessmeter-frontend.javim.dev/

Better new entry + small changes.

UPDATE: New Stats page, Happiness Friend now works, the layout adapts for mobile, status on the header(status and stats update every 30s).

I still have to clean up everything and add error messages. But it looks great.

While making writing the status feature I accidentally made a loop. At least I know that my rate limiter works :)

If anybody has any suggestions please tell me, especially about the design(I’m bad with colors).

Great progress! Rewrote fetch related functions to be asyncronous. Implemented error message when the user inputs wrong auth credentials. Now there are three auth states: unauthed(not logged in), bad-authed(wrong credentials) and authed(all good) and profile, auth and entry display messages according to that state. Entry displays a message when an entry is submitted(and 200 is sent back from the user). Added more info in Intro. Reordered grid(I still have to fix that a bit). Getting closer to release!

Lots of progress!! I added images and links to the info components. Also, profile works better and newEntry works too!

Built the basic skeleton of the web page plus some basic fetch to the API using user provided credentials. The Auth logic works but still needs error messages, same for the profile area. Everything is still in a very early stage.