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/matiussi/ip-address-tracker
- Live Site URL: https://matiussi-ip-address-tracker.netlify.app
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Context API
- Mobile-first workflow
- Axios - For fetching data
- is-ip - For validating IP addresses
- is-valid-domain - For validating domain names
- React - JS library
- Next.js - React framework
- SASS - SASS for styles
- Typescript - Typescript
- Tostify - For displaying warnings and erros
- My main goal in this project was to learn Typescript, developing this challenge helped me understand how simple and useful Typescript can be.
- How to fetch data (client side) and handle errors using Next.js.
- 'vw' and 'vh' CSS units can be very useful sometimes, but they don't solve every problem by themselfs.
- Wrapping all of your code in a try/catch block isn't a good ideia, when I was developing this challenge I decided to create a simple loading state using Context API. I had the brilliant ideia to wrap my setLoading in a try/catch block, everything was working fine until a response error happened and froze the website... I spent a lot of time trying to fix it, and I thought that my problem was related to data fetching, after searching for a couple minutes I found an awesome tutorial written by ROBIN WIERUCH (link below). He also used a loading state, but no wrapped with try/catch. In the end I realize my mistake and I felt really stupid. Sorry, I just needed to vent.
- Typescript is an awesome language, I'll definitelly use in my future projects.
- Responsive layouts, I still have problems scaling my websites to big screens (>2K).
- How to fetch data with react hooks? - This tutorial helped me a lot! One of the bests tutorials I ever read.
- Frontend Mentor - @matiussi-2035