@TedJenkler
Posted
Hi Paul,
Your project is truly impressive, especially for a first React project! You've done a great job.
If you had access to Figma files, I would suggest putting a bit more time into the finer details of styles and responsiveness:
Styling Consistency: Ensure all elements follow a consistent style for a polished look. Responsiveness: Use media queries to make your application look great on all devices. Your grids can be improved to transition better between different devices. I recommend scaling them up using min-size and then scaling down to fit two objects when possible. User Experience: Add small touches like hover effects and smooth transitions to enhance interactivity. Visual Design: Consider replacing borders with shadows to give your design a modern and clean look. One topic I would recommend looking into is creating custom select components. This could really make your project stand out. Me myself am doing a remake of exactly this project at the moment, and I must say, your version is much better than my first attempt eight months ago.
Overall, fantastic work! With a bit more focus on design details, your project will be even better.
Best, Ted
Marked as helpful
@dev-paulL
Posted
@TedJenkler
Hello Ted, thanks a lot for the feedback👋 .
I don't have access to any figma file with the free version, but you are right, now that I look again I can adjust a lot of things in the design. It is also my first time using tailwind and I struggled more than with pure CSS compared to what I expected 😅 I have written animations on my list of things to learn, and will start using them on new projects and implement some in previous ones. I think they are important for a good user experience nowadays. I was reading about user motion preference this afternoon.
Though, I'm concerned about the way I handled the data in this project. My plan was to fetch it once and then use it inside of my app, but I didn't know how to proceed. I think it's spaghetti 🍝 (Edit: I improved that)
Thank you again 🤝 Paul
@TedJenkler
Posted
@dev-paulL,
I highly recommend checking out Redux Toolkit. It simplifies state management and lets you mutate data directly using Immer under the hood, making your code cleaner and more maintainable.
Because then everything can look like this instead, making the logic really easy to revisit after some time: https://github.com/TedJenkler/REST-Countries-API-with-color-theme-switcher-v2/blob/main/src/features/state/stateSlice.js
Good luck and enjoy your learning journey!
Marked as helpful
