This is a solution to the IP address tracker challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements on the page
- See their own IP address on the map on the initial page load
- Search for any IP addresses or domains and see the key information and location
- Solution URL: Frontend Mentor
- Live Site URL: Live Demo
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
- React - JS library
- Vite
- TypeScript
- Axios
- React Custom Hooks
- Leaflet - For Map
- Tailwind CSS - For styles
I learned how to use leaflet and React leaflet to render solutions that involve maps. Leaflet is an open-source project, so it was very easy to implement. The docs were also pretty easy to navigate, regarding stuffs like types for Map mathods and components like LatLngExpression, LatLngTuples, etc.
- Leaflet Docs
- React Leaflet Docs
- Ipify Docs - This is an IP geolocation API platform which will be instrumental in implementing solutions involving accurately detecting IP locations.
- Frontend Mentor - @peterxavier01
- Twitter - @peter_uadiale