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

This project was built with Parcel.

Setup

1. Install dependencies:

npm install

2. Run dev server:

npm start

3. Build for production:

npm run build

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: GitHub
• Live Site URL: IP Address Tracker

My process

Built with

• Semantic HTML5 markup
• Tailwindcss
• Flexbox
• Mobile-first workflow
• React - JS library
• useSWR - React Hooks for Data Fetching

What I learned

This project took me a few days to complete. I decided to step out of my comfort zone from building newbie and (a few) junior projects and jumped into my first intermediate level frontend project. It was challenging. I learned a lot more (though still much more to learn) about hooks, the useSWR hook by @Vercel. Since I'm using tailwindcss for my projects lately, I found it a bit hard to maintian and read CSS classes within the markup, that's why I took an approach (inspired by Nikolaus Rademacher's article) to "abstract" CSS class names putting them separately in a Styles.js files using JS objects and arrays to access the required classes.

Disclaimer: My tech/developer/programmer language is still basic, meaning that I understand things by watching, trying, testing, and/or realizing, but I still have a hard time putting it in words, plus english is my second language.
In my first attempt using useSWR hook I found that data was fetching more than one time when I implemented it in a child component so I reestructured/refactored it in a way that it's only called on a upper component once (Main, where I pass props values from).
Also, I since useSWR has an automatic revalidation I decided to disable it (by using useSWRImmutable instead of useSWR hook) because the IPIFY API I was working with offers limited requests for one-time-trial free user.

Continued development

• React Hooks.
• API fetching.

Useful resources

• Nikolaus Rademacher's article - This helped me to structure Tailwindcss classnames.
• I reviewed code from 3 fellow frontendmentor members to understand how to use the Leaflet API, nzzCoding ; BelayAdamu; and reynaldo-bejarano.
• About useSWRImmutable.

Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.

Author

• Frontend Mentor - @ichiklaus
• Twitter - @ichiklaus

Acknowledgments

Check Useful resources section.