Browser Extensions Manager Ui With React, JavaScript and Tailwind

What are you most proud of, and what would you do differently next time?

• Writing a more orgnized tailwind

My main goal for this project was to put my little React knowledge to use and to write a more organized tailwind using the tailwind base, components, utilities and apply directives. I'm proud of the fact that I could implement those and that my JSX even if not perfect, had less tailwind css classes.

• The Theme switch feature

I am also proud of the fact that I could implement the theme switch feature (something i've been scared about for the longest time!😩). I learned to create dynamic variables for both light and dark theme and that made that the experience really seamless for me.

• Custom components with variants

I'm proud to have learnt to create the toggle-switch component myself(I felt good learning it😁). And the badge component! I learnt to create the different variants for it and that felt so good!

• Implementing SVGs

I'm proud to have learnt about the different ways to use svgs with the most enlightening being SVG as a component!

What challenges did you encounter, and how did you overcome them?

• The first challenge I encountered was the fact that the logo svg color stayed the same for both light and dark theme. I used gemini as my senior assistant😁 and it introduced me to the different ways I could implement it so I could customize the colors.

My best solution for this was creating a new component for the svg. I thought this was the best approach because it gave me full custom control over the svg codes while still keeping it seperate from the parent jsx component. This made me achieve a cleaner result.

• My next biggest challenge was displaying the images from the json file into the card component. I had so much trouble with this, I thought the json file was the problem, so I converted it into a data.js file instead. But after trying several approach for a while, I discovered the file path was the problem. I move my assets files to public so the images would be easily accessible.

• My most difficult of them all has been implementing the toggle so they're independent of each other. Even when I have been able to approach this by giving the individual cards an id and using each id to run the toggle function, the first data card still seems to have a problem. It sometimes duplicates and does goes an opposite direction from the other cards. I really cannot tell what the problem is.

• I also had a problem implementing the filters. But I was able to fix that with the individual card id(s).

• My other problem has been spacing the filter badges. They're all in a flex container but the spacing properties I applied to the parent flex container doesn't seem to work.

• Finally, I thought it would be nice for the page header and filters to stay visible while scrolling through the cards, so I cliped the cards to their parents container. (I'll like your honest feedback on this). Do you think pagination would be a better approach? (I had that in mind too).