https://github.com/snehalbaghel/countries

https://github.com/snehalbaghel/countries

Last synced: about 17 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/snehalbaghel/countries
• Owner: snehalbaghel
• Created: 2024-08-26T05:25:53.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-26T07:54:16.000Z (4 months ago)
• Last Synced: 2024-11-09T11:29:14.471Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://countries-ten-pi.vercel.app
• Size: 85.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### 🗺️ Architecture

The entire website is server rendered (using next app router) with one static route i.e. the **root** and a **dynamic route** which renders the country details page. API call to [restcountries](https://restcountries.com/) is made on the server, we only use `/all` endpoint and ruse the **cached response** (using `next/cache`) to get the country details.

Search is a client side function the search term is shared via react context.

> Components are co-located with the routes, other helper code is in the lib directory.

### ✍🏻 Considerations

- Data is used as is so operations of finding countries and bordering countries are O(n), can be improved with a map

- Even while we're using `next/cache` on the API it seems to not work perfectly since its an unstable api (app router itself seems a little bleeding edge right now), a custom endpoint with self implemented caching would perform better at this point

- While the list of countries is still fairly small using a **virtual list** will be more performant for mobile

- Using a store instead of context although with the current feature-set it is not required.

- Client side rendering for details page will be faster with the same amount of effort, I opted for server render for better SEO

- Accessibility is not perfect

### Libraries used

- Next.js 15 (React 18)

- TailwindCSS