https://github.com/gtcore902/myip-frontend
This React application fetches IP and geolocation data with backend and displays it to the user along with a map
https://github.com/gtcore902/myip-frontend
api-rest ipinfo leafletjs nodejs openstreetmap-api reactjs scss
Last synced: about 2 months ago
JSON representation
This React application fetches IP and geolocation data with backend and displays it to the user along with a map
- Host: GitHub
- URL: https://github.com/gtcore902/myip-frontend
- Owner: gtcore902
- Created: 2024-03-22T18:49:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-05T06:50:00.000Z (3 months ago)
- Last Synced: 2026-04-05T08:25:21.062Z (3 months ago)
- Topics: api-rest, ipinfo, leafletjs, nodejs, openstreetmap-api, reactjs, scss
- Language: JavaScript
- Homepage: https://myip.gaetantremois.fr/
- Size: 4.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React and Nodejs IP Geolocation App
This React application fetches IP and geolocation data and displays it to the user along with a map.
The backend is built with Node.js and is available at this [repo](https://github.com/gtcore902/myIP-backend).
Follow the instructions to start the server.
## Getting Started
To get a copy of this project up and running on your local machine, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/gtcore902/myIP-frontend.git
```
2. Install dependencies:
```bash
npm install or yarn
```
3. Start the development server:
```bash
npm start or yarn start
```
4. Don't forget to install this [repo](https://github.com/gtcore902/myIP-backend) and launch the backend server.
5. Open [http://localhost:3000](http://localhost:3000) in your browser.
## Features
- Displays IP address, city, country, latitude, longitude, and region information.
- Shows a map based on the latitude and longitude information.
- Utilizes React hooks for state management.
- Fetches data from various APIs including geolocation, IP lookup.
## Built With
- [React](https://reactjs.org/) - A JavaScript library for building user interfaces.
- [SCSS](https://sass-lang.com/) - CSS preprocessor.
- [NodeJS](https://nodejs.org/en) - JavaScript runtime platform.
- [ipinfo.io](https://ipinfo.io) - Geolocation API for fetching location data based on IP address.
- [OpenStreetMap](https://openstreetmap.org/) - Collaborative, open-source mapping platform created by a global community of volunteers.
- [React Leaflet](https://react-leaflet.js.org/) - React components for Leaflet maps
- [Backend with NodeJS](https://getip.gaetantremois.fr) - Returns an object with the ip address
## Contributing
You're welcome :sunglasses:
If you wish to use or contribute to the project, follow these steps:point_down::
- Fork the project
- Replace in IP_INFO_API_KEY_EXAMPLE.js file the key with you own key:
> `const IP_INFO_API_KEY = 'YOUR_IP_INFO_API_KEY'` >`export default IP_INFO_API_KEY`
- Rename IP_INFO_API_KEY_EXAMPLE.js in IP_INFO_API_KEY.js
- Create a feature branch
> git checkout -b feature/NewFeature
- Commit your changes
> git commit -m 'Add NewFeature'
- Push the branch
> git push origin feature/AmazingFeature
- Open a pull Request
_[How to use Git?](https://docs.github.com/fr/get-started/using-git/about-git)_
## Contact
[](https://linkedin.com/in/ga%C3%ABtan-tremois-a956a91a3)