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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Solution URL: GitHub Repository
- Live Site URL: Live Demo
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Tailwind CSS - For styles
- Mapbox - For map integration
- IP Address Tracking: Automatically fetches and displays the user's IP address and location on page load.
- Search Functionality: Users can search for any IP address or domain to retrieve relevant information.
- Responsive Design: The layout adapts to different screen sizes, ensuring a seamless user experience on both mobile and desktop devices.
- Loading States: Visual feedback is provided during data fetching to enhance user experience.
- Improved my understanding of React hooks, particularly
useEffectanduseState. - Gained experience in integrating third-party APIs for real-time data fetching.
- Enhanced my skills in responsive design using Tailwind CSS.
- Implement additional features such as saving search history or user preferences.
- Optimize performance and loading times for better user experience.
- Website - Nelson Murungi
- Frontend Mentor - @mwinel
- Twitter - @nelsonmurungim