Basement Challenge
The basement.studio front-end challenge. You can check out the GitHub page for the detailed description, but here is a summary:
The goal is to implement a responsive e-commerce website consuming a mock API, which has to be future-proof since it will be swapped with a real API later on. The design file is provided by the client, and the only requirement is to implement it as closely as possible.
The cart items are persisted through page reloads, and it should let the buyer select the amount and size of each item. Since the checkout is not implemented, printing the ticket is enough.
Purpose & goal
Basement has been a big inspiration for me, I love their quality of work and how polished their websites are, and they set the bar pretty high for the future of the web.
As far as I know, this challenge would be ideal for a Junior with experience or Semi Senior developer, but I wanted to give it a try and see how far I could get.
After a few days of work, I was able to implement the whole design, and I'm pretty happy with the result.
Stack & Explanation
The goal was to implement the design as closely as possible, keeping in mind the responsive-ness of the text and elements. To make this a little easier, they suggested using vw units, which I didn't know about.
One of the challenging parts was the Hero section. Keeping everything together while resizing the viewport was a headache, since floating elements are hard to align and resize. For the marquee effect, I used react-fast-marquee, a library that I've used before and works great for this kind of stuff.
The cart was another challenge, since it had to change half the layout between desktop and mobile view. I used Radix's Dialog component to make it, since it works perfectly for this use-case and keeps the accessibility on check.
I coupled everything together with Zustand to manage the state, allowing me to access a simple global state to keep the content and update items from anywhere in the app.
What I learned
I enjoyed a lot working on this project, since it's a design that I would have never tried to implement myself and has a lot of cool details.
While working on it, I discovered next-real-viewport, a library made by the guys at Basement to calculate the precise viewport size. I used it to make the mobile cart because Safari has a weird viewport that resizes when scrolling, and it was a pain to make it work.
I also got the oportunity to do my first-ever pull request to fix a missing TypeSript type on one key component of the package, which was pretty cool!