๐ A modern dictionary app built with React that provides word definitions, usage examples, and related imagery, along with customizable themes and typography for a personalized experience.
- React
- Tailwind CSS
- Framer Motion
- Radix UI (for custom select component)
- Lucide React (for icons)
- Pexel API for imagery
- Free Dictionary API for definitions
- Word lookups with comprehensive definitions and examples
- Synonyms and antonyms
- Audio playback of word pronunciations
- Related images for visual context
- Multiple theme options (light, dark, ocean, forest)
- Customizable typography (sans-serif, serif, monospace)
- Smooth animations
- Error handling
components/
- React components organized by feature (header/
,search/
,grid/
,footer/
,error/
)context/
- theme and font context providersdata/
- data fetching logic
- Hooks (
useState
,useEffect
,useContext
) - Context API for theme and font settings
- Props for component communication
- Conditional rendering
- Event handling
- Error handling
- Async data fetching
- Custom Tailwind variants for theme support (
dark:
,forest:
,ocean:
) - Framer Motion used for sequential animations during component mounting
- Responsive design with Tailwind breakpoints
This project was bootstrapped with Create React App and utilizes the following scripts:
npm start
- Runs the app in development mode at http://localhost:3000npm run build
- Creates an optimized production build in the build folder