Responsive Product Card

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

Solution Retrospective – Product Preview Card

👎 What I Didn’t Enjoy

While this project helped reinforce responsive UI principles, I found it frustrating that there was no consistent gap across all elements. • The design inconsistencies forced me to create a custom Flex component just to handle spacing properly. • Instead of relying on natural layout flow, I had to manually pass gapMob and gapDesktop props everywhere. • This felt unnecessarily repetitive and made the code less clean than I would have liked.

💡 What I Learned & Would Do Differently • A better design system with global spacing variables (--spacing-sm, --spacing-md, --spacing-lg) would have helped. • Instead of per-component custom gap values, a consistent spacing scale across all components would prevent layout frustration. • If possible, using CSS Grid for better gap management might have worked better than flex.

✅ Key Takeaways • Flexbox is powerful but can be painful when spacing isn’t uniform. • Consistency in design is crucial—without it, we waste time fixing layout gaps. • Custom components should simplify work, not make it more tedious.

While the final product looks great, the process was not enjoyable due to constant layout tweaking. 🚀 If I were to redo this, I’d prioritize a spacing system for a smoother workflow!

What specific areas of your project would you like help with?

🚀 3. Cleaner Code & Readability

If the codebase feels messy or repetitive: ✅ Optimize the Flex component to be more efficient. ✅ Reduce overuse of props and instead use default values where possible. ✅ Improve file structure so components are modular and easier to maintain.