By
@vividsystem
The code for the Jus’study YSWS with a custom shop, a new and very mathematically cool voting and ranking system (Wang-Ling Bayesian), a custom review system, integration with a new anti-fraud dashboard from Hackclub HQ and tons more! Join #jus-study
After starting out with a score of a measly 47/100 for performance. I managed to almost double it in the end to 88/100. It is, of course, still not close to perfect, but considering this is using react I am pretty happy. (That is why my personal site uses SolidJS and scores in the high 90s)
The theoretical ceiling for raw load times in this case would not be much higher. Unfortunately #nest where I am hosting the demo makes it impossible to actually use some of the performance optimizations I have added (like gzip compression for html,js, etc.)
This is another performance optimization I have started using. Often used routes cache their api returns to make sites load almost instantly. I am still working on this, but won’t have time to completely finish this before hackclub ends.
2h 37m 31s logged
6h 27m 59s logged
Caddyfile. My whole file compression thing doesn’t work because I don’t have access.
Our blocking times are down to <100ms. That IS FAST 
. (Stardance has about 11x that)
Oh and once you are actually on the site, performance gets better too! I have implemented preloading and caching for most of the often visited parts of the site!
How I actually achieved this:
2h 29m 28s logged
7h 12m 50s logged
Getting everything to work on Nest as a demo was tricky but I hope it works now. The biggest challenge by far was getting everything to a production-level grade. I have never had a project that would have many users so adding observability etc. was something new
4h 58m 43s logged
Finishing touches and making it deploy.
9h 46m 26s logged
I am not finished yet, but I am overhauling the entire observability structure. It is way overkill for this small ysws but I wanted to try anyway.
The observability stack will now use OpenTelemetry with Grafana Alloy as a Collector. That then gets forwarded to Loki, Prometheus and Tempo. This will enable fancy traces and super cool metrics.
4h 8m 8s logged
Learning no. 1 of the day: Writing safe database queries with no race-conditions is really hard.
Most of the fixes today where fixing some database/transaction related things. I also added a way to validate environment variables on start up since with the sheer amount of variables now it seems necessary.
I am really happy with my current “use AI to review” workflow. I am actually learning quite a bit about how transactions work etc.
4h 53m 4s logged
3h 31m 51s logged
8h 50m 36s logged
10h 0m 50s logged
6h 7m 52s logged
7h 19m 21s logged
9h 5m 39s logged
I am currently reworking the entire way time is tracked for jus’study. Beforehand the time was tracked in the devlog database table. This now introduces a bunch of problems if you want to for example alter that data. Because of that the idea is to move to a design that I call “time ledger”. Basically any “event” like adding a devlog adds a duration (can be negative to subtract). This way it is way more extensible. Oh yeah and I made an integration for hackatime oauth. Right now I am trying to write sql-migrations so that I can migrate to the new database schema without deleting everything.
4h 33m 46s logged
Today I finished up the review redesign and added a project-lock feature. I have never been so frustrated with React like today. The dialog you can see in the screenshot was a pain to get working using the <dialog> tag. React for some reason doesn’t implement the button attributes necessary for opening and closing dialogs without javascript. And the way state is controlled for dialogs in React sucks and I had to use refs.
8h 16m 18s logged
I started redesigning and refactoring the review panel. The previous UI was AI generated and looked bad. To be quite honest I don’t really like the Jus’Study theme so far so I tried making the best of it with the review panel and actual put some thought into the design. In the next couple of days I will try to add some more features as well to make the update not only cosmetic. I might look into AI for this in the future, but I find my human-written code to be more aesthetic (when I am trying atleast)
1h 0m 36s logged
added a little “My orders” page so participants can have a look at their orders
3h 23m 46s logged
I finished the new shop item variant system. Admins can now create new options on already existing items or create new items with multiple options. I also updated the item buying page to let the user select (see below)
11h 17m 21s logged
I added a shop managment panel and am currently working on adding shop item variants so users can e.g. select different colors for an item
As always the backend is way nicer to work with than the frontend. I hate react
