Overview

This is a Sight Words educational web application built with React. The app helps users learn sight words through a flashcard-style interface with customizable settings. Users can view words one at a time, configure word lists, enable random order display, set up auto-advance functionality, and use text-to-speech features. The application features a clean, modern UI built with shadcn/ui components and Tailwind CSS.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

• Framework: React 18 with TypeScript using Vite as the build tool
• UI Library: shadcn/ui components built on Radix UI primitives
• Styling: Tailwind CSS with CSS variables for theming support
• Routing: Wouter for client-side routing
• State Management: React Context API for sight word application state
• Data Fetching: TanStack Query (React Query) for server state management
• Form Handling: React Hook Form with Zod validation
• Speech Synthesis: Web Speech API for text-to-speech functionality

Data Storage

• Storage: Browser localStorage for persisting user settings and word lists
• No Backend Required: Fully client-side application
• Schema: Settings stored in localStorage include:
  • words: Array of sight words
  • randomOrder: Boolean for random word display
  • autoAdvance: Boolean for automatic progression (3 second intervals)
  • speechEnabled: Boolean for text-to-speech
  • speechRate: Speech rate (0.5 - 2.0)
  • speechPitch: Speech pitch (0.5 - 2.0)
  • speechVoice: Selected voice name (optional)

Deployment

• Platform: Vercel (static site deployment)
• Build Command: npm run build:vercel (Vite-only build)
• Output Directory: dist/public

External Dependencies

UI and Styling

• @radix-ui/*: Comprehensive set of unstyled, accessible UI primitives (Dialog, Select, Checkbox, Slider, etc.)
• tailwindcss: Utility-first CSS framework
• class-variance-authority: Utility for creating component variants
• clsx & tailwind-merge: Utilities for conditional CSS classes
• lucide-react: Icon library

Frontend Libraries

• @tanstack/react-query: Server state management and data fetching
• react-hook-form: Form state management and validation
• @hookform/resolvers: Form validation resolvers
• wouter: Minimalist routing library
• zod: TypeScript-first schema validation
• framer-motion: Animation library

Development Tools

• vite: Fast build tool and development server
• typescript: Type-safe JavaScript
• esbuild: JavaScript bundler (for local server builds only)

Features

• Customizable Word Lists: Add, edit, or reset to default sight words
• Display Modes: Random order or sequential display
• Auto-Advance: Automatic word progression every 3 seconds
• Text-to-Speech: Words can be read aloud with adjustable rate, pitch, and voice selection
• Responsive Design: Works on desktop and mobile devices
• Persistent Settings: All preferences saved in browser localStorage

Getting Started

Development

npm install
npm run dev

Build for Production

npm run build:vercel

Deploy to Vercel

The project is configured for Vercel deployment with the included vercel.json configuration.