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
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

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

Screenshots

Desktop

Mobile

Links

• Solution URL: https://github.com/james-work-account/ip-address-tracker-next
• Live Site URL: https://ip-address-tracker-next.netlify.app/

My process

Built with

• Typescript - Typed JavaScript (I'm a Scala developer normally so typed languages are much more natural to me - trying to become more familiar with Typescript)
• Next.js - React framework
• SCSS - CSS Extension

What I learned

This was my first time using Leaflet.JS and IPIFY. Both were a pain to integrate for different reasons:

• IPIFY throws CORS issues when called from a browser. This is why I chose to build the website in Next.JS rather than standard React - Next allows you to create API routes which sit on the server rather than the browser, so I could put calls to IPIFY in an API route and avoid having to deal with CORS entirely. Also, in the last few months Netlify have been adding more and more support for NEXT.js so even though it's a frontend framework I can deploy server-side routes without having to deal with a separate server hosted on Heroku or something.
• The React implementation of Leaflet is a bit wonky. Firstly, it references the browser window without checking whether it exists or not - therefore I used the Next dynamic component feature (see snippet below) to be able to avoid SSR rendering the map component. Secondly, most of the Props in this React Leaflet library are immutable to I had to make a fairly hacky workaround to be able to update the map on route changes (see here). It's pretty ugly but it works alright.

const Map = dynamic(() => import("../components/Map"), { ssr: false });

Continued development

My solution doesn't look exactly like the brief - possibly I'd like to update it to get it more pixel-perfect. Honestly I'd like to find less hacky ways to implement the Map.tsx file - things like the separate style tag to force it to have a variable-yet-set height, a less bodgy way to update the map when coordinates change, etc. Cleaner, more sensible code is more important to me than getting the site pixel perfect.

Useful resources

• Changing the map center when the center state changes
• Using a custom Hook to detect window size and keep track when window size changes
• Dynamic imports with Next.JS to avoid "window is not defined" errors in react-leaflet

Author

• Frontend Mentor - @james-work-account
• GitHub - @james-work-account