Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React, Ipify, Leaflet.js

@OlehTovkaniuk

Desktop design screenshot for the IP Address Tracker coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


It would be just awesome if you'd commented my code for fetching data and state management. And also tell me about any other mistakes if you see. I'm not really experienced in using React so really need feedback. This is not a big app so it is easy to look through its code 🙏

Community feedback

Matthias 235

@MatthiasSmith

Posted

Hey @OlehTovkaniuk, great job on this! Your solution works well, and your code is simple to follow and read too!

Couple of things I noticed:

  • There seems to be too much padding inside of the "banner" element when viewing the solution on larger screen sizes.
  • Setting the "outline" property to "none" on the text and submit input elements makes it difficult to tell which element has focus when I use tab keys to navigate the page. Perhaps you could add them back for when people navigate using the keyboard using :focus-visible? Here's the MDN reference for it: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

I'd also like to offer you the same challenge you posed to me, which is to make your API token invisible to the client. 😉

Let me know what you think.

Best,

Matthias

1

@OlehTovkaniuk

Posted

@MatthiasSmith Thanks for well-aimed suggestions! I did the changes 😊 About API token, you caught me 😁 I haven't that done because it requires understanding of serverless logic but instead of learning it I'm going to dive deeper in React and related technologies.

1
Matthias 235

@MatthiasSmith

Posted

@OlehTovkaniuk Changes look good! 🙂

Yes, I understand about diving deeper into React. When you do give it a chance, you might be surprised how simple it is to write a few functions (using node.js or another technology) to handle api requests and the like. Not a bad skill to have under your belt either. 😉

Happy coding! 😎

1

@OlehTovkaniuk

Posted

@MatthiasSmith Thanks, happy coding 😊

0

Please log in to post a comment

Log in with GitHub
Discord logo

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