$ show dimitridumont/clean-architecture-front-end
This repository is a front-end todo list application built with Next.js and React, demonstrating clean (hexagonal) architecture principles. The codebase is organized into domain, application, and infrastructure layers, promoting separation of concerns and testability. The domain layer contains pure use cases and interfaces, making it highly reusable. The infrastructure layer provides implementations for localStorage and in-memory storage. The application layer uses React components to interact with the domain via use cases. Despite the strong architectural foundation, the project suffers from significant technical drift due to outdated dependencies (Next.js 11, React 17, TypeScript 4.4, etc.), indicating a lack of recent maintenance.
The LLM identified 4 files worth highlighting for reuse:
Contains pure functions implementing the core use cases (get, add, toggle, remove todos) that depend on an abstract output port. Demonstrates the application of dependency inversion, making business logic independent of infrastructure concerns.
Defines the output port interface for todo persistence operations. Allows the domain layer to interact with any infrastructure (e.g., localStorage, REST API, in-memory) without knowing implementation details, promoting loose coupling and testability.
Implements the TodosOutput interface using an in-memory array. Includes methods to set and map data, serving as a versatile test double for unit tests. Demonstrates how to create a reliable infrastructure adapter independent of external systems.
A reusable React component that conditionally displays an error message. It is styled via CSS modules and is completely decoupled from application state and business logic, making it easy to reuse in any React project.