Reactjs flex grid

Solution retrospective
How I didnt give up and used various methods to tackle my problems.
What challenges did you encounter, and how did you overcome them?Shared file for cart and items. I used useState and updated only the changed item to prevent reloading of page. Did this with the help of AI
What specific areas of your project would you like help with?setState and Json sever
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mike15395
Congratulations @Jamieeee1 on completing the challenge!
Your code is working fine but if you add following things to your code, it can further improve!
-
Instead of directly copy pasting data into App.jsx you can simply import it from .json file without need of json server by using
import data from "./../../data.json
use./
depending upon folder where the file is stored. -
Images are not updating as per view port, you can add following lines of code to fix it
<picture> <source media="(min-width: 1024px)" srcset={imgSrc?.desktop}/> <source media="(min-width: 640px)" srcset={imgSrc?.tablet}/> <img src={imgSrc?.mobile} alt="food-image" className={inCart ? withBorder : withoutBorder}/> </picture>
- You can use context/redux for global state management instead of writing all states in app.jsx. This will help in future complex applications.
Rest Everything is good! Happy Coding!
Marked as helpful -
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord