This project is a solution to the IP address tracker challenge on Frontend Mentor. The goal of the challenge is to create a responsive web application that allows users to view their own IP address on a map and search for information about other IP addresses or domains.
- View the optimal layout for each page based on the device's screen size.
- Hover states for all interactive elements on the page.
- Display the user's own IP address on the map during the initial page load.
- Search for any IP addresses or domains and view key information and location.
- React-vite - JavaScript library for building user interfaces.
- Tailwind CSS - A utility-first CSS framework.
- Leaflet - An open-source JavaScript library for interactive maps.
- Ipify Geolocation API - Used to track user IP address and location.
- Leaflet library - Integrated for map functionality.
-
Leaflet Library Integration: Integrating the Leaflet library posed challenges during deployment. Multiple resources, including official documentation, blogs, and YouTube tutorials, were referenced to overcome these hurdles.
-
Error Handling for Map: Handling scenarios where the location data is not available and preventing map errors required careful consideration. Implementing robust error handling for both components was a challenge.
-
API Key Security: Protecting the API key was a concern. The solution involved referencing documentation to securely store the API key using a
.envfile.