julfinch / ip-tracker-react

A react app that can show you the location, timezone, and the internet service provider of the IP Address that you would like to search using the API provided by IPAPI. The location will also be shown in the map using the API provided by LEAFLET and the tiles layer is provided by OpenStreetMap.

IP Address Tracker

• Live Site URL: https://find-this-ip.netlify.app/

• A react app that can show you the location, timezone, and the internet service provider of the IP Address that you would like to search using the API provided by IPAPI. The location will also be shown in the map using the API provided by LEAFLET and the tiles layer is provided by OpenStreetMap.

Table of contents

• Overview
  • Screenshot
  • Links
• Codesandbox React App
• ERRORS
  • Error: Does not have a commit checked out
• Set-up: Tailwind CSS using yarn

Overview

Screenshot

Links

• Live Site URL: https://find-this-ip.netlify.app/

Codesandbox React App

1. Create a new sandbox:

2. Rename the title with an appropriate name.

3. Under .src folder, create an images folder and components folder.

4. In the images folder, upload all the images from your local machine.

5. In the components folder, create the following files:

   • Search.js
   • Output.js
   • Modal.js
   • Map.js

6. Install the following dependencies:

   • react-icons
   • react-leaflet
   • leaflet
   • swr
   • tailwind

---

Built with

• Semantic HTML5 markup
• CSS custom properties
• Tailwind CSS
• ReactJS
• Vite

---

Author

• Twitter - @julfinch