👋🏻 Hello everyone. This is my solution for the Dictionary web app.
This was my first time using React, and I'm really excited to learn more about this framework. I believe there is a lot to be improved in my code, so feel free to give me your feedback.
Note: for some reason the screenshot of the project has a bug in some colors, but on the website everything is normal. If anyone knows what could have caused this bug, please let me know here.
Thanks! 😁
Dude this is clean, really good job. My only suggestion would be to consider using react context (https://reactjs.org/docs/context.html#contextprovider) instead of passing props and storing data in local storage. The context API is meant for sharing state throughout the component tree without have to pass props down manually at every level. Local storage lets you save data across the browser session, however you can't notify your other components on a state change making it difficult to scale. (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
What can I do to improve my JavaScript code?
Is my HTML/CSS code understandable I found that I have written quite a lot of code, let me know so I can improve in future projects.
I found working from mobile to desktop really easy!
Overall I think your solutions pretty good for a start and it is fairly easy to understand. The biggest issue is that this solution is not reusable. You're hardcoding a lot of strings and values so this can't be used in any other context. There's quite a bit of repeat code which should tell you that you may need to include some functions or do some refactoring. Your repo contains the data.json but you copied your own. Why not just read from the json file and use that instead? I love your use of css variables. One last note and this is something i'm constantly struggling with. All of your positioning and sizing may be pixel perfect but you'll want to start considering different viewport sizes. While it may look decent on your screen, it'll probably look strange on another. Great job!
