March 18, 2024 / 2 min read

English Dictionary

A modern, fully responsive dictionary application

ReactTailwindDictionary API
Project screenshot in dark mode

About the Project


⚓︎Introduction

A modern, fully responsive dictionary application built with React and Tailwind CSS. This app offers a clean and user-friendly interface for looking up word definitions, pronunciations, and usages. It features voice search, dark mode support, and a persistent search history for an enhanced user experience.

⚓︎Technology Stack

  • Frontend: React, Tailwind CSS
  • API: DictionaryAPI.dev
  • Other Tools: Web Speech API (for voice recognition)
Project Image

⚓︎Key Features

🔍 Search Functionality

  • Search for word definitions, pronunciations, and usages in real-time.
  • Provides detailed word information, including part of speech, examples, and phonetics.
  • Built-in speech recognition lets you search for words using voice commands.
  • Supports English language recognition (powered by Web Speech API).

🌓 Dark Mode

  • Seamless dark mode toggle for a visually comfortable experience.
  • Theme preferences are automatically saved and applied on subsequent visits.

📜 Search History

  • Keeps track of your last 10 searches for quick reference.
  • Allows you to clear or manage your search history easily.

🎧 Pronunciation Playback

  • Listen to word pronunciations with a single click.
  • Fetches high-quality audio from the dictionary API for accurate results.

🌟 Responsive Design

  • Fully responsive layout designed for all devices.
  • Sidebar navigation remains fixed while the content section is scrollable.

⚓︎Conclusion

The Dictionary App with Voice Search and Dark Mode provides an intuitive and seamless way to look up words, listen to pronunciations, and track search history. With responsive design and dark mode support, the app ensures a comfortable and efficient experience for users across all devices. Powered by React and Tailwind CSS, it delivers a fast and modern solution for anyone looking for quick word references.

Happy Coding! 🎉