Background

Brain Teaser Daily is a fun little project originally intended as a single day design challenge. This, however, expanded into a larger project with working functionality and a complete set of brain teasers. It has become a working brain teaser site with a new teaser for every day of the year!

Design challenges

The original intent of the project was to design a retro, 'DS game era' stylised website for a brain teaser site. As I worked on the design, I realised that had thought out and built all the assets required to build the site. This turned out to be a great idea and lead to a fully realised final product.

Programming challenges

The design challenge evolved into a programming challenge. I built it at first with plain HTML, CSS, and JavaScript. But this was entirely client-side, including the teaser data for the year. I wanted this to be a more robust final product, therefore I took the project server-side.

Next.js Rebuild

This seemed like an easy transition but there were a few persistent bugs to squash. Transitioning the design was smooth and simplified the codebase, making it easier to navigate and know what's left to move over. Rather, it was the time based elements that caused the most confusion.

Because the site is self-hosted on a VPS, the location of the server is in Singapore. Instead of Australian time, I now was using Singapore time. This was an issue because I was previously using client based time to pull the correct data. To solve this issue, i switched to checking the UTC time and adding the time difference to correct it to my home city of Sydney.

Another issue was extremely simple but easy to miss when new to working server-side. The date checking function was ran once during the site's build process, but then never again. This was fine during development when it was constantly hot-loading the new constants. But doesn't work on a live site expecting to deliver accurate data. To fix this, I used a server-side prop so the data refreshes every time a client loads the page. Now they receive accurate data and the server isn't refreshing it when there are no clients to view it.

Outcome

The final product is a feature complete daily brain teaser site for users to challenge themselves and their friends. It was a great decision to take it beyond only a design challenge, as it lead to a much better understanding of server-side programming and time based bugs.