@DavidMorgade
Posted
Hello Saadi, great job getting the solution! is a pleasure to meet some react devs here in frontendmentor
Here are a few advices that maybe can help you in the future for your React projects:
-
For the styles, I see that you are using some styling on-line and also setting them in variables, have you tried using Styled components? Looking at your code I think that CSS-in-JS is the thing that fits more to you for styling, instead of just adding all styles on your html tags! try it trust me that it will be worth the time.
-
I really recommend you to learn the React Context API, it will save you from the prop chain hell, you can also use Redux but for almost everything, react useContext hook does good, another thing that is worth learning trust me, this will save your life even more!
-
In your App component you are using some mediaWatcher on your useEffect hook, there is a custom hook for getting the width of the screen wich is also worth a try, is the useWindowSize hook, you can use it fairly simple, import it in the file you need to use it, and call it into a const like this:
const size = useWindowSize(), then you will have access tosize.widthandsize.height. I have this good saved on a Gist file if you are interested! -
For the images instead of using the path you can also import them from a custom JS file and use them directly as variables, I think that its a better approach to it this way!
Hope my feedback helps you!, if you have any questions, don't hesitate to ask! great job and keep developing with React!
Marked as helpful
