Rest Countries API (Next.js, Tailwind)

All the learnings came together in this project, thank you frontend mentor! Feedback is much appreciated. I wanted to use the URL' s search params as the source of truth for the form state, but then realized I'll no longer have the benefits of static site generation. If you have any ideas, please do share, thanks!

Tech Stack: Next.js and Tailwind

Rendering strategy: SSG, because the content can be generated at build time.

• The home route is statically generated with client side updates for the form.
• The details route is completely statically generated.

Routes

• /
• /country/[code]

Responsive design: I forced myself to write as less media queries as possible, while maintaining the layouts close to design.

• Minimized the use of media queries by using max-width, flexbox and grid layouts.
• The details page has ZERO media queries for the layout and I'm really happy that I pulled it off. flex-wrap for the win!

Performance:

• Used fetchPriority and loading attributes on images as appropriate.
• Rendered only 12 cards on the initial load to reduce the transfer size and dom nodes. More cards are rendered as the user scrolls down. Made use of the IntersectionObserver API to achieve this.
• Images not in the viewport are lazy loaded, thanks to the loading attribute.
• Implemented memoization and debouncing to decrease/eliminate unnecessary react re-renders.

UX:

• Added loading skeleton animation for the images.
• Added feedback message for when no data is found for the given combination of form's state.
• Light / Dark mode.

Modifications to original design:

• I didn't find much value in the back button in the details page, so I removed it.

Performance metrics(perf, a11y, best practices, seo): Page speed insights

• Mobile: 91, 100, 100, 100
• Desktop: 98, 100, 100, 100

Potential improvements:

• Move form state to URL in the home page. This enables bookmarking the page with the search parameters.
• Styling of the options in the form.