@ivi-developer
Latest solutions
REST Countries API + React + React Router + Context API
#react#react-router#sass/scss#material-uiSubmitted about 1 year agoI'm open to any and all feedback. 📝
Quiz App (React + SCSS + Framer.Motion + Express.js)
#framer-motion#react#sass/scss#expressSubmitted about 1 year agoI'm completely open to any and all feedback. Let me know if anything is broken or if there's something you would have done to simplify a specific process. 😊
Thanks again for having a look at my project. 😁
World Clock App Built With React + SCSS
#react#sass/scss#framer-motionSubmitted about 1 year agoWhat I'd like some feedback on is the following:
-
What could I have done differently with the way I laid out my code, specifically the JSX? I'm really open to all feedback as while I'm learning React, I'd like to stick to best-practices as much as possible.
-
Is there manner in which I'm using the 'useEffect' hooks correct? I noticed that React was mentioning I had missing dependencies, but when adding these it would cause the effect to break.
-
I used Framer Motion for the 'Additional Info' window so that it would animate on mount and dismount, but I noticed it would break the layout during the animation. So any feedback there would be appreciated, as this is my first rodeo with the library.
- General performance seems to be quite slow. Specifically with the API calls. It takes a few seconds for the data to be retrieved, so any feedback there would also be appreciated.
-
Latest comments
- @SashaH62
Great job with the project. 👍
Some suggestions to assist with the layout:
-
Instead of placing the SVG directly into the markup, you can use an <img /> tag and set the source to the image in your assets folder. This will allow you to add a container around the <img /> tag so that you can contain the image (use 'object-fit: contain' on the <img /> tag) and add a border radius to the container.
-
Instead of adding margin to the individual elements to create space inside the container, add padding to the container itself so that the elements share the same padding relative to the container.
-
To achieve the same box-shadow that is in the example, set the blur to 0 and the opacity to 1 (try box-shadow:8px 8px 0px 0px rgba(0,0,0,1)).
Hope some of this can help. 👋
Marked as helpful -
