[2.1] Refactor: Apply Clean Architecture and Best Practices

[DaveSimoes]

Refactor Architecture and Apply Best Practices (2.1)

We aim to elevate the technical standard of this project, making it more modular, scalable, and aligned with industry best practices. This issue is part of the Repository Improvement Plan and covers the following topics:

Goals

• Refactor the code to follow recognized Design Patterns (e.g., Container/Presenter, custom hooks)
• Structure the project in layers, following Clean Architecture principles (separation between presentation, domain, and infrastructure)
• Ensure strong typing and well-defined interfaces using TypeScript
• Modularize reusable components into appropriate folders
• Implement an adequate logging system for development and production

Suggested Actions

• Review and propose improvements to the folder structure (e.g., /components, /hooks, /services, /utils, /api)
• Identify and extract custom hooks and common components
• Define and document interfaces/types for props, API responses, and domain data
• Create or improve logging utilities
• Document architectural decisions in an ARCHITECTURE.md file

Reference Materials

• Repository Improvement Plan
• Clean Architecture (article)
• React Design Patterns
• Official TypeScript Handbook for React

Checklist

• [ ] Folder structure revised and documented
• [ ] Custom hooks and components extracted and modularized
• [ ] TypeScript typing applied and documented
• [ ] Logging system implemented
• [ ] ARCHITECTURE.md file created/updated

---

Want to contribute?
Comment on this issue which item you’d like to tackle or suggest improvements!
Questions and suggestions are welcome.