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
  • 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

Links

• Solution URL: https://github.com/matiussi/ip-address-tracker
• Live Site URL: https://matiussi-ip-address-tracker.netlify.app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Context API
• Mobile-first workflow
• Axios - For fetching data
• is-ip - For validating IP addresses
• is-valid-domain - For validating domain names
• React - JS library
• Next.js - React framework
• SASS - SASS for styles
• Typescript - Typescript
• Tostify - For displaying warnings and erros

What I learned

• My main goal in this project was to learn Typescript, developing this challenge helped me understand how simple and useful Typescript can be.
• How to fetch data (client side) and handle errors using Next.js.
• 'vw' and 'vh' CSS units can be very useful sometimes, but they don't solve every problem by themselfs.
• Wrapping all of your code in a try/catch block isn't a good ideia, when I was developing this challenge I decided to create a simple loading state using Context API. I had the brilliant ideia to wrap my setLoading in a try/catch block, everything was working fine until a response error happened and froze the website... I spent a lot of time trying to fix it, and I thought that my problem was related to data fetching, after searching for a couple minutes I found an awesome tutorial written by ROBIN WIERUCH (link below). He also used a loading state, but no wrapped with try/catch. In the end I realize my mistake and I felt really stupid. Sorry, I just needed to vent.

Continued development

• Typescript is an awesome language, I'll definitelly use in my future projects.
• Responsive layouts, I still have problems scaling my websites to big screens (>2K).

Useful resources

• How to fetch data with react hooks? - This tutorial helped me a lot! One of the bests tutorials I ever read.

Author

• Frontend Mentor - @matiussi-2035

Acknowledgments