https://github.com/stef-ania/wordly
Web dictionary developed using React and Next.js
https://github.com/stef-ania/wordly
nextjs reactjs speechapi
Last synced: about 1 year ago
JSON representation
Web dictionary developed using React and Next.js
- Host: GitHub
- URL: https://github.com/stef-ania/wordly
- Owner: stef-ania
- Created: 2024-06-12T08:00:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-24T13:35:32.000Z (over 1 year ago)
- Last Synced: 2025-01-01T16:39:32.507Z (about 1 year ago)
- Topics: nextjs, reactjs, speechapi
- Language: JavaScript
- Homepage: https://wordlyplus.netlify.app/
- Size: 965 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📕 Wordly - Dictionary Application
## ✨ Description
Wordly is a fully functioning dictionary app built using React and Next.js. It allows users to search for the meanings of words, listen to their pronunciations, view phonetics, see synonyms (if available), view examples, and identify the type of word (e.g., verb, noun, etc.). Additionally, the app displays example images related to the searched words.
## 🌈 Features
- **Word Search:** Users can search for the meanings of words.
- **Pronunciation:** Listen to the pronunciation of words.
- **Phonetics:** View the phonetic representation of words.
- **Word Type:** Identify whether the word is a verb, noun, etc.
- **Meaning**: View the meaning of the word searched.
- **Examples:** View example sentences using the words.
- **Synonyms:** See synonyms for words, if available.
- **Example Images:** Display images related to the words.
- **Fully responsive**.
## 🚀 Project in production
The project is deployed on Netlify. You can access it [here](https://wordlyplus.netlify.app/).
## 🛠️ Installation
1. Clone the repository:
```bash
git clone https://github.com/stef-ania/wordly.git
```
2. Navigate to the project directory:
```bash
cd wordly
```
3. Install dependencies:
```bash
npm install
```
## 🔮 Usage
1. Start the development server:
```bash
npm run dev
```
2. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## 💻 Technologies Used
- React ^18
- Next.js 14.2.4
- Axios ^1.7.2
- Moment.js ^2.30.1
- React Loader Spinner ^6.1.6
- Styled-Components ^6.1.11
## 🗂️ Styling and Architecture
- **Styled-Components:** Used for styling the application.
- **Component-Based Architecture:** The frontend is built using a component-based architecture for better maintainability and reusability.
## 🔌 API
- This application uses the [SheCodes Dictionary API](https://www.shecodes.io/learn/apis/dictionary) for fetching word meanings and related data.
- Text-to-Speech API: [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) to implement a button for text-to-speech functionality.
## 🌅 Default view of the project on desktop
## 🤝 Contributing
Contributions are welcome! Please fork the repository and submit a pull request.
## 📨 Contact
If you have any questions, please feel free to reach out at 