fikri-enha / fem_ip_locator

Frontend Mentor - IP Address tracker solution

This is a solution to the IP address tracker challenge on Frontend Mentor.

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: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Vite - build tool
• Vue3 - JS Framework
• Tailwind - Utility-first css framework
• axios - http client library
• leaflet - JS map library
• Netlify - deployment

What I learned

I re-learn tailwind and leaflet js for vue. With tailwind, I explore style that can mock the design in real site. teh difficult thing is placing the form and result box in front of the map and header. very very tricky.

Continued development

next development is about maximize the information form geoipfy api. then, make the website more better ux.

Useful resources

all documentation built tool resource

Author

• Website - Haykal
• Frontend Mentor - @fikri-enha

Acknowledgments

This website use the minimum feature of vue, so if you wanna explore more feature like suspense, store etc thats better.