I spent most of my time rebuilding the review section layout. The previous structure didn’t match the Figma design well, so I decided to reorganize it instead of patching it piece by piece. A lot of time went into adjusting spacing, alignment, and responsiveness so the layout felt consistent across different screen sizes. It took several iterations to get the hierarchy and overall flow right.
I also refactored some related components to make the structure cleaner and easier to maintain. In addition, I cleaned up parts of the codebase for consistency and readability.
The first image is from the website I coded, and the second image is my Figma design which I designed before turning into actual code lines.
https://github.com/imyetagain/tasteshelf/commit/ff9d0293c72366042cd4ff8d81eba0b271a0b6b2
https://github.com/imyetagain/tasteshelf/commit/cd8a7a16170ac6ac38e92cc98fb9baebd8610e28
Added a search feature that filters products by name in real time.
Wired the search input to the product list and verified correct rendering of matched results.
https://github.com/unsignd/tasteshelf/commit/7ef0ae53910d7a3f5e61ff98774661a02d209246
Log in to leave a comment
I improve product section by adding detail block, showing release date and community score so far. Also, I created Apple style footnote. Overall, I spent a lot of time trying different designs (ui/ux) and choose the best one for the site.
Second attachment is Apple website footnote style I got the idea from. I will add footnote description in the footer in future.
Commit: https://github.com/unsignd/tasteshelf/commit/61dd64a635db664b114f221c34c82596a84f1060
Log in to leave a comment
I succesfully rewrite code after making git hard reset mistake. Publish basic structures and design of the site to the github. I restored files using VSC history feature and reinstall missing package by editing package.json. Such a hard work and was panicked while
Log in to leave a comment