Skip to content
Submitted 23 days ago

Responsive Countries Page - NextJS

react, react-aria, motion, next
LVL 4
@kim-fransson
A solution to the REST Countries API with color theme switcher challenge

Solution retrospective


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

I'm really happy with how the collaboration with Claude turned out. It helped me move faster while still keeping personal touches in the final product, things like the boop effects and metadata that make it feel like my project, not just a generated one. I'm also proud of the architecture decisions I made around component structure, layouts, and loading states. Those felt well thought-out and gave the project a solid foundation.

I had a lot of markdown files for Claude to read from, and it felt like that burned through a lot of tokens and context. The MCP server for React Aria documentation, in particular, might not have been worth the overhead — it could have been simpler to just reference the React Aria docs myself and build the final components by hand.

Reconsider the static site approach for the landing page. I was keen on making it fully static, but it introduced friction when I needed to include the dark/light theme toggle, which requires client-side state. Next time I'd weigh that trade-off earlier.

Invest more in screen reader accessibility. The project has some accessibility work in it, but I'd like to spend more time testing and refining the experience for screen reader users specifically.

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

The main challenge wasn't technical, it was managing the cost and efficiency of working with Claude. Simple tasks often burned through more tokens than expected, largely because the CLAUDE.md file had grown too large with too many references, and the React Aria MCP server added additional context overhead on top of that. Every interaction was loading a lot of instructions and documentation that wasn't always needed for the task at hand.

I haven't fully solved this yet, but I've identified the root causes and have a plan going forward. I want to simplify the setup , a leaner CLAUDE.md with fewer references, and potentially dropping the MCP server in favor of reading documentation directly. I've also found a 12-hour FreeCodeCamp session on Claude Code that I plan to go through to improve how I structure the collaboration and keep token usage in check.

course: https://www.freecodecamp.org/news/claude-code-essentials-exampro/

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Kim Fransson’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord