https://github.com/richardcyrus/fm-ip-address-tracker
This is a solution to the IP address tracker challenge on Frontend Mentor
https://github.com/richardcyrus/fm-ip-address-tracker
css-flexbox css-grid frontend-mentor html5 ipify-api leafletjs sass vercel vercel-serverless vitejs vue3
Last synced: about 1 month ago
JSON representation
This is a solution to the IP address tracker challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/richardcyrus/fm-ip-address-tracker
- Owner: richardcyrus
- Created: 2021-06-20T02:31:03.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-04T18:36:37.000Z (almost 3 years ago)
- Last Synced: 2025-01-22T09:49:44.914Z (over 1 year ago)
- Topics: css-flexbox, css-grid, frontend-mentor, html5, ipify-api, leafletjs, sass, vercel, vercel-serverless, vitejs, vue3
- Language: SCSS
- Homepage: https://fm-ip-address-tracker-mu.vercel.app
- Size: 2.4 MB
- Stars: 1
- Watchers: 2
- 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)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Build out an IP Address Tracker app and get it looking as close to the reference design as possible. IP Address locations use the [IP Geolocation API by IPify](https://geo.ipify.org/). The map uses [LeafletJS](https://leafletjs.com/).
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
### Screenshot
- [Mobile](./design/screenshots/mobile-screenshot.png)
- [Desktop](./design/screenshots/desktop-screenshot.png)
#### Reference Design
- [Mobile](./design/reference/mobile-design.jpg)
- [Destop](./design/reference/desktop-design.jpg)
- [Active states](./design/reference/active-states.jpg)
### Links
- [Solution URL](https://www.frontendmentor.io/solutions/ip-address-tracker-vue-3-NIRkX4lYu)
- [Live Site URL](https://fm-ip-address-tracker-mu.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
### What I learned
- How to create a Vercel Serverless function. This allows me to keep from exposing the IPify API credentials in my JavaScript code.
### Useful resources
- [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Serverless Functions on Vercel](https://blog.iamsainikhil.com/article/serverless-functions-vercel)
- [Make a Simple API Endpoint with Vercel Serverless Functions](https://scottspence.com/2020/12/27/make-a-simple-api-endpoint-with-vercel/)
- [CSS in Action: Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)
- [Vue 3 CRUD example with Axios & Vue Router](https://bezkoder.com/vue-3-crud/)
- [Building an interactive map with Vue and Leaflet](https://blog.logrocket.com/building-an-interactive-map-with-vue-and-leaflet/)
- [Serverless Functions on Vercel](https://blog.iamsainikhil.com/article/serverless-functions-vercel)
- [Using Vite On Vercel](https://t3.gg/blog/posts/vite-vercel)
## Author
- Website - [www.richardcyrus.com](https://www.richardcyrus.com)
- Frontend Mentor - [@richardcyrus](https://www.frontendmentor.io/profile/richardcyrus)