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.
- 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.
The project is deployed on Netlify. You can access it here.
-
Clone the repository:
git clone https://github.com/stef-ania/wordly.git
-
Navigate to the project directory:
cd wordly -
Install dependencies:
npm install
- Start the development server:
npm run dev
- Open http://localhost:3000 with your browser to see the result.
- 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
- Styled-Components: Used for styling the application.
- Component-Based Architecture: The frontend is built using a component-based architecture for better maintainability and reusability.
- This application uses the SheCodes Dictionary API for fetching word meanings and related data.
- Text-to-Speech API: Web Speech API to implement a button for text-to-speech functionality.
Contributions are welcome! Please fork the repository and submit a pull request.
If you have any questions, please feel free to reach out at
