https://github.com/real-devance/dixnary-react

A simple and intuitive dictionary app built with React. Search for word definitions, synonyms, and more.
https://github.com/real-devance/dixnary-react

customhooksreact react reactrouter tailwindcss typescript vite

Last synced: 5 days ago
JSON representation

A simple and intuitive dictionary app built with React. Search for word definitions, synonyms, and more.

• Host: GitHub
• URL: https://github.com/real-devance/dixnary-react
• Owner: real-devance
• Created: 2024-08-27T16:29:25.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-15T17:38:12.000Z (4 months ago)
• Last Synced: 2024-11-08T08:15:59.194Z (about 2 months ago)
• Topics: customhooksreact, react, reactrouter, tailwindcss, typescript, vite
• Language: TypeScript
• Homepage: https://dixnary.netlify.app/
• Size: 58.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Dictionary App 📚

A simple and intuitive dictionary app built with React. Search for word definitions, synonyms, and more.

 **[Live Demo](https://dixnary.netlify.app/)**

## Features

- 📖 Word Definitions

- 🔍 Synonyms 

- 💡 Word Suggestions

- 🔊 Pronunciations

## 🛠️ Implementation Details

### Custom Hooks

- **`useClickOutside`**: Detects clicks outside of the active element to handle interactions effectively.

- **`useDebounceValue`**: Debounces user input to improve performance by reducing unnecessary re-renders and API calls.

- **`useTheme`**: Manages light and dark themes for a customizable user experience.

### Context API

- **ThemeContext**: Provides global theme management for consistent styling across the app

- **WordSearchContext**: Manages the state and logic for handling word search queries and results

## 🚀 Get It Running

```bash

# clone

git clone https://github.com/real-devance/dixnary-react

# navigate to the project directory

cd dixnary-react

# Install dependencies

npm install

# run

npm run dev

```

## 🧰 Tech Stack

- ⚛️ React

- 🟦 TypeScript

- 🎨 Tailwind CSS

- ⚡ Vite

- 🛣️ React Router

## Acknowledgements

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

- **Datamuse API**: [datamuse.com/api](https://datamuse.com/api/)

- **Design**: [Frontend Mentor - Dictionary Web App](https://www.frontendmentor.io/challenges/dictionary-web-app-h5wwnyuKFL)