This is a solution to the IP address tracker challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Solution URL: https://github.com/MrGeminus/ip-address-tracker-master
- Live Site URL: https://mrgeminus-ip-address-tracker-master.netlify.app/
- Semantic HTML5 markup
- Accessibility
- BEM
- SCSS
- Mobile-first workflow
- TypeScript
- Leaflet
- Ipify
- Axios
- Parcel
- ESLint
- Netlify Serverless Functions
I learned a lot of things while working on this project.
The most challenging parts were how to type-check the Leaflet library and configure ESLint for usage with TypeScript and Parcel bundler.
Although, making the app accessible was also quite challenging.
Besides continuing to improve the accessibility of my websites, I also plan to use ESlint more in the future.
- Sass Guidelines - The sass guidelines helped me get a general idea of how to organize my SCSS files and folders.
- Accessible Search Forms - This article explores how to make search forms more accessible to disabled people.
- Leaflet's Guide on Accessible Maps - In this guide, you can read Leaflet's suggestions on how to make maps more accessible.
- Accessibility Testing Tools - Here you can find a list of tools that you can use to check how accessible your website is.
- Netlify Serverless Functions with TypeScript - Netlify serverless functions are a great way to hide your private API keys.
- Font Awesome - Font Awesome has an extensive collection of icons.
- Website - MrGeminus
- Frontend Mentor - @MrGeminus
- YouTube - MrGeminus
- Twitter - @MrGeminus