https://github.com/tedjenkler/ip-address-tracker-scss-axios-v2
This project is a solution to Frontend Mentor's IP Address Tracker challenge. Developed with React and styled using SCSS, the app integrates with an external API through Axios to provide real-time IP address tracking. It features a map visualization using Leaflet and custom React hooks for efficient data management. This is a practice project :)
https://github.com/tedjenkler/ip-address-tracker-scss-axios-v2
axios react scss vite
Last synced: 8 months ago
JSON representation
This project is a solution to Frontend Mentor's IP Address Tracker challenge. Developed with React and styled using SCSS, the app integrates with an external API through Axios to provide real-time IP address tracking. It features a map visualization using Leaflet and custom React hooks for efficient data management. This is a practice project :)
- Host: GitHub
- URL: https://github.com/tedjenkler/ip-address-tracker-scss-axios-v2
- Owner: TedJenkler
- Created: 2024-07-31T05:54:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-02T08:15:25.000Z (over 1 year ago)
- Last Synced: 2025-01-22T02:32:27.745Z (10 months ago)
- Topics: axios, react, scss, vite
- Language: JavaScript
- Homepage: https://ip-tracker-v2.netlify.app/
- Size: 811 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - IP Address Tracker Solution
This is a solution to the [IP Address Tracker challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/ip-address-tracker-I8-0yYAH0). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of Contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Links](#links)
- [My Process](#my-process)
- [Built With](#built-with)
- [What I Learned](#what-i-learned)
- [Continued Development](#continued-development)
- [Useful Resources](#useful-resources)
- [Author](#author)
## Overview
### The Challenge
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements on the page
- See their own IP address on the map on the initial page load
- Search for any IP addresses or domains and see the key information and location
### Links
- Solution URL: [GitHub Repository](https://github.com/TedJenkler/IP-Address-Tracker-scss-axios-v2)
- Live Site URL: [Live Demo](https://ip-tracker-v2.netlify.app/)
## My Process
### Built With
- [Vite](https://vitejs.dev/) - A frontend build tool for fast development with a modern workflow.
- [React](https://reactjs.org/) - A JavaScript library for building user interfaces.
- [SCSS](https://sass-lang.com/documentation) - For advanced styling and creating flexible, maintainable stylesheets.
- [Axios](https://axios-http.com/docs/intro) - For making HTTP requests and handling data fetching.
### What I Learned
During this project, I gained more experience in the following areas:
- **SCSS:** Enhanced understanding of SCSS features like mixins, maps, variables, and responsive design.
- **Axios:** Improved skills in making HTTP requests and managing async data fetching.
- **Custom Hooks:** Developed and utilized custom React hooks for better code organization and reusability.
### Continued Development
- Plan to further improve responsiveness.
- Implement a feature to prompt users for their own API key or introduce a paywall when the default API key runs out of tokens.
### Useful Resources
- [SCSS Documentation](https://sass-lang.com/documentation) - For comprehensive details on SCSS syntax and features.
- [Axios Documentation](https://axios-http.com/docs/intro) - For guidance on making HTTP requests and handling responses with Axios.
- [Vite Documentation](https://vitejs.dev/) - For understanding and configuring Vite as a build tool and development server.
## Author
- Frontend Mentor - [@TedJenkler](https://www.frontendmentor.io/profile/TedJenkler)
- LinkedIn - [Teodor Jenkler](https://www.linkedin.com/in/tedjenklerwebdeveloper/)
- X - [@TJenkler](https://x.com/TJenkler)