Responsive, React, Node fetch, React router, CSS Flexbox, Context API

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

✅ What I'm Most Proud Of One of the most challenging and rewarding parts of building the Nations Directory project was overcoming the CORS issue when fetching data from the REST Countries API.

Instead of relying on third-party proxies or compromising the functionality, I implemented a custom proxy layer using Netlify Functions. This allowed me to:

1. Bypass CORS restrictions cleanly

2. Keep API calls secure and seamless

3. Gain hands-on experience with serverless architecture

I’m especially proud because it was my first time integrating backend logic into a frontend project, and it worked reliably in production. The project remained fully frontend-hosted, yet had the power of a mini backend function — which felt like a solid full-stack learning milestone.

You can view the live project here: 🔗 Nations Directory

🔁 What I Would Do Differently If I were to redo or improve the project in the future, here are a few things I would focus on:

1. Improve accessibility (a11y) Add better keyboard navigation, focus indicators, and screen reader support.

2. Optimize performance Show skeleton loaders or cached responses to improve perceived performance during initial data fetching.

3. Internationalization (i18n) Add support for multiple languages to make the app more globally user-friendly.

4. Add unit and integration tests Especially for key components like country cards and filters, to catch UI or logic regressions early.

Submit to Google Search Console early To speed up SEO indexing and improve discoverability of the deployed site.

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

🧩 What Challenges Did I Encounter, and How Did I Overcome Them?

1. CORS Error When Fetching Data from REST Countries API One of the biggest challenges was facing a CORS (Cross-Origin Resource Sharing) error while trying to fetch data directly from the REST Countries API. The browser blocked requests because the API didn’t send the required CORS headers.

How I solved it:

I created a custom proxy using Netlify Functions, which acted as a middleware between my frontend and the external API.

This approach not only solved the CORS issue but also gave me experience working with serverless functions and deploying backend logic in a frontend-focused project.

2. Handling Large Amounts of Data Efficiently The API returns data for over 200 countries, which could affect performance and user experience when rendering the full list.

How I solved it:

Implemented lazy rendering and optimized component re-renders using React.memo() where necessary.

Added filter and search functionality to help users find specific countries quickly, reducing unnecessary DOM updates.

3. Ensuring Mobile Responsiveness Some layout issues appeared on smaller screens due to inconsistent spacing and grid behavior.

How I solved it:

Used a mobile-first approach in my CSS and adjusted flexlayouts to adapt to various screen sizes.

Regularly tested with Chrome DevTools and actual devices to fine-tune responsiveness.

4. Improving SEO and Metadata Initially, the project wasn’t appearing in search engines, and the preview snippets on social platforms were missing.

How I solved it:

Added detailed <meta> tags including title, description, og:image, and more.

Submitted the site to Google Search Console for indexing and monitored coverage reports.

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

🛠️ What Specific Areas Would I Like Help With?

While the core functionality of the Nations Directory project is working well, there are a few areas where I’d appreciate feedback or improvement suggestions:

• Accessibility (a11y): I'd like help making the app more keyboard- and screen-reader-friendly.
• Testing: I want to start adding unit or integration tests but I’m not sure where to begin or what tools to use with React and Netlify Functions.
• Performance Optimization: Guidance on how to improve loading times and responsiveness for users with slower internet connections.
• Code Architecture: I’d appreciate a review of my folder structure and component logic — to ensure it's scalable and clean.
• SEO Strategy: I'd like advice on better practices to ensure my project is indexed quickly and appears in search results effectively.

If there's something I’ve missed or could’ve done better, I’m open to learning and improving.