FX-Checker using Next js

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

I'm most proud of building a currency exchange application using Next.js for the first time. The project pushed me beyond simply implementing the required features—I added extras such as dark/light themes, keyboard shortcuts, URL state persistence, cached exchange rates with offline handling, CSV export, toast notifications, and Supabase synchronization.

As the application grew, I refactored several components and custom hooks to improve maintainability. Starting with a more detailed architecture and state management plan would make future development smoother.

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

Since this was my first Next.js project, learning the App Router and adapting familiar React patterns to the Next.js environment was also a learning curve. Working through the official documentation and iteratively refactoring my code helped me become much more comfortable with the framework.

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

I'd appreciate feedback on the following areas:

• Project architecture: Whether my folder structure and component organization follow good Next.js practices.
• State management: Whether my use of React Context and custom hooks is scalable and if there are cleaner approaches.
• Performance: Opportunities to optimize rendering, API requests, or state updates.
• Code quality: Any recommendations for writing cleaner and more maintainable React/Next.js code.

As this is my first Next.js project, I'd especially value feedback that can help me improve my overall development practices for future projects.