Skip to content
Submitted over 3 years ago

IP address tracker app | JS

Praneet Dixit•120
@PraneetDixit
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...IP Address Tracker
  • HTML
  • CSS
  • JS
  • API
3intermediate

Design comparison

SolutionDesign

Solution retrospective

It was a very fun and challenging project. I loved interacting with different APIs to track and display the location.

Some questions from the community : -

  • Feedback on the method and regex to decide whether the user has entered an IP address or domain name. (In the checkIP function)
  • Although I have tested the app many times, but there may be some points at which the app might break or the logic might fail. If you notice any such points, please let me know.
  • I am not very experienced in working with async - await. Feedback on error handling in asynchronous operations and use of async - await is welcome.

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Praneet Dixit! 👋

    Good job on this challenge! I just finished this project too. Kudos for button animation and this init rocket loader. There is a problem on Firefox. Console throws an CORS error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https (Reason: CORS request did not succeed). I encountered this problem too. Read about this error. The fix is to send your request to a proxy. A proxy acts as an intermediary between a client and server. The proxy server operates in between the frontend web app making the request, and the server that responds with data. Add https://cors.bridged.cc/ to any URL you’re fetching from. In your example it will be: https://cors.bridged.cc/https://geo.ipify.org/api/v1?apiKey=yourapikey.

    Good luck with that, have fun coding! 💪

    1
    Praneet Dixit•120
    @PraneetDixitPosted over 3 years ago

    Thanks for the comment. I had not tested the app on Firefox. Will surely fix that. The intermediary server can also help in masking the API key.

    My only concern is - The intermediary server will result in an added request (client - intermediary - api) and will probably increase the request time. Any fix around that?

    0
    tediko•6,680
    @tedikoPosted over 3 years ago

    @PraneetDixit This is my solution to this challenge. I used netlify lambda serverless functions to fetch my data so my API_KEY never shows up in my code. It doens't increase the request time since only netlify is fetching data from API. I just request that data from netlify which is instant.

    1
    Praneet Dixit•120
    @PraneetDixitPosted over 3 years ago

    Thanks. I never thought about netlify functions!

    0
    Praneet Dixit•120
    @PraneetDixitPosted over 3 years ago

    @tediko I tried to load the page on Firefox just now. I could not see any error in the console. The requests were also responded with a 200 statusCode. <br> One thing though, I updated Firefox before loading the page. I think the latest update addressed that issue. Or was my browser configured differently? Can you please check and confirm?

    0
    tediko•6,680
    @tedikoPosted over 3 years ago

    @PraneetDixit It is still returning a "NetworkError when attempting to fetch resource." error for me on Firefox. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at...

    0

Please log in to post a comment

Log in with GitHub

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