https://github.com/aayush259/dictionary

This Dictionary App is a React-based web application designed to help users look up words, view their definitions, phonetics, and example sentences. It features a simple user-friendly interface with dark and light themes and history tracking.
https://github.com/aayush259/dictionary

react react-router react-router-dom react-router-v6 redux redux-toolkit vite

Last synced: 9 days ago
JSON representation

This Dictionary App is a React-based web application designed to help users look up words, view their definitions, phonetics, and example sentences. It features a simple user-friendly interface with dark and light themes and history tracking.

• Host: GitHub
• URL: https://github.com/aayush259/dictionary
• Owner: Aayush259
• Created: 2024-05-30T11:06:31.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-06T06:57:02.000Z (4 months ago)
• Last Synced: 2024-08-06T20:10:54.725Z (3 months ago)
• Topics: react, react-router, react-router-dom, react-router-v6, redux, redux-toolkit, vite
• Language: JavaScript
• Homepage: https://aayush259.github.io/Dictionary/
• Size: 2.77 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📖 Dictionary

This is a React-based web application designed to help users look up words, view their definitions, phonetics, and example sentences. It features a simple user-friendly interface with dark and light themes and history tracking.

## 🌟 Features

- **Search:** Users can search for words and view their definitions.

- **Phonetics:** Provides audio pronunciation for words.

- **History:** Keeps track of previously searched words.

- **Light/Dark Theme:** Supports both light and dark themes for better user experience.

## 🚀 Usage

🔹 Type a word in the search bar and press Enter or click the search button.




🔹 View the word's definition, phonetics, synonyms, antonyms, and examples.




🔹 If word not found, then click on the *Google Link* to browse it on google.




🔹 Toggle between light and dark themes using the theme switcher in the header.




🔹 Click on previously searched words in the history section to view their details.




🔹 Click on trash icon to remove the word from history.




🔹 Click on Clear All button to clear complete history.




## 🛠️ Technologies Used

- Vite + React

- React Router DOM

- Redux Toolkit

- Local Storage

- Tailwind CSS 🌈

## 🖼️ Screenshots

![Home Page Dark Theme](src/images/s1-Home-dark.png)

![Home Page Light Theme](src/images/s2-Home-light.png)

![Search screenshot](src/images/s3-Search.png)

## 🖥️ Installation

1. Clone the repository:

   ```bash

    https://github.com/Aayush259/Dictionary.git

    ```

2. Navigate to the project directory:

    ```bash

    cd Dictionary

    ```

3. Install dependencies:

    ```bash

    npm install

    ```

4. Start the development server:

    ```bash

    npm run dev

    ```

## 🎉 Credits

- API: [Free Dictionary API](https://dictionaryapi.dev/)