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
• My process
  • What I learned
  • Continued development
  • Useful resources

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

My process

What I learned

Including Vite, Vitest, and TypeScript was my biggest achievement this week—and also the most challenging part. I found it fascinating to work with two APIs for the first time. That’s about it!

Continued development

I will explore the technologies I've used in greater depth, as well as learn about the power of web-vitals and incorporate it into my next project.

Useful Resources

Resource Name	Description	Link
Vite Documentation	Official documentation for configuring and using Vite in projects.	Vite Docs
Vitest Documentation	Official documentation for setting up and using Vitest for testing.	Vitest Docs
TypeScript Documentation	Official TypeScript documentation, including setup and usage guides.	TypeScript Docs
Vite + React Setup	Guide to setting up Vite with React and TypeScript.	Vite React Setup
MDN Web Docs - JavaScript Error Handling	Guide on common JavaScript errors and how to handle them.	MDN JavaScript Errors
MDN Web Docs - TypeScript Basics	Basic guide to TypeScript, useful for getting started and avoiding common errors.	MDN TypeScript
Vite + Vitest + TypeScript Setup Guide	Step-by-step tutorial on integrating Vite, Vitest, and TypeScript together.	Vite Vitest TypeScript

These resources were essential for the setup and troubleshooting process during the development of the project.