My attempts at frontendeval components
November 1, 2022
How it started
In mid-2020, I took a career break that I used to search for and open a business in the food and beverage industry with my fiancée. It took us a bit more than a year, but we ended up opening a catering business in our neighborhood that is getting very popular. Here is a link for curious people; however, I might write a separate blog post about it one day.
Anyway, while we were in the process of getting a lease, a loan, buying equipment, recruiting people, managing builders... I also planned to get back into software engineering, and I took time aside to freshen up and update my skills.
I had already done some CS fundamentals work by doing many exercises on Leetcode;. At the same time, those are essentially good for interview preparations. They were also valuable in sharpening my brain, reviewing algorithm fundamentals, and discovering new ones, especially dynamic programming.
Now that I was ready for the CS fundamentals part, I wanted to brush up on my front-end skills and, more specifically, React knowledge.
That's how I discovered a fantastic website called frontendeval, a collection of components specifications with wireframing and requirements. There is a recommended time for each exercise, so the goal is to release a functional component in that time.
I have worked on pretty much all of them, using the latest specifications of React, and even getting the help of a former FAANG tech lead to review my code.
Each component will be listed with 3 links :
- The frontendeval wireframes and specifications.
- My github repo
- A working deployment link
Snake
This is the classic snake game we all played on the Nokia 3310. It was extremely challenging to have a working game under 150 minutes. This was an excellent opportunity to perfect my knowledge of reducers and setTimeout tricks. I still got an unsolved issue with the reducer; if you try to change many directions too fast, you can get the snake crashing on itself.Frontendeval link
Wordle
I really enjoyed that one, as I still play it from time to time. I saw many attempts at reverse engineering this game online; the beauty of it is that its specifications aren't hard to understand, nor that hard to implement, but the gameplay is very addictive.
This was also an excellent opportunity to use the grid CSS feature.
Selectable Grid
This one didn't require a ton of code but was definitely more mathematical. This component requires a pen and paper to get right, and it was nice to guess how those selection libraries can be made under the hood.
Also, an excellent opportunity to use the grid CSS feature.
Job board
The job board was an excellent component to practice data fetching and caching and was also fun because I love hacker news, and it was a good opportunity to use their API.
Crypto converter
The crypto converter isn't a sexy component, no fancy CSS here, but the main difficulty was handling the setInterval logic to fetch new data, which requires a good understanding of React internals if you don't want to end up with stale data.
Rolling dice
A fun little game, the logic was trivial, but I had to use some CSS creativity to design dice in under 60 minutes.
Memory game
This game was fun to develop. It's a classic we all played younger (I remember playing one version on game boy). It was an excellent excuse to use a reducer since they always go hand to hand with gaming logic. Once again, not that hard to develop, but it will require you to take a pen and a piece of paper if you want to finish on time.
Data fetching and visualization
We all use libraries to display our data, so coding a data visualization component from scratch can be an excellent way to learn what you don't have to code most of the time anymore. Once again, this one was pretty easy, but it's a real challenge to finish it in 40 minutes without being confused. It was also heavier on the CSS side.