Introduction

This was a web app creating during Hack & Roll 2022, with my teammate Jonathan. We were inspired by the popular typing game typeracer (which I’ve spent too much time on). Though we were in it for fun and for the free swag, we managed to clinch a spot in the Top 8. Check out our devpost submission here. I shall try not to echo what has already been said in the devpost and in my teammate’s blog post. Instead, this entry shall focus more on the challenges I faced since it is MY blog after all.

UI/UX

During my first Hackathon (Hack & Roll 2020), I learnt that a good UI automatically makes your app seem 10 times better. That being said, I suck at UI Design and I think many frontend devs face this issue as well. Thankfully there are some things we can do about that.

If You Fail to Plan, You are Planning to Fail.

When creating any app, it’s generally a good idea to plan out roughly what you need to do. This doesn’t just apply to planning what kind of functions or features you need to write, UI is also something you can plan for. Only weeks before this hackathon, I learnt about Figma - a useful tool for UI Designers. It does however have a bit of a learning curve. The draft I came up with was unfinished for sure. But that was the limit of my Figma abilities. Any further design I could’ve probably written css in a shorter time than it took for me to figure out how to operate Figma. I was severely under-utilizing Figma. The draft was far from polished. And my code stil unstarted. This step that I’ve been skipping all my life turned out to be rather important.

The plain, simplistic frames though bare and uncolored served to actualize a design beyond what had been blurry images in my head. They formed a clearer goal of what the frontend should look like. Though it may seem like a waste of time, it eliminated the need for design-related decisions to be made while writing code. No more “I wonder if it looks better centered or aligned?” This ultimately saved me quite a bit of time.

你有东西掉。你的 Standard 掉!!!

I’ve always wondered why my frontend always looks so bad. And not only that. Even though I know it looks bad, I pinpoint why it’s bad?

Turns out, it was my fault. Ok no surprise there, but more specifically, it was the result of multiple bad choices with minor impacts. Colors that were a shade off, fonts that were overly bold and components which were slightly too round. Thankfully, there are design standards that help solve that, and Tailwind helps you enforce it.

This doesn’t mean you don’t have room for customizability. It is definitely more versatile than something like bootstrap. Tailwind also saves a ton of time since lines of css are now merely a few chars long. This means it’s faster not only to write, but to perform rapid trial and error testing (which is how I write css lol). One annoying thing though is that your classnames get really long. However, I do see myself using Tailwind many more times in the future.

React

Run before you walk

Out of the 2 of us, I was the most experienced with React. That being said, it was also only my second React App. So there were many things I didn’t know and many more I still don’t know about react. My first react app was using Next.js instead of the usual create-react-app (I chose Next.js for my first app cause I understood it’s structure better). Given the nature of CAPSLOCK, server-side-rendering (Next.js main selling point) won’t work. This was my first obstacle - understanding create-react-app.

I know it may sound stupid but create-react-app was confusing to me. I tried to learn react on multiple occasions and always got stuck before I wrote a single line of code. After executing create-react-app on the command line, I was lost. Tutorials online usually how to create some trivial single page site which is just copy pasting some code after CRA does it’s thing. So many steps skipped and so little explanation. I didn’t understand how a site was being generated from the files present after CRA was executed, nor did I understand how I was suppose to scale the app beyond it’s starting page. What if I wanted to specify the entry point to a different file? After a couple hours of reading and googling, I found myself even more lost than when I started. This was why I chose to use Next.js for my first React app. The concept of each file being a single page/route something I found appealing and understandable. But you can only run away from your problems for so long. Threatened by the clock, I had no choice but to jump in with unanswered questions.

I know I said planning was important in this same blog post, but sometimes going in blind isn’t all that bad, especially when preparation turns into an obstacle. I did manage to answer some of the questions I had while using CRA. Some questions were still unanswered but didn’t matter. Though I’d eventually wish to know enough about React, Webpack and Babel to do away with tools, I must first conquer the basic tutorials.

It’s Super Effective

To be honest, I still don’t really understand how the useEffect hook in React works. I’m not gonna attempt to explain how I think it works, cause I rather not mislead anyone reading this. Hopefully by the time CAPSLOCK Part 2 is written, I’d be able to provide an explanation for you readers (Yes. That means I do plan on maintaining the app). With the limited time we had in the competition, I didn’t exactly want to waste a ton of time watching videos, perusing blogs and re-reading docs to understand this one thing. But I ended up wasting a couple of hours on it guessing my way to a solution anyway. No one knows whether it would’ve been better to pause dev and learn, but one thing I learnt was not to trust IntelliSense to fix bugs for you.