- Add complete state management for text, phases, roles, voice assignments - Implement phase transitions: input → assignment → generated - Wire up text input to role detection API - Wire up voice assignment to audio generation API - Add loading states for async operations (role detection and generation) - Implement comprehensive error handling and display - Add warning messages for long text (>5000 chars) in assignment and generation phases - Ensure text persists across all workflow phases - Validates Requirements: 1.5, 6.1, 8.1, 8.2, 8.3, 8.4
Text to Audiobook Frontend
React TypeScript frontend for the Text to Audiobook application.
Setup
Prerequisites
- Node.js 20.19+ or 22.12+
- npm or yarn
Installation
- Install dependencies:
npm install
- Create environment file:
cp .env.example .env
- Update
.envwith your backend URL (default:http://localhost:8000)
Development
Start the development server:
npm run dev
The application will be available at http://localhost:5173
Build
Build for production:
npm run build
Preview production build:
npm run preview
Project Structure
src/
├── api/ # API client modules
├── components/ # React components
├── App.tsx # Main application component
├── main.tsx # Application entry point
└── index.css # Global styles (Tailwind)
Environment Variables
VITE_API_BASE_URL- Backend API base URL (default: http://localhost:8000)