Discover Countries - NextJs 16 app to learn clean architecture

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

I try to use clean architecture to build this solution. My domain don't depends of my infrastructure api call (the countries RESTful api the challenge use). As a result I could use another way to fetch countries and it will not be too difficult to implement it. I use modules that are a series of use cases related to a domain area, for now only "countries" but it could have other's later as for example "lakes" or "forests" from the world with their info and so on. I can change frontend framework and libraries (NextJs and React here) more easily even if I will need to rewrite the UI : I isolate the business logic outside UI components. These aspects make me proud as I wanted to learn this type of architecture. Of course in real life, I will not use clean architecture if - as it may be the case here - my business rules are too simple without need for important evolution.

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

1/ Flag's images size : I think in real pro project I would ask the customer if images can be designed using some utils (adobe and so on) and be stocked in some cloud (ex: Deemer, Proton-drive,AWS S3, Google, etc.) with a unique id linked to api information. Indeed I had difficulties to handle image style to align these image with my cards without distorting or hiding part of these images. I could create utilities in typescript to handle cases and applying rules to all my cards dynamically according to image format, however the best way would have been to work on all image themselves.

2/ NextJs trade-offs I decide to use params to filter my cards so I use the server utils (instead of a pure frontend React utils in a client-only way). The reason is that I wanted to test this way using also skeletons and suspens but also because I feel in this way I could retain history of user choices. As I want to grow this app beyond the challenge it is because I will have to reuse these choice later for a project I have in mind...

My challenge was also to respect clean architecture and partially DDD patterns using NextJs without losing NextJs utilities. NextJs is very good to enhance performance due to choice between server component, client component, new cache utilities and so on. NextJs is designed to use its own structure inside the app folder. So I decide sometimes to do some trade-off between my desire to respect clean architecture patterns and NextJs 16 design rules.

3/ Caching and performance I think I can improve the way I chose to cache part of my components so that I can enhance performance. For now I keep things simple but NextJs is very interesting to handle our cache and enhance performance if I have a lot of information to render and partial interactivity.

4/ No security nor good practices in api call I decide to handle security later so I know my app have no real security nor safe practices in api call. My code lack of some check-up. All that need to be done.

5/ Need to check RESTful practices: I also need to check that !

(...) There is a lot of things to do, I publish this challenge to be fast but I need to add security headers, enhance SEO with sitemap and a lot of other checks, respect rules for accessibility in europe, france as RGAA rules or USA (California have important set of rules for example) etc.

I can also create a CI/CD architecture using github actions and adding e2e tests as I only test with unit test but no integration or e2e tests are present.

Swagger or at least a documentation could also be a good things if I have multiple api call I need to explain and list in a Restful way.

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

I need to know :

• How to handle in a better way my flag image : if the image from api are not well (and that I cannot use another source), how to be better with tailwind to make flag taking full cards width but avoid being only partially visible (as I wanted to cover all so cannot contain) ?

• If you know some people that use clean architecture with nextjs and how they handle their use-case ?