The State of Acme's Frontend

Executive Summary

The Acme frontend is a mature React codebase comprising 4,868 TypeScript/TSX files with approximately 75,753 lines of code. Built on React 18.3 with TypeScript 5.4, it serves as the user interface for a comprehensive enterprise application. The codebase has been actively developed by 69 contributors over multiple years, with clear architectural patterns emerging from the Atomic Design methodology.

This analysis examines the codebase through quantitative metrics and architectural patterns to identify areas of strength and concern. The data reveals a well-organized component library alongside concentrated technical debt in specific areas that warrant attention.

The Problems

Before discussing what's working, let's address the pain points that the data reveals. Understanding these issues is essential for prioritizing improvements.

Technical Debt Hotspots

The technical debt analysis identifies 19 high-churn files that have been modified 50+ times throughout the project's history. These files represent concentrated maintenance burden and are prime candidates for refactoring:

File	Changes	Category
src/App.tsx	272	Core
src/api/node-backend/generated/models/index.ts	240	Generated API
src/api/node-backend/backendService.ts	159	API Layer
src/screens/ItemEntryForm/ItemForm.test.tsx	133	Tests
src/screens/InventoryScreens/InventoryScreen/InventoryBody.tsx	131	Screens
src/screens/catalog/CatalogScreen.tsx	117	Screens
src/components/LocationMap/LocationMap.tsx	113	Components

Technical Debt Analysis

Explore high-churn files and maintenance hotspots in detail.

Type Safety Status

Excluding generated API code, the codebase contains only 45 instances of the : any type annotation in hand-written source files. This is an impressively low number for a codebase of this size, indicating strong type discipline among developers. The total of 4,380 any usages includes auto-generated API client files which are outside developer control.

Large File Complexity

The code churn analysis reveals 17 files exceeding 500 lines of code. Large files are harder to understand, test, and maintain. The largest files include:

• ItemForm.test.tsx - 1,428 lines: Extensive test file that could benefit from splitting into focused test modules
• helper.tsx - 876 lines: Utility file in ItemEntryForm that likely contains multiple responsibilities
• DataGridStatic.test.tsx - 871 lines: Another large test file indicating complex component behavior
• LocationMapStatic.tsx - 690 lines: Map rendering component with accumulated complexity
• Clock.tsx - 675 lines: Single component handling time zone displays across multiple formats

Outstanding Code Quality Issues

The codebase contains indicators of incomplete work and debugging artifacts:

• 1,546 TODO/FIXME comments: Accumulated technical notes that may represent forgotten tasks or known issues
• 80 console.log statements: Debugging code that escaped cleanup, potentially impacting production performance and exposing internal state

What's Working Well

Despite the challenges, several architectural decisions have proven valuable and should be preserved or expanded.

Atomic Design Implementation

The codebase follows a clear Atomic Design methodology with 205 atoms and 799 components. This separation provides a strong foundation for design system consistency and component reusability. The atoms directory contains foundational UI elements while the components directory houses more complex compositions.

Component Hierarchy

Visualize the atomic design structure with treemap analysis.

Comprehensive Test Coverage

With 465 test files, the codebase demonstrates a commitment to testing. The presence of dedicated test files for complex components like forms and data grids indicates awareness of quality assurance needs. The test-to-source ratio (~9.5%) shows testing is integrated into the development workflow.

Modern Technology Stack

The technology choices reflect current best practices:

• React 18.3 with concurrent features and Suspense support
• TypeScript 5.4 for type safety
• Vite for fast development builds
• React Query (TanStack Query) for server state management
• Redux Toolkit for client state with RTK Query integration
• Ant Design 5.24 as the UI component library

Dependencies Analysis

Explore the 122 production and 73 development dependencies.

Feature-Organized Screen Structure

The 909 screen files organized by feature (Authentication, ItemEntryForm, Catalog, Inventory, etc.) facilitate code discovery and ownership. Each feature area contains its own components, tests, and utilities, reducing cross-feature coupling.

Active Development Velocity

The change velocity analysis shows consistent development activity, with notable peaks in September-October 2025 (276 and 311 commits respectively). This indicates an active project with ongoing feature development and maintenance.

What Can Be Improved

Based on the data analysis, here are specific, actionable recommendations organized by implementation timeline.

Quick Wins (Immediate Impact)

1. Audit and remove console.log statements: The 80 instances can be found and removed systematically. Consider adding an ESLint rule to prevent future occurrences.
2. Split the largest test files: ItemForm.test.tsx (1,428 lines) can be split into focused test modules (validation, submission, field interactions) for better maintainability.
3. Review TODO/FIXME comments: Triage the 1,546 comments to identify items that can be closed, converted to tickets, or removed as outdated.

Medium-term Improvements

1. Refactor App.tsx: With 272 changes, this file is the primary bottleneck. Extract routing configuration, provider setup, and initialization logic into separate modules.
2. Maintain type safety discipline: With only 45 any usages in non-generated code, continue this excellent practice. Consider enabling stricter TypeScript compiler options to further strengthen type safety.
3. Extract shared map logic: LocationMap.tsx (113 changes) and LocationMapStatic.tsx (690 lines) suggest opportunities to extract reusable map utilities and reduce duplication.
4. Decompose helper.tsx: The 876-line helper file in ItemEntryForm likely contains multiple responsibilities that should be split by domain.

Long-term Architectural Changes

1. Establish code ownership: With 69 contributors, consider implementing CODEOWNERS to ensure consistent review and maintenance of critical paths.
2. Formalize the design system: The 205 atoms provide a foundation for a documented design system with guidelines and usage examples.
3. Monitor and prevent churn: Set up metrics to identify files accumulating changes and proactively refactor before they become hotspots.

Codebase Health Score

View the composite health metrics and trend analysis.

Methodology

This analysis is based on data collected on January 5, 2026 using reproducible scripts documented in each visualization page. All metrics were gathered from the Acme frontend repository using standard Unix tools and git history analysis.

Data Sources

• File counts: find src -name "*.tsx" | wc -l
• Lines of code: find src -name "*.tsx" | xargs wc -l
• Git history: git log --all --pretty=format: --name-only
• Contributors: git log --format="%an" | sort -u
• Code quality: grep -r "pattern" src --include="*.tsx"

Explore the Visualizations

Each visualization page includes detailed methodology and the specific commands used to gather its data:

• Codebase Health Score - Composite health metrics
• Component Hierarchy - Atomic design structure
• Change Velocity - Commit history trends
• Technical Debt Analysis - High-churn file identification
• Dependencies - Package analysis
• Routes Structure - Application navigation
• File Evolution - Timeline of major files
• Code Churn - Change intensity heatmap