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

Build out an IP Address Tracker app and get it looking as close to the reference design as possible. IP Address locations use the IP Geolocation API by IPify. The map uses LeafletJS.

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

• Mobile
• Desktop

Reference Design

• Mobile
• Destop
• Active states

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

• How to create a Vercel Serverless function. This allows me to keep from exposing the IPify API credentials in my JavaScript code.

Useful resources

• A Modern CSS Reset
• A Complete Guide to Flexbox
• A Complete Guide to Grid
• Serverless Functions on Vercel
• Make a Simple API Endpoint with Vercel Serverless Functions
• CSS in Action: Invisible Content Just for Screen Reader Users
• Vue 3 CRUD example with Axios & Vue Router
• Building an interactive map with Vue and Leaflet
• Serverless Functions on Vercel
• Using Vite On Vercel

Author

• Website - www.richardcyrus.com
• Frontend Mentor - @richardcyrus