Users should be able to:
- See all countries from the API on the homepage - ✅
- Search for a country using an
inputfield - ✅ - Filter countries by region - ✅
- Click on a country to see more detailed information on a separate page - ✅
- Click through to the border countries on the detail page - ✅
- Toggle the color scheme between light and dark mode (optional) - ✅
- Vite - Frontend project scaffolding.
- React.js - JavaScript library
- TypeScript - Typed JavaScript Superset
- Tailwind CSS - CSS framework
One of the most valuable lessons I gained from this project was understanding the concept of paginating data and implementing an infinite scroll behavior to load additional content.
By simulating the request behavior, I successfully paginated the project's data and integrated infinite scroll functionality, which activates when users reach a predefined threshold.
In terms of styling, I chose a unique approach to this project, granting myself creative freedom and the opportunity to delve into more complex CSS techniques. This decision proved to be a great learning experience, as it allowed me to explore the trade-offs between aesthetics and performance, particularly when dealing with elements like blur, which can significantly impact a website's overall performance.
I also learned that designing is tricky and I'm not very good at it for now. 😄
I want to focus on optomizing my sites for a more speedy website. I want to find a good balance between visually pleasing and snappy. I also want to learn more about incorporating things like smooth scrolling and animations triggered by scroll.
- MDN - This is a given but most problems can usually be solved by reading the docs, extremely useful.
- SVG Repo - I used this site to source my svg icons.
- Website - Ditwan Price
- Frontend Mentor - @DitwanP