Skip to content
Submitted 15 days ago

IP Address Tracker

angular, angular-material, animation, accessibility, material-ui
P
LVL 2
ki4869125
@ki4869
A solution to the IP Address Tracker challenge

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm most proud of building a fully functional IP Address Tracker from scratch using Angular. I implemented dynamic IP and domain lookups, integrated Leaflet to update the map in real time, created a responsive layout that works across different screen sizes, and added user-friendly features such as loading indicators and input validation with floating error messages.

If I were to do this project again, I would plan the application structure earlier by separating responsibilities more clearly into reusable components and services. I would also secure the API key from the beginning using a backend or serverless function instead of exposing it in the frontend during development.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges was integrating Leaflet with Angular and updating the map dynamically when users searched for different IP addresses or domains. I also had to solve issues related to responsive positioning of the information card, CSS layering with z-index, custom Leaflet markers, and Angular standalone configuration.

Another challenge was implementing clean validation without disrupting the page layout. I solved this by adding a floating error message, highlighting the search field, and clearing the error as soon as the user started typing again. I also learned how to structure API calls using Angular services and prepared the project to use a Vercel serverless function to keep the API key secure.

What specific areas of your project would you like help with?

I'd like feedback on improving the application's architecture, performance, and code quality. I'm also interested in learning best practices for securing API keys in frontend applications using serverless functions, making the UI more polished, and writing cleaner, more maintainable Angular code. Additionally, I'd appreciate suggestions for accessibility improvements and any optimizations that would make the project closer to production quality.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on ki4869’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord