Frontend Mentor - IP address tracker solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Remix - React framework
• TailwindCSS - For styles
• IP Geolocation API by IPify - For IP Geolocation
• Leaflet - For map
• Vercel - Deployment platform

What I learned

I used several new technologies in this project to get some experience with them. I've had a lot of fun learning Remix and its differences from NextJS.

My main takeaway from this project was learning how to stich data together from multiple API sources. I used the IP Geolocation API by IPify to get the IP address and location data. I then used the Leaflet library to display the map. I had to use the IP Geolocation API to get the latitude and longitude of the IP address and then pass that to Leaflet to display the map.

The most dificult aspect of this project was deployment. I ended up deploying my app to Vercel where I experimented with custom confiugrations like settings environment variables, custom buid and install commands and so on.

This was also the first time using Bun 1.0 and loving it so far. Defnitely faster than npm and yarn.

Useful resources

• CodeSandbox - remix-run/examples:leaflet - This really helped me out in understanding how to use Leaflet with Remix which is a SSR framework only. I really liked this pattern and will use it going forward.

Author

• Frontend Mentor - @danmeldominique
• Twitter - danmeldominique