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
desktop version
mobile version
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Next.js – React framework
- React – JS library
- TanStack Query (FKA React Query) – Data fetching library
- Axios - HTTP client
- Tailwind CSS – For styles
- React Hook Form - For form state management
This challenge was very interesting for me. It gave me the opportunity to deepen my knowledge of Tanstack query v4 so that I can fetch data from external APIs in a more powerful way, especially by using the useQuery hooks together with the useIsFetching hook.
Also, this was the first time that I had used Tailwind CSS to implement a design, and I had also integrated Mapbox to enable the display of custom markers on online maps in precise coordinates, which is what makes this site unique.
- Next.js Documentation
- React Documentation
- TanStack Query Documentation
- Tailwind CSS Documentation
- React Hook Form Documentation
- Heroicons
- Website – www.jakubjirous.cz
- Frontend Mentor – @jakubjirous
- LinkedIn – jakubjirous