Dictionary App

A modern dictionary application where users can easily access word definitions, pronunciations, synonyms, and example sentences.

Project Overview

Dictionary App is a modern, user-friendly React application where users can view a word's definitions, pronunciation, synonyms, and usage examples.

This app is designed to make the vocabulary learning process more interactive, customizable, and practical.

Key Features

API Integration

• Word data is fetched dynamically in real time using the Free Dictionary API.

Light/Dark Theme Support

• Users can switch between light and dark modes.
• Theme preference is stored in localStorage for persistence.

Font Selection

• Users can choose from three fonts: Sans Serif, Serif, and Monospace.

Click on Synonym to View Its Meaning

• Clicking on any listed synonym fetches the data for that word from the API and displays its information.

Return to Homepage

• Clicking the dictionary icon takes the user back to the homepage without refreshing the page.

Error Handling

• If the searched word is not found, an informative error screen is shown.
• If a user submits an empty search, a warning is displayed.

Custom "Word Not Found" Screen

• When the searched word is not returned by the API, instead of displaying a blank page, the app shows a custom "No Definitions Found" screen.
• This screen provides both visual and textual feedback and encourages the user to try another search.

Message content:
Sorry pal, we couldn't find definitions for the word you were looking for. You can try the search again at later time or head to the web instead.

Pronunciation Playback

• If available, users can click the audio icon to listen to the word's correct pronunciation.

Why React?

I previously built a similar application using Vanilla JavaScript. However, with React:

• The code structure became more modular.
• State management became easier with useState and useEffect.
• Component-based architecture improved reusability and readability.
• Thanks to Virtual DOM, the app performed faster.

Live Demo

https://dictionary-app-react-opal.vercel.app

Installation & Running Locally

To run this project on your local machine, follow the steps below:

1. Clone the Repository

git clone https://github.com/gayedinc/dictionary-app-react.git

If you don’t have Git installed, download it from https://git-scm.com.

2. Navigate into the Project Directory

cd dictionary-app-react

3. Install Dependencies

Make sure you have Node.js and npm (or yarn) installed. If not, download them from https://nodejs.org.

npm install
# or
yarn install

4. Start the Development Server

npm run dev
# or
yarn dev

By default, the app should run at http://localhost:5173.

5. Open in Browser

Open the URL in your browser to start using the application.

Project Structure

 public
 ┗  img                         # Application images

 src
 ┣  assets
 ┃ ┗  css
 ┃   ┣  darkMode.css           # Dark mode styles
 ┃   ┣  main.css               # Main styles
 ┃   ┗  reset.css              # CSS reset rules
 ┣  components
 ┃ ┣  Header.jsx              # Header and search bar component
 ┃ ┣  NotFound.jsx            # Component shown when a word is not found
 ┃ ┗  Word.jsx                # Component displaying word details
 ┣  App.jsx                   # Core application logic
 ┣  main.jsx                  # React DOM entry point
┗  index.html                 # Main HTML template