alan-nascimento/react-clean-architecture

This system is a React-based web application that manages user accounts and survey interactions. It provides features for user registration, authentication, and the ability to view, submit, and retrieve survey results. The architecture separates domain logic from data access and presentation layers, utilizing Recoil for state management and Axios for HTTP communication.

Added new presentation components for displaying dates and status icons. The Calendar component renders a styled date block showing the day, month, and year. The Icon component renders a circular badge that displays either a thumbs-up or thumbs-down image, with the background color changing to green or red based on the icon name.

src/presentation/components/calendar · high confidence

A new CompareFieldsValidation validator has been introduced, allowing users to ensure that two specified fields in a form or data object are equal. The implementation validates that the values match, returning an InvalidFieldError if they differ, or null if they are identical.

src/validation/validators/compare-fields · high confidence

A new Error component has been added to the presentation layer, providing a styled container that displays an error message and a 'Try again' button to trigger a reload action. This component allows users to view error notifications and attempt to recover from errors within the application.

src/presentation/components/error · high confidence

The Header component now renders the current user's name and provides a logout button. The component uses Recoil's useRecoilValue to access the current account state and the useLogout hook to handle the logout action, which clears the account and redirects to the login page. The component's styling is defined in a new SCSS file, and the component's behavior is verified by new unit tests.

src/presentation/components/header · medium confidence

A new LocalStorageAdapter has been introduced to handle local storage operations, implementing the SetStorage and GetStorage interfaces. This adapter manages caching by serializing objects to JSON when storing values, and parsing them back when retrieving. It also ensures that if a value is undefined or null, the corresponding key is removed from local storage rather than storing a null value. Tests confirm that set() correctly calls localStorage.setItem or localStorage.removeItem, and get() correctly retrieves and parses stored values.

src/infra/cache · high confidence

A new MinLengthValidation class has been introduced to validate that a given field's value meets a specified minimum length. The implementation checks the length of the input field and returns an InvalidFieldError if the value is shorter than the configured minimum, otherwise it returns null (falsy) to indicate validity. The accompanying test suite verifies that invalid values trigger the error, valid values pass, and missing fields are handled gracefully.

src/validation/validators/min-length · high confidence

A new SurveyList page component has been introduced, which fetches and displays a list of surveys. The component manages local state for surveys, errors, and reload triggers, and includes a reload button to refresh the list. It handles errors by displaying an Error component and supports logout on AccessDeniedError. The implementation includes a spec file with tests for rendering, error handling, and reload functionality, along with corresponding SCSS styles.

src/presentation/pages/survey-list · high confidence

A new ValidationBuilder class is introduced in src/validation/validators/builder, providing a fluent API to compose multiple field-level validations (RequiredFieldValidation, EmailValidation, MinLengthValidation, and CompareFieldsValidation) into a single list. The builder supports chaining methods for required, email, min length, and same-as comparisons, returning an array of FieldValidation instances.

src/validation/validators/builder · high confidence

A new factory function, makeAuthorizeHttpClientDecorator, has been added to create an HTTP client that enforces authorization. This factory composes an Axios-based HTTP client with a local storage adapter to provide an authorized HTTP client instance.

src/main/factories/decorators · high confidence

Users can now utilize a new local storage adapter for caching, created via the \makeLocalStorageAdapter\ factory function. This addition enables the application to store and retrieve data in the browser's local storage, providing a persistent client-side cache mechanism.

src/main/factories/cache · high confidence

The login page now features a complete form with email and password fields, utilizing Recoil for state management (loginState) to handle loading, error, and form validity states. The implementation includes validation logic that disables the submit button when the form is invalid, displays specific field errors, and manages the authentication flow by calling the Authentication use case and navigating to the main page upon success.

src/presentation/pages/login · high confidence

A new SignUp page has been introduced, allowing users to create an account by providing their name, email, and password. The page includes form validation, displays error messages for invalid fields, and handles the account creation flow by calling the AddAccount use case. The implementation uses Recoil for state management and includes specific components for input fields, form status, and a submit button.

src/presentation/pages/signup · high confidence

The RemoteAddAccount class now implements the AddAccount use case, sending a POST request to a configurable URL. On a 200 response, it returns the account model; on 403 (forbidden), it throws an EmailInUseError; and for any other status code (including 400, 404, or 500), it throws an UnexpectedError. A corresponding test suite verifies these behaviors.

src/data/usecases/add-account · high confidence

The RemoteAuthentication use-case is now implemented to handle remote login by calling the HTTP client with the correct URL, method, and body. It maps HTTP 200 responses to return the authentication model, while treating 401 as an InvalidCredentialsError and any other non-200 status as an UnexpectedError. A corresponding test suite verifies these behaviors, including error handling for 400, 404, and 500 status codes.

src/data/usecases/authentication · high confidence

The RemoteLoadSurveyList class has been introduced to handle fetching survey data from a remote API. It implements the LoadSurveyList interface, mapping HTTP responses to domain models: it returns a list of surveys on a 200 OK, an empty list on 204 No Content, throws an AccessDeniedError on 403, and throws an UnexpectedError for other status codes like 404 or 500. The implementation includes a corresponding test suite verifying these behaviors.

src/data/usecases/load-survey-list · high confidence

A new factory function, makeRemoteLoadSurveyList, has been added to construct the remote implementation of the LoadSurveyList use case. This factory composes the RemoteLoadSurveyList with the API URL and an authorization HTTP client decorator, enabling the application to fetch survey lists from the remote server.

src/main/factories/usecases/load-survey-list · medium confidence

Users will now have their access token automatically injected into the headers of HTTP requests via the new AuthorizeHttpClientDecorator. This ensures that authenticated requests carry the necessary 'x-access-token' header, while preserving any existing headers in the request.

src/main/decorators · high confidence

The repository now includes configuration files for TypeScript, ESLint, Webpack (development and production), Jest, and Cypress, alongside CI/CD setup for Travis CI and Heroku deployment. This establishes the project's build pipeline, code quality enforcement, and automated testing infrastructure.

(repo-wide) · high confidence

New domain use cases have been introduced to support account registration, authentication, and survey interactions. Specifically, the system now includes AddAccount and Authentication use cases to handle account creation and user login flows. Additionally, new use cases for surveys have been added: LoadSurveyList and LoadSurveyResult allow users to retrieve survey lists and individual results, while SaveSurveyResult enables the submission of survey answers. These changes expand the domain layer's capabilities to support core user-facing features for account and survey management.

src/domain/usecases · high confidence

Users can now have their email addresses validated for format correctness. The new EmailValidation component checks if the provided value matches a standard email pattern, returning an error for invalid formats. The implementation also handles empty values gracefully, ensuring that empty inputs do not trigger validation errors.

src/validation/validators/email, src/validation/validators/required-field · high confidence

A new FieldValidation interface has been introduced to define the contract for field validation logic. This protocol specifies that a field validation must include a 'field' identifier and a 'validate' method that accepts an object and returns an Error, enabling consistent validation behavior across the application.

src/validation/protocols · high confidence

A new Spinner component has been introduced to the presentation layer, providing a visual loading indicator. The component renders four animated dots with a pulsing and sliding animation, supporting a 'negative' variant for use on dark backgrounds. This component is now available for use across the application to indicate asynchronous states.

src/presentation/components/spinner · high confidence

New protocol interfaces have been introduced to standardize data access, including an HTTP client interface for making requests and handling responses, as well as generic get and set storage interfaces for local caching. These changes provide a consistent abstraction layer for network and storage operations, allowing the application to interact with remote APIs and local storage through defined contracts.

src/data/protocols · high confidence

Introduced the RemoteSaveSurveyResult and RemoteLoadSurveyResult use cases, which handle HTTP communication for saving and loading survey results respectively. These are wired up via new factory methods (makeRemoteSaveSurveyResult, makeRemoteLoadSurveyResult) that configure the HTTP client with authorization headers. Additionally, a new Loading component has been added to the presentation layer to display a full-screen overlay with a spinner while data is being fetched or saved.

(repo-wide) · high confidence

Introduced the RemoteLoadSurveyResult class, which fetches survey data via an HTTP GET request. The implementation maps HTTP status codes to specific outcomes: a 200 OK response returns the survey result with the date converted to a Date object, a 403 Forbidden status throws an AccessDeniedError, and any other status (including 404 and 500) throws an UnexpectedError. A corresponding test suite was added to verify the correct URL and method usage, as well as the error handling for forbidden and server errors.

src/data/usecases/load-survey-result · high confidence

The survey list page now includes new presentation components: SurveyItem, which renders individual survey cards with question text, date, and a link to results; SurveyItemEmpty, which displays a loading skeleton; and List, which renders the collection of items or the empty state. These components are exported from the components index and styled with SCSS, including responsive adjustments for mobile screens.

src/presentation/pages/survey-list/components · high confidence

The src/data/usecases/index.ts file is introduced to export several new use-case implementations: remote-add-account, remote-authentication, remote-load-survey-list, remote-load-survey-result, and remote-save-survey-result. This makes these specific data-layer components available for use in the application's business logic.

src/data/usecases · high confidence

The application's main entry point (src/main/index.tsx) has been created to render the Router component within the 'main' DOM element, establishing the root of the React tree. Additionally, a new factory (remote-add-account-factory.ts) has been added to the main layer to instantiate the RemoteAddAccount use case, wiring together the API URL and HTTP client dependencies.

src/main · medium confidence

The HTTP infrastructure layer now includes a new AxiosHttpClient implementation that wraps the Axios library to handle HTTP requests. This change adds the AxiosHttpClient class and its corresponding test suite, enabling the application to perform HTTP operations using Axios. The implementation maps HTTP requests to Axios requests and handles both successful responses and errors, ensuring that the application can reliably communicate with external services.

src/infra/http · high confidence

The application now defines explicit type models for account data and survey results. The AccountModel includes an access token and a name, while the SurveyResultModel captures a question, date, and a list of answers, each containing an optional image, answer text, count, percentage, and a flag indicating if it is the current account's answer. These models provide a structured representation of user account information and survey outcome data within the domain layer.

src/domain/models · high confidence

A new validation module is introduced at src/validation/validators, exporting five specific validators (CompareFields, Email, MinLength, RequiredField, and ValidationComposite) alongside a ValidationBuilder. This change provides a centralized set of validation rules and a builder pattern for constructing validation logic.

src/validation/validators · high confidence

The presentation layer now exposes a centralized registry of UI components via \src/presentation/components/index.ts\, which re-exports a suite of atomic and structural elements including Calendar, Error, Footer, FormStatusBase, Header, Icon, InputBase, Loading, LoginHeader, Logo, PrivateRoute, Spinner, and SubmitButtonBase. Specific implementations are added for the brand Logo and a SubmitButton that conditionally disables based on form validity, enabling consistent UI construction across the application.

src/presentation/components · high confidence

The validation module now exports specific error types—InvalidFieldError and RequiredFieldError—to distinguish between invalid and missing field states. This allows consumers to catch and handle these distinct validation failure modes programmatically.

src/validation/errors · high confidence

The application now provides factory functions to assemble the Login, SignUp, SurveyList, and SurveyResult pages with their respective validation and use-case dependencies. Users can now access the login and signup flows, as well as view and interact with surveys, through these new composition layers that wire up the UI components to the remote authentication, account creation, and survey loading/saving services.

src/main/factories/pages · high confidence

The application now exposes a unified presentation layer for user-facing pages, including Login, SignUp, SurveyList, and SurveyResult. This change introduces the \src/presentation/pages\ directory, which serves as the public API for the UI components, allowing consumers to import these pages directly from the index file.

src/presentation/pages · medium confidence

A new Input component has been introduced in the presentation layer, featuring a floating label that animates on focus, visual feedback for valid/invalid states via border color changes, and controlled state management through props. The component includes specific test coverage for read-only states, focus behavior, and label interaction.

src/presentation/components/input · high confidence

A new data model for remote survey results has been introduced, defining the structure for survey questions, dates, and associated answers including image references, text, counts, percentages, and account status flags.

src/data/models · high confidence

The ValidationComposite class has been implemented to manage a collection of FieldValidation instances. When validate is called, it iterates through the registered validators for a given field and returns the error message from the first validator that fails. If all validations pass, it returns falsy. The implementation uses a static build method for instantiation and relies on a test spy for verification.

src/validation/validators/validation-composite · high confidence

The presentation layer now includes global styles that define the application's visual theme. This includes a color palette with primary, disabled, and validation states, along with global resets for fonts and inputs. Additionally, button elements are styled with the primary color and hover effects, while a shimmer animation keyframe is introduced for loading states.

src/presentation/styles · high confidence

The form's loading and error states are now rendered by a new \FormStatus\ component, which conditionally displays a spinner or an error message based on the provided state. This change separates the visual representation of the form's status from the parent component, making the UI logic more modular and easier to test.

src/presentation/components/form-status · high confidence

The login header and footer have been separated into their own distinct components (LoginHeader and Footer) with their own stylesheets. The login header now includes a logo and title, while the footer provides a minimal height container, improving code organization and reusability.

src/presentation/components/footer, src/presentation/components/login-header · high confidence

The logic for creating a remote authentication use-case has been moved from a shared or monolithic factory into a dedicated file (remote-authentication-factory.ts). This change isolates the construction of the RemoteAuthentication component, which now explicitly depends on an API URL for the '/login' endpoint and an Axios HTTP client, making the authentication flow's dependencies clearer and more modular.

src/main/factories/usecases/authentication · medium confidence

The HTTP factory layer is now split into dedicated modules: a new \api-url-factory.ts\ that constructs API URLs using the \API\_URL\ environment variable, and a new \axios-http-client-factory.ts\ that instantiates the \AxiosHttpClient\. These are re-exported via a new \index.ts\ in the \src/main/factories/http\ directory, providing a cleaner, modular structure for HTTP-related dependencies.

src/main/factories/http · high confidence

A new Validation interface is introduced, defining a validate method that accepts a field name and an input object to return a string, likely for error messages. This establishes a protocol for validation logic within the presentation layer.

src/presentation/protocols · high confidence

The application now uses dedicated error classes—AccessDeniedError, EmailInUseError, InvalidCredentialsError, and UnexpectedError—to handle specific failure scenarios. This allows the RemoteAuthentication and RemoteAddAccount services to throw these distinct errors, enabling more precise error handling and user feedback for cases like denied access, duplicate email registration, invalid credentials, or unexpected system failures.

src/domain/errors · high confidence

The application's state management for the current user account has been refactored to use Recoil. A new Recoil atom (currentAccountState) is introduced in the presentation layer to manage account state, while the corresponding adapter layer now provides functions to read and write account data via local storage, replacing the previous React Context-based implementation.

src/main/adapters, src/presentation/components/atoms · medium confidence

The application's routing layer has been refactored to use Recoil for state management, replacing the previous context-based approach. The new Router component initializes the 'currentAccountState' within a RecoilRoot, ensuring that account data is accessible throughout the application's navigation structure, including protected routes for surveys and results.

src/main/routes · medium confidence

Added new hooks in src/presentation/hooks to manage user logout and error handling. The useLogout hook now utilizes Recoil's useRecoilValue to access the currentAccountState, replacing the previous React context-based implementation. The useErrorHandler hook was introduced to centralize error handling logic, specifically triggering the logout flow when an AccessDeniedError occurs.

src/presentation/hooks · medium confidence

The PrivateRoute component now uses Recoil to check for an access token. If a token is present, the protected component is rendered; otherwise, the user is redirected to /login.

src/presentation/components/private-route · medium confidence

The survey result page now manages its state using Recoil atoms (surveyResultState and onSurveyAnswerState) instead of React Context. This change introduces a new component structure with separate Answer and Result components, each with their own styles, and updates the main page component to use hooks like useRecoilState and useSetRecoilState for managing loading, error, and survey result data.

src/presentation/pages/survey-result · medium confidence

Added Cypress integration tests for login, signup, survey list, and survey result pages; Added Jest setup and SASS module type declarations; Added domain test utilities for account, authentication, and survey features; Added test helper utilities for form validation and rendering; Added test mocks for HTTP client, cache, and remote survey data; Added test utilities for field validation; Added test utilities for mocking HTTP requests.

The project now depends on React 16.13 and React-DOM 16.13, alongside the addition of the Recoil state management library (0.0.13) and its types. This introduces a new state management approach for the application's client-side logic.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 41 → 41 (+0.1)
• Rubric changed (rubric-2026.08.18 → rubric-2026.08.19) — scores are not directly comparable.

• Code Health 94 → 96 (+1.4)
• Architecture 57 → 57 (+0.0)
• Maturity 31 → 31 (+0.0)
• Readiness 44 → 44 (+0.6)
• Security 75 → 75 (+0.0)
• Domain Modelling 100 → 100 (+0.0)
• Accessibility 39 → 39 (+0.0)

• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High vulnerability: [GHSA redacted] (package-lock.json)
• High vulnerability: [GHSA redacted] (package-lock.json)

• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• Critical CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

alan-nascimento/react-clean-architecture was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.