React Projects - Token Usage Testing with Different File Sizes

This repository contains three identical React applications structured differently to test token usage patterns with varying file size distributions. All projects implement the same employee management system but with radically different code organization approaches.

Project Overview

react-project-with-humongous-file (9 files, 1,289 lines)

• Architecture: Single massive generated file approach
• Key File: core.tsx (1,204 lines) - contains everything in one file
• Generation: Created via swagger-typescript-api
• Contents: API client, components, hooks, utilities, routing, notifications, forms - all bundled together
• Other Files: Standard React boilerplate (App.tsx, index.tsx, etc.)

react-project-with-large-files (17 files, 1,307 lines)

• Architecture: Modular organization with medium-sized files
• Structure:
  • employee/components/index.tsx: 448 lines (EmployeeForm, EmployeeList, etc.)
  • employee/hooks/index.tsx: 364 lines (all employee-related hooks)
  • api/index.ts: 272 lines (API client)
• Approach: Logical separation but maintains larger monolithic files

react-project-with-small-files (89 files, 1,450 lines)

• Architecture: Highly granular structure with many small files
• Structure:
  • EditEmployeeButton.tsx: 20 lines
  • EmployeeList.tsx: 58 lines
  • address-value-getter.util.ts: 9 lines
  • Deep folder hierarchy with dedicated files for components, hooks, utilities, models, etc.
• Approach: Extreme separation of concerns with single-responsibility files

Key Differences

Aspect	Humongous File	Large Files	Small Files
Total Files	9	17	89
Total Lines	1,289	1,307	1,450
Largest File	1,204 lines	448 lines	136 lines
File Organization	Single generated file	Module-based	Component-based
Maintainability	Poor	Moderate	Excellent

Functional Equivalence

Despite structural differences, all three projects implement:

• Employee CRUD operations
• Form validation (Formik & React Hook Form support)
• Data grid display
• Notification system
• Routing and navigation
• API integration (real/fake modes)

Testing Purpose

This setup allows for comparative analysis of IDE performance and development experience with different file size distributions and organizational paradigms.

Usage

Each project can be run independently:

cd react-project-with-[humongous-file|large-files|small-files]
npm install
npm start

Environment variables control behavior:

• REACT_APP_API_MODE: 'fake' | 'real'
• REACT_APP_FORM_MODE: 'hook' | 'formik'