Next.js, TS, Tailwind, Hybrid Fetching, No external libraries

What are you most proud of, and what would you do differently next time?

I am particularly proud of the hybrid data fetching architecture I designed. By combining Server-Side Rendering (SSR) for the initial page load with dynamic client-side fetching for the "Load More" functionality, I ensured both optimal SEO/performance and a seamless user experience. Furthermore, I implemented a custom dark mode toggle and a mock API service layer entirely from scratch, without relying on any external state management or utility libraries.

I am also proud of how I optimized my styling approach. During this project, I finally "clicked" with how to effectively manage CSS classes in Tailwind. Instead of repeating styles, I learned to leverage CSS inheritance by defining base font colors at the body level and applying overrides only where necessary. This significantly "slimmed down" my component classes, making the styles much more maintainable and clean.

What challenges did you encounter, and how did you overcome them?

The most significant challenge was handling the display of country flags. Initially, I struggled with finding a responsive approach that would maintain the visual integrity of the flags across different aspect ratios.

After experimenting with various CSS techniques, I decided against forcing flags into uniform, stretched containers. I realized that distorting a national flag is disrespectful to its heritage and official design. Instead, I opted for a fixed-proportion container with object-fit: contain, ensuring the flags are always displayed in their correct, non-distorted form, even if this meant sacrificing some "pixel-perfect" grid uniformity in the design. I believe that respecting the visual integrity of national symbols is more important than achieving an abstract design consistency.

Another challenge was working with the official REST Countries API. Its strict rate limits made it impractical for a reliable demo application. I realized that 500 requests per month would not provide a stable, consistent experience for users, nor would it allow me to demonstrate real-world API communication patterns effectively.

To overcome this, I decided to decouple the application from the live API and instead implemented a local mock API service layer using Next.js Route Handlers. This allowed me to simulate a real backend environment, including network latency, while ensuring the application remains fast and accessible regardless of external constraints.

What specific areas of your project would you like help with?

I’m constantly looking to improve my skills and learn better patterns, so any constructive criticism, even if it's about minor details is more than welcome!