As part of a recent interview I did for a frontend developer position, I had to complete a 90min code task. The timer started as soon as I opened the instructions and needed to be a deployable app by the end of the time. It was certainly an interesting experiance coding something so quickly while at the same time having to make design and UX decisions. While the original code can be found on my github (link), I thought it would be fun to recreate it here and have a little go at making some improvements without the time restriction.
When I opened the task, I found the following exercise:
After making a few quick sketches on some idea that came to mind, I quickly jumped into a fresh project of Create-React-App with Typescript and started coding. First task was getting the statements and sentiments in a data structure so I quickly found an API that provided inspirational quotes and fetches it with
useEffect() in the app.tsx. While I fetched the data I added in an id for manipulating the state as well as gave it a 'sentiment' value of either 0,1 or 2.
With the data in place I would then make a ReviewText component that took in the first element of the
unreviewedText and offered a simple UI for marking it correct or incorrect. Once the selection was picked I could then add this id to either the
incorrectText states and remove it from the
unreviewedText. Finally, I could render a list of each of the correct and incorrect texts below the UI for 'review' and make sure that the newly added text was always appearing at the top of the list by spreading the old list behind the new additions.
While I'm going to win any awards for this, I am still quite happy with the results. Mostly that I was able to get something like this scrapped together in 90min from concept to deploy. A lot of the heavy lifting for the CSS and Responsive elements comes down to Material UI which took quite a few of a larger design decisions of fmy hands and made it possible to focus on data structure. There are still some area that I think are missing that I knew how to impliment, such as moving items back and forth between the Correct and Incorrect Lists. As well as animating the UI and lists as items came in.
If I have some time, I will impliment these this weekend...
Thank you for visiting my page, I hope you found something of interest here. As this site is primariliy for my own experimentations and documentation, I'm always thrilled to hear how people experiances it. If you have any questions or comments, feel free to fill out the contact. I m looking forward to hearing from you!
Alternatively, if you would like to follow along with me on some of my other social media platforms, you can find them in the links below.