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.
Build out an IP Address Tracker app and get it looking as close to the reference design as possible. IP Address locations use the IP Geolocation API by IPify. The map uses LeafletJS.
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- How to create a Vercel Serverless function. This allows me to keep from exposing the IPify API credentials in my JavaScript code.
- A Modern CSS Reset
- A Complete Guide to Flexbox
- A Complete Guide to Grid
- Serverless Functions on Vercel
- Make a Simple API Endpoint with Vercel Serverless Functions
- CSS in Action: Invisible Content Just for Screen Reader Users
- Vue 3 CRUD example with Axios & Vue Router
- Building an interactive map with Vue and Leaflet
- Serverless Functions on Vercel
- Using Vite On Vercel
- Website - www.richardcyrus.com
- Frontend Mentor - @richardcyrus