A sleek and modern dictionary web app built with React and Tailwind CSS. Instantly fetch word meanings, listen to pronunciations, and enjoy smooth UI/UX with a dark theme.
- 🔍 Instant word lookup via Dictionary API
- 🔊 Audio pronunciation playback
- 🌙 Dark mode toggle
- 🎨 Styled with Tailwind CSS
- ⚛️ Built using React and JSX fragments
- Node.js (v14 or higher)
- npm
git clone https://github.com/SnigdhaDatta/Vocabulex.git
cd Vocabulex
npm install
npm startThen open http://localhost:3000 in your browser.
-
Enter a word into the input field.
-
The app fetches data from an external API.
-
Displays:
- Definitions
- Examples
- Synonyms / Antonyms
- Audio pronunciation
-
Use the dark mode toggle to switch themes.
Vocabulex/
├── public/
├── src/
│ ├── components/
│ ├── hooks/
│ ├── styles/
│ ├── App.jsx
│ └── index.jsx
├── package.json
├── tailwind.config.js
└── postcss.config.js
Tailwind CSS is used for all styling. Classes are applied directly in JSX to rapidly build UI components.
- How to use React functional components and hooks
- API fetching and error handling
- Tailwind CSS utility-first styling
- Implementing audio playback
- Theme state management (Dark Mode)
(Add screenshots here if available)
This project is licensed under the MIT License. See the LICENSE file for more information.
Created by Snigdha Datta GitHub: https://github.com/SnigdhaDatta/Vocabulex
Pull requests are welcome!
- Fork the repo
- Create your feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'Add your feature' - Push to the branch:
git push origin feature/your-feature - Open a pull request
Let me know if you'd like:
- Badges (npm, GitHub stars, Netlify deploy, etc.)
- Auto-generated Table of Contents
- Screenshot embedding
- Deployment guide for Vercel or Netlify