Skip to content
CAI
Software that uses CAICheck a score

yudwig/next-redux-todo

44.7

Weak · 21 September 2026

1.4k

lines of production code

TypeScript

primary language

4

measurements over time

CAI band scale
CAI trend line
CAI lens gauges

What this system is

This system is a task management application built with Next.js, TypeScript, and Redux for state management. It provides a user interface for creating, editing, archiving, and completing tasks, with a focus on a clean, component-driven UI using Material-UI and Storybook. The application manages task states (inbox, archived, completed) and navigation states through a centralized Redux store, offering a responsive layout with collapsible sidebars and inline editing capabilities.

Features

Add Archived Task List component

A new ArchivedTaskList component has been introduced to display a list of archived tasks. This component renders each task using the existing TaskListItem molecule, showing the title and completion status, and provides an 'unarchive' button for each item. Clicking this button triggers a Redux dispatch to the 'unarchive' operation, allowing users to restore archived tasks.

src/components/organisms/ArchivedTaskList · high confidence

Add Navbar component and Storybook stories

A new Navbar molecule component has been introduced, rendering a sticky Material-UI AppBar containing a HamburgerButton and SiteLogo. The component accepts title and onToggleDrawer props, and includes corresponding Storybook stories for visual testing.

src/components/molecules/Navbar · high confidence

Add TaskRegisterForm component with Redux integration

A new TaskRegisterForm component has been introduced, allowing users to input and submit task titles via a form that dispatches a Redux action to create a new task. The component includes keyboard handling for the Escape key and form submission logic, accompanied by a Storybook story for visual testing.

src/components/organisms/TaskRegisterForm · high confidence

Add TextInput component and Storybook story

Introduced a new TextInput component that wraps Material-UI's TextField with a styled variant that enforces full-width layout. A corresponding Storybook story was added to visualize the component in the 'atoms/TextInput' section of the Storybook UI.

src/components/atoms/HamburgerButton, src/components/atoms/TextInput · high confidence

Add ToggleInput component with edit-in-place functionality

A new ToggleInput component has been introduced to enable inline editing of titles. The component displays a title that, when clicked, switches to an editable text input. Users can confirm changes by pressing Enter or clicking outside the input, and can cancel or reset the title by pressing the Escape key. A corresponding Storybook story has also been added to demonstrate the component.

src/components/atoms/ToggleInput · high confidence

Add WithNavigationLayout component and Storybook story

A new layout component, WithNavigationLayout, has been added to the templates directory. It wraps content with a \<Head\> element for metadata and a \<Navigation\> organism, accepting a pageTitle prop. A corresponding Storybook story has been created to showcase the component.

src/components/templates · high confidence

Add archived task list page

A new page for viewing archived tasks has been added. This page renders the 'ArchivedTaskList' component, which displays tasks retrieved via the 'getArchivedTasks' selector, wrapped in the standard navigation layout.

src/pages/tasks · high confidence

Added CloseButton and TemporaryDrawer components

Introduced a new CloseButton atom that renders a styled Material-UI IconButton with a close icon, and a TemporaryDrawer organism that wraps a Material-UI Drawer with a fixed 200px width, a 70px header containing the CloseButton, and support for child content. These components provide reusable UI primitives for closing actions and temporary side panels.

src/components/atoms/CloseButton, src/components/organisms/TemporaryDrawer · medium confidence

Added TaskList component with status and archive interactions

A new TaskList component has been introduced to render a list of tasks, integrating with Redux to handle user interactions. The component maps over a list of task objects, rendering each as a TaskListItem, and wires up event handlers for title updates, status toggling, and archiving tasks.

src/components/organisms/TaskList · high confidence

Initial Storybook configuration and preview setup

Added Storybook configuration files (.storybook/main.js and .storybook/preview.js) to enable a component development environment. The setup includes essential addons (links, essentials) and establishes a global preview decorator that wraps stories with Material-UI, styled-components, and React Redux providers, allowing developers to view and test UI components in isolation.

.storybook · high confidence

Introduce ArchivedStateButton component for archive/unarchive actions

A new ArchivedStateButton component has been added to the atoms library, providing a styled IconButton that renders either a DeleteOutline or UnarchiveOutlined icon based on the iconType prop. A corresponding Storybook story has been added to visualize the component in both archive and unarchive states.

src/components/atoms/ArchivedStateButton · high confidence

Introduce MiniVariantDrawer component with dynamic width and state-driven text visibility

A new MiniVariantDrawer component has been added, implementing a permanent Material-UI drawer that dynamically adjusts its width between 58px and 200px based on its 'open' prop. The component also conditionally hides text elements when closed, providing a compact navigation interface. Storybook stories have been added to demonstrate the open and close states.

src/components/organisms/MiniVariantDrawer · high confidence

Introduce Navigation component with responsive drawer layouts

Added a new Navigation component that renders a Navbar and a responsive drawer system. On small screens, it displays a temporary drawer, while on larger screens it shows a mini-variant drawer. The component integrates with the Redux store to manage drawer states and includes a Storybook story for the component.

src/components/organisms/Navigation · high confidence

Introduce TaskListItem component for task management

A new TaskListItem component has been added to the application, providing a reusable UI element for displaying individual tasks. This component renders a list item containing a status indicator, an editable title, and an archive/unarchive button. It supports props for title, completion status, disabled state, and button type, along with event handlers for status toggling, button clicks, and title updates. A corresponding Storybook story has also been added to showcase the component's various states.

src/components/molecules/TaskListItem · high confidence

Introduces a new Task model with value objects and factory

The src/models directory now contains a new Task model implementation, introducing value objects for Id, Title, and Status, along with a Factory for creation. The Task class includes properties for title, status, archived state, and creation timestamp, with methods to complete, archive, and change titles.

src/models · high confidence

A new DrawerLinkList component has been added to the application. It renders a list of navigation links for 'Inbox' and 'Archive' pages, using Material-UI components and styled-components for styling. The component supports a 'shortMode' prop to control text visibility and handles link selection state based on the current route.

src/components/molecules/DrawerLinkList · high confidence

Project bootstrapped with TypeScript, ESLint, and Storybook

The repository has been initialized with a modern frontend stack, introducing TypeScript for type safety, ESLint with AirBnB and React/TypeScript-specific rules for code quality, and Storybook for component development. Configuration files (.babelrc, .eslintrc.json, tsconfig.json) have been added to support these tools, and the README has been updated to reflect the new technology stack and development commands.

(repo-wide) · high confidence

Behavioural changes

Add disabled state to StatusIndicator component

The StatusIndicator component now supports a 'disabled' prop, which disables the underlying button and checkbox elements, preventing user interaction when the status indicator is in a disabled state.

src/components/atoms/StatusIndicator · high confidence

Add global theme, SSR styling, and Redux integration to the app shell

The application now supports server-side rendering (SSR) for styled-components and Material-UI, ensuring consistent styles during initial load. A global theme configuration has been introduced, and the app shell (\_app.tsx) now wraps all pages with the Redux store provider, Material-UI theme provider, and styled-components theme provider. The main index page is updated to use the new layout and Redux selectors for task data.

src/pages · medium confidence

Centralized state management with Redux

The application now uses a centralized Redux store to manage global state, including tasks and navigation (drawer) states. This replaces the previous approach where each page shared its own store, ensuring consistent state across the application. The store is configured with preloaded state for tasks and navigation, and Redux DevTools are enabled in non-production environments.

src/states · high confidence

The navigation state logic has been restructured into separate modules for actions, operations, reducers, and selectors. This change introduces specific state properties for drawer visibility (isOpenDrawer) and expansion (isExpandDrawer), allowing the application to independently control the open/closed and expanded/collapsed states of the navigation drawer.

src/states/nav · high confidence

Removal of default Home page and global CSS styles

The default styling for the Home page and global layout has been removed. Specifically, the CSS modules file (Home.module.css) and the global stylesheet (globals.css) have been deleted, meaning the application no longer applies the previous layout, typography, and color rules to the home section and body elements.

styles · high confidence

Removal of default Next.js template pages

The default Next.js template files have been removed from the application. This includes the main entry point (pages/\_app.js), the API route handler (pages/api/hello.js), and the home page component (pages/index.js). Users will no longer have access to the pre-built landing page, global styles, or the example API endpoint.

pages · high confidence

The SiteLogo component has been updated to wrap its content in a Next.js Link, making the logo clickable and directing users to the home page (/). This change is accompanied by the addition of Storybook stories for the component.

src/components/atoms/SiteLogo · high confidence

Task state management refactored with new action types and selectors

The task state management has been refactored to support a broader set of operations, including archiving, completing, and updating tasks. New action types (CREATE\_TASK, UPDATE\_TASK\_TITLE, COMPLETE\_TASK, INABORTed, ARCHIVE\_TASK, UNARCHIVE\_TASK) are now available in the Redux store. The selectors have been updated to provide separate views for inbox and archived tasks, and the task model now uses 'isCompleted' and 'isArchived' states to manage task lifecycle.

src/states/tasks · high confidence

Updated global font-family for the HTML element

The global stylesheet now explicitly sets the font-family for the html element to a standard system font stack, replacing the previous default CSS configuration.

src/styles · high confidence

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

How this codebase got here

Score

  • CAI 44 → 45 (+0.4)
  • Rubric changed (rubric-2026.08.19 → rubric-2026.09.15) — scores are not directly comparable.

Lenses

  • Code Health 96 → 98 (+1.6)
  • Architecture 69 → 69 (+0.0)
  • Maturity 55 → 55 (+0.0)
  • Readiness 18 → 21 (+2.6)
  • Security 75 → 80 (+5.0)

Resolved (55)

  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical vulnerability: [GHSA redacted] (yarn.lock)
  • Dependency hygiene not measured — dependency manifest found but not parsed for hygiene
  • High CVE: [GHSA redacted] (yarn.lock)
  • High CVE: [GHSA redacted] (yarn.lock)
  • …and 35 more

New (108)

  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical CVE: [GHSA redacted] (yarn.lock)
  • Critical vulnerability: [GHSA redacted] (yarn.lock)
  • Critical vulnerability: [GHSA redacted] (yarn.lock)
  • Documentation: no installation or build instructions (README.md)
  • High CVE: [GHSA redacted] (yarn.lock)
  • …and 88 more

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

Survey your own repository

yudwig/next-redux-todo 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.

About this page

  • The score is its most recent published measurement, taken on 21 September 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
  • Measured at commit df32ebb014bfdff663c70ef44649a9df1a48dfac — the exact code this score is about.
  • Scored under rubric-2026.09.15 — the same rubric and the same method as every other entry in this index.
  • Measured by watchdog.canine.dev using codehealth-analyzer preprod-b84573e22831.