Frontend Mentor - IP address tracker solution

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

Table of contents

• The challenge
• Links
• Built with
• What I learned
• Useful resources
• Author

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 Virtual IP address on the map on the initial page load
• Search for any Virtual IP addresses or domains and see the key information and location

Links

• Solution URL: https://github.com/AshadeSamson/IP_Tracker
• Live Site URL: https://ip-tracker-app.glitch.me

Built with

• Semantic HTML5 markup
• CSS Position properties
• Flexbox
• Mobile-first workflow
• leaflet.js - JS library
• express.js - Node.js framework

What I learned

Though I started the project as a frontend-based project, but the need to abstract my API keys from the browser led me to learning about how a backend can help me out. I learnt about server side renedering(SSR) and static site generation(SSG) using Node.js and it's Express.js framework.

Useful resources

• ipify.org - Helped to capture the user's ip. really a nice feature.
• Coding Train YT channel - This YT series really helped in explaining how to work with APIs and connect backend and frontend codes in javascript.

Author

• Website - Ashade Samson
• Frontend Mentor - @AshadeSamson