A React application that allows users to track IP addresses and view their geographical location on an interactive map. Built with React, Vite, and Leaflet for mapping functionality.
- IP Address Lookup: Search for any IP address or domain to get detailed location information
- Geographical Mapping: Interactive map showing the exact location of the IP address
- Real-time Data: Fetches live data from the IPify API
- Responsive Design: Works seamlessly across desktop and mobile devices
- Accessibility: Proper ARIA labels and keyboard navigation support
- React 18 - Component-based UI library
- Vite - Fast build tool and development server
- Leaflet - Interactive mapping library
- React Leaflet - React wrapper for Leaflet
- IPify API - Geolocation data provider
- Node.js
- npm
The live demo: https://ipaddresstracker100.netlify.app/
- Clone the repository:
git clone <repository-url>
cd ip-address-tracker-react- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:5173 in your browser
npm run buildsrc/
├── components/
│ ├── SearchBar.jsx # IP/domain search input
│ ├── IPInfo.jsx # IP information display cards
│ └── MapView.jsx # Interactive map component
├── hooks/
│ └── useIPData.js # Custom hook for API data fetching
├── assets/
│ └── images/ # Static images and icons
└── App.jsx # Main application component
During the development of the IP Address Tracker application, I followed a structured and incremental development process. I began by designing the project structure and identifying the core components required for the application, such as the search bar, IP information display, and map view. Building the layout first helped me visualize how the components interact and ensured the application remained organized and maintainable.
One of the primary challenges I encountered was integrating external APIs and managing asynchronous data fetching in React. Specifically, retrieving IP geolocation data from the IPify API and displaying the correct location on the map required careful state management. To address this, I implemented a custom React hook (useIPData) to separate API logic from UI components. This approach improved code readability and made the application easier to maintain. Another challenge involved updating the Leaflet map dynamically when a new IP address was searched. I resolved this by passing updated location data as props to the map component so the marker could update automatically.
Ensuring responsive design across different screen sizes was another important consideration. I used flexible layouts and tested the interface on multiple screen sizes to maintain usability and accessibility.
During our collaborative debugging session, we identified and resolved several critical issues that were preventing the application from functioning properly:
Problem: The IP information cards were showing placeholder dashes ("—") instead of actual data, even though the API was successfully fetching data.
Root Cause: The IPInfo component wasn't accepting the data prop being passed from the parent App component. The component signature was export function IPInfo() instead of export function IPInfo({ data }).
Solution: Updated the component to accept and destructure the data prop, then used optional chaining to safely display the IP address, location, timezone, and ISP information from the API response.
Learning: Always verify that components are properly receiving props, especially when data isn't displaying as expected. Optional chaining (?.) is crucial for safely accessing nested object properties.
Problem: The map remained centered at coordinates [0,0] and didn't update when searching for different IP addresses.
Root Cause: The MapView component wasn't accepting the location prop and had hardcoded coordinates for both the map center and marker position.
Solution: Modified the component to accept the location prop, added a useEffect hook to update the map view when location changes, and dynamically set the center and marker positions based on the location data.
Learning: React components need to explicitly accept props to use data passed from parent components. The useEffect hook is essential for handling side effects like updating external libraries (like Leaflet maps) when props change.
Problem: The search button's arrow icon wasn't displaying, showing a broken image instead.
Root Cause: The image was referenced using a relative path (../assets/images/icon-arrow.svg) which doesn't work reliably in React/Vite applications.
Solution: Imported the image at the top of the component file using ES6 import syntax, then used the imported variable as the src attribute. Also added proper alt text for accessibility.
Learning: In React/Vite projects, static assets should be imported as modules rather than referenced with relative paths. This ensures proper bundling and prevents path resolution issues.
- Component Communication: Props are the primary way React components communicate - always verify they're being passed and received correctly
- State vs Props: Components should use props for data passed from parents, not hardcoded values
- Asset Handling: React/Vite requires importing static assets as modules for reliable loading
- Error Prevention: Optional chaining and proper prop validation prevent runtime errors
- Side Effects: Use
useEffectfor operations that need to happen after render, like updating external libraries
These debugging experiences reinforced the importance of systematic problem-solving: checking component props, verifying data flow, and understanding React's rendering patterns. The fixes not only resolved the immediate issues but also improved the application's robustness and maintainability.
If I were to improve this project further, I would:
- Add stronger input validation for IP addresses and domains
- Implement better error handling and user feedback
- Optimize performance by reducing unnecessary component re-renders
- Enhance accessibility by improving keyboard navigation and ARIA attributes
- Add loading states and skeleton screens for better UX
- Implement caching for API responses to reduce redundant requests
This application uses the IPify API for geolocation data. You'll need to sign up for a free API key and add it to the useIPData.js hook.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License.