State Management

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• enhance/[id]/_components/enhance-interface.tsx
• dashboard/_components/upload-section.tsx
• history/_components/history-list.tsx
• api-keys-light/page.tsx
• package.json
• settings/_components/diagnostics.tsx

# State Management

The GUC Resume Enhancer employs a multi-faceted approach to state management, leveraging different strategies for local component state, server state, and global application state. This hybrid model combines React's built-in hooks for simple, co-located state with dedicated libraries for more complex scenarios like data fetching and cross-component state sharing.

The core technologies identified for state management are React hooks (useState, useEffect), Zustand, Jotai, TanStack Query, and SWR. Additionally, the application utilizes browser localStorage for a "Light Mode" feature, providing state persistence without requiring user authentication. This documentation outlines the architecture and patterns used for managing state across the application.

Sources: README.md:37-39, package.json:52, package.json:89, package.json:91, api-keys-light/page.tsx:18-21

State Management Libraries

The project's architecture incorporates several specialized libraries for handling different types of state, as declared in its documentation and dependencies.

Library	Type	Purpose
Zustand	Global State	A small, fast, and scalable bearbones state-management solution.
Jotai	Global State	A primitive and flexible state management library for React based on an atomic model.
TanStack Query	Server State	Handles fetching, caching, synchronizing, and updating server state.
SWR	Server State	A React Hooks library for data fetching, providing features like caching and revalidation.
React Hooks	Local State	useState and useEffect are used extensively for managing state within individual components.

Sources: README.md:37-39, package.json:52, package.json:89, package.json:91

Local Component State

The primary method for state management within individual components is through React's useState and useEffect hooks. This approach keeps state co-located with the UI logic that uses it, which is ideal for state that is not needed elsewhere in the application.

Key Implementations

• EnhanceInterface Component: This component is a prime example of complex local state management. It handles UI state for the enhancement process, user selections, and data display.
• UploadSection Component: Manages the state of the file upload process, including the selected file, upload progress, and any errors.
• HistoryList Component: Manages the loading state and the fetched list of resumes.
• Diagnostics Component: Manages loading states, filters for logs, and the logs themselves.

State Variables in EnhanceInterface

The enhance-interface.tsx component manages several pieces of state to control the UI.

State Variable	Type	Description
selectedEnhancement	string	Stores the value of the enhancement type selected by the user.
isEnhancing	boolean	A flag to indicate if the AI enhancement process is in progress.
progress	number	Tracks the progress percentage of the enhancement process.
currentEnhancement	`Enhancement	null`
previewMode	'original' | 'enhanced' | 'side-by-side'	Controls the view mode of the resume preview section.
originalFileUrl	`string	null`
isLoadingOriginal	boolean	A flag to indicate if the original resume file is being loaded.
numPages	number	Stores the number of pages in the original PDF document.
loadError	`string	null`

Sources: enhance/[id]/_components/enhance-interface.tsx:131-139

State Flow in EnhanceInterface

The following diagram illustrates the flow of state changes within the EnhanceInterface component during the enhancement process.

This diagram shows how user actions trigger state updates and API calls, which in turn update the UI through state changes.

Sources: enhance/[id]/_components/enhance-interface.tsx:201-262

Server State & Data Fetching

While the README.md mentions TanStack Query and SWR, the visible components primarily use useEffect and the native fetch API to retrieve data from the backend. This pattern involves managing loading, error, and data states manually within the component.

Data Fetching in HistoryList

The HistoryList component fetches a user's resume history from the /api/resumes endpoint.

1. The component mounts, and a useEffect hook is triggered.
2. isLoading state is set to true.
3. A fetch request is made to /api/resumes.
4. Upon receiving a successful response, the JSON data is parsed.
5. The resumes state is updated with the fetched data.
6. isLoading state is set to false.
7. If an error occurs, it is logged to the console, and isLoading is set to false.

Sources: history/_components/history-list.tsx:28-40

The sequence diagram below illustrates this data fetching flow.

Client-Side Persistent State (Light Mode)

The application features a "Light Mode" that allows users to use the service without creating an account. In this mode, state, specifically API keys, is persisted in the browser's localStorage.

API Key Management in Light Mode

The api-keys-light/page.tsx component and its associated localApiKeyStorage module (@/lib/api-key-storage) are responsible for this functionality.

• Loading Keys: On component mount, useEffect calls localApiKeyStorage.getAll() to retrieve all keys from localStorage and updates the apiKeys state.
• Saving a Key: When a user submits the "Add API Key" form, localApiKeyStorage.save() is called, which stores the new key in localStorage. The component state is then re-synced.
• Deleting a Key: When a user deletes a key, localApiKeyStorage.delete() removes it from localStorage, and the component state is updated.

Sources: api-keys-light/page.tsx:61-64, api-keys-light/page.tsx:71-84, api-keys-light/page.tsx:86-96

Flowchart for Light Mode API Key Storage

This diagram shows the process of managing API keys using localStorage.

Summary

The state management strategy in GUC Resume Enhancer is pragmatic and context-dependent. It relies on simple, effective patterns like local component state for most UI-related logic. For server interactions, it uses a foundational useEffect/fetch pattern, with the documented intent to use more robust libraries like TanStack Query or SWR. Finally, it cleverly uses localStorage to provide a full-featured "Light Mode" without backend persistence, demonstrating a flexible approach to user experience and state persistence. While global state libraries like Zustand and Jotai are included, their specific use cases are not detailed in the analyzed component files.