P
@rizkicaandra
What challenges did you encounter, and how did you overcome them?
design size is not common.. this really made me struggle to adjust the size..
Latest solutions
Product preview card component practicing react with styled components
#react#styled-componentsSubmitted 6 months ago
Latest comments
- @samuelgomez05
Good job 👍
- @NameLesSs00What are you most proud of, and what would you do differently next time?
done
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@samuelgomez05It's ok 👍
- @rounakkumarsinghWhat specific areas of your project would you like help with?
Implementing the share action section.
@samuelgomez05Good job, but remember to use html semantics h1, p, article
- P@AnonymousCoder323@samuelgomez05
Is very similar to the design, good job 👍
- P@AnonymousCoder323@samuelgomez05
Good job! 🎉
- P@martinianolWhat 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.
@samuelgomez05It's very similar to the design, good job 🎉, maybe you could use the picture element for the responsive of the images
