Skip to content

Latest commit

 

History

History
136 lines (89 loc) · 3.86 KB

README.md

File metadata and controls

136 lines (89 loc) · 3.86 KB

IP Address Tracker

Overview

IP Address Tracker created to help you get the IP Address locations (using the IP Geolocation API by IPify). To generate the map, I used the Google Maps API.

Table of contents


Note

  • To use the IP Geolocation API by IPify, you'll need to sign up for a free account. You won't need to add any cards details to do this and it's a very quick process. This will generate an API Key for you. Usually, you would be able to restrict your API Key to a specific URL (your own domain). This makes sure that other people can't use your API Key on their own websites. IPify doesn't have this feature.
  • Use your API key for the VITE_GEOLOCATION_API_KEY environment variable
  • Make sure to create your own Google Maps API key and use this for the VITE_GOOGLE_MAPS_API_KEY environment variable.
  • And create also a Map ID, this is a unique identifier that represents a single instance of a Google Map. Once you have created this ID, make sure to use this for the VITE_GOOGLE_MAPS_MAP_ID environment variable.

Features

  • Track IP Addresses: Enter an IP address and get detailed information and its location on Google Maps.
  • Modern UI: Built with React and styled with TailwindCSS for a clean and responsive design.
  • Fast and Efficient: Utilizes Vite for fast development and build processes.
  • Type Safety: Developed using TypeScript to enhance code quality and maintainability.

Getting Started

Prerequisites

Make sure you have the following installed on your machine:

Node PNPM

  • Node.js (>=14.x)
  • NPM (>=6.x) or yarn (>=1.22.x)

Installation

  1. Clone the repository:

    git clone https://github.com/shamsinator/ip-address-tracker.git
    cd ip-address-tracker

  2. Install dependencies:

    npm install

Running the Application

Development

To start the application in development mode with hot reloading:

npm run dev

This will start a local development server. Open your browser and navigate to http://localhost:3000.

Build

To create a production build:

npm run build

The output will be in the dist directory.

Preview

To preview the production build locally:

npm run preview

This will start a server to preview the built application.

Code Quality

Formatting

To format the code using Prettier:

npm run format

Linting

To lint the code using ESLint:

npm run lint

Dependencies

Core Dependencies

  • React: A JavaScript library for building user interfaces.
  • ReactDOM: Provides DOM-specific methods for React.
  • Axios: Promise-based HTTP client for the browser and Node.js.
  • @vis.gl/react-google-maps: React bindings for Google Maps API.

Development Dependencies

  • TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
  • Vite: Next generation frontend tooling.
  • ESLint: A tool for identifying and fixing problems in JavaScript code.
  • Prettier: An opinionated code formatter.
  • TailwindCSS: A utility-first CSS framework.
  • dotenv: Loads environment variables from a .env file into process.env.

Author

[Back to top]