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

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

• JSX
• Tailwindcss
• Flexbox
• Mobile-first workflow
• React - JS library

What I learned

I learned how to use the react-leaflet components in rendering a fully interactive map. I learned how to use Axios for data fetching.

First Time using Axios for data fetching:

import axios from 'axios';
import { useEffect, useState } from 'react';

const [data, setData] = useState(null);

useEffect(() => {
  axios.get(REQUEST_URL).then((response) => {
    console.log(response.data);
    setData(() => response.data);
  });
}, []);

Continued development

I want to focus more on how I can use tools like Axios for advanced data fetching and caching. I also want to continue building more projects that are useful usin APIs.

Useful resources

• React Leaflet Tutorial for Beginners (2023) - This helped me in using the react-leaflet components.

Author

• Website - Developer Ralph
• Frontend Mentor - @CosMo578
• Twitter - @dev_ralph_

Acknowledgments

I would like to thank Alejandro AO - Software & Ai YouTube channel for helpin me in figuring out how to use the react-leaflet components