A clean, fast English dictionary app built with React Native. Search any word, hear its pronunciation, and save favorites — all offline-ready with local storage.
- Instant Word Lookup — search any English word and get definitions, parts of speech, phonetics, and usage examples
- Smart Suggestions — real-time autocomplete as you type, powered by the Datamuse API
- Dual API Fallback — primary lookups use the Free Dictionary API; if a word isn't available there, it falls back to Datamuse (Wiktionary/WordNet) for broader coverage
- In-App Audio Pronunciation — tap the speaker icon to hear native pronunciation without leaving the app
- Save & Bookmark Words — build a personal word collection, persisted locally with MMKV
- Detailed Word View — full-screen modal with multiple meanings, synonyms, and examples
- Splash Screen — smooth animated launch screen with a 1-second transition
| Layer | Technology |
|---|---|
| Framework | React Native 0.83 |
| Language | TypeScript |
| Styling | NativeWind (Tailwind CSS) |
| Storage | react-native-mmkv |
| Audio | react-native-sound |
| Icons | Lucide React Native |
| Font | Poppins (Regular, Medium, SemiBold, Bold) |
- Free Dictionary API — primary source for definitions, phonetics, audio, and examples
- Datamuse API — autocomplete suggestions and fallback definitions
Both APIs are free and require no API key.
src/
├── components/ # Reusable UI components
│ ├── Chip.tsx # Tag/pill chip for synonyms
│ ├── EmptyState.tsx # Placeholder for empty/error states
│ ├── SearchBar.tsx # Search input with suggestion strip
│ └── WordCard.tsx # Word result card with actions
├── hooks/ # Custom React hooks
│ ├── useAudio.ts # In-app audio playback
│ ├── useDictionary.ts # Debounced word lookup
│ ├── useSavedWords.ts # MMKV-backed bookmarks
│ └── useSuggestions.ts # Autocomplete suggestions
├── navigation/ # App navigation
│ ├── RootNavigator.tsx # Stack navigator (Splash → Tabs → Modal)
│ └── TabNavigator.tsx # Bottom tab navigator
├── screens/ # App screens
│ ├── ExploreScreen.tsx # Main search screen
│ ├── SavedScreen.tsx # Saved words list
│ ├── SplashScreen.tsx # Animated splash screen
│ └── WordDetailModal.tsx # Full word detail modal
├── services/ # API layer
│ └── dictionaryApi.ts # Dual-API fetch with fallback
├── storage/ # Local persistence
│ └── mmkv.ts # MMKV instance and helpers
└── types/ # TypeScript interfaces
└── word.ts # Word and Meaning types
- Node.js >= 20
- React Native CLI
- Android Studio (for Android) or Xcode (for iOS)
# Clone the repository
git clone https://github.com/abhi5455/Vocaby.git
cd Vocaby
# Install dependencies
npm install
# Install iOS pods (macOS only)
cd ios && pod install && cd ..# Start Metro bundler
npm start
# Run on Android
npm run android
# Run on iOS
npm run ios- Dual-API architecture ensures maximum word coverage. The Free Dictionary API provides rich data (audio, examples), while Datamuse fills in the gaps with Wiktionary definitions for words the primary API doesn't cover.
- MMKV over AsyncStorage for saved words because it's synchronous, type-safe, and significantly faster for frequent read/write operations.
- Debounced search (500ms for lookups, 250ms for suggestions) prevents excessive API calls while keeping the experience responsive.
- Custom hooks (
useDictionary,useSuggestions,useAudio,useSavedWords) keep business logic out of components and make each feature independently testable.
This project is open source and available under the MIT License.