Paul Bailey
50b0ef792a
- Applied Tailwind CSS responsive classes across all components - Implemented mobile-first design approach with breakpoints (sm, md, lg) - Added touch-friendly interactions with min-h-[44px] touch targets - Enhanced App.tsx with responsive padding, headings, and alerts - Updated TextInputSection with responsive textarea and full-width mobile button - Improved VoiceAssignmentSection with flexible layouts and mobile-optimized controls - Enhanced AudioPlayerSection with responsive sizing and touch support - Added custom CSS for range slider with larger thumb for mobile - Improved select dropdowns with visible arrows and proper padding - Added touch-manipulation class to prevent double-tap zoom - Added active states for better mobile feedback - Updated index.html with proper title and meta description - Created RESPONSIVE_IMPROVEMENTS.md documentation Requirements: 12.1, 12.2, 12.3, 12.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)