# Dictionary Web App - And Older Projects

- URL: https://www.guneyunay.com/en/projects/dictionary
- Live demo: https://650d9a3e2330da00a69a3852--willowy-churros-762902.netlify.app/
- Stack: React, Free Dictionary API
- Date: 2023-08-20

[![](https://www.guneyunay.com/projects/dictionary.jpg)](https://650d9a3e2330da00a69a3852--willowy-churros-762902.netlify.app/)

# Dictionary Web App - And Older Projects

  `React` `Next.js` `Free Dictionary API` 
  `CSS` `TypeScript`

  
    This is one of my older projects, a dictionary web app built using the Free
    Dictionary API. It was a challenge on Frontend Mentor where I learned how to
    use APIs effectively and design responsive web layouts.
  

The **Dictionary Web App** is a project I developed as part of a challenge on
Frontend Mentor. The challenge was to build a web application using the **Free
Dictionary API** and create a design as close as possible to the provided Figma
design. The app offers several features to provide a dynamic and interactive
experience for users.

## Key Features 🌟

- **Word Search**: Users can search for words using the input field, and the app
  will display the Free Dictionary API's response for the searched word.
- **Audio Playback**: Users can play the audio file for a word when it's
  available, enhancing the learning experience.
- **Font Switching**: Allows users to switch between serif, sans serif, and
  monospace fonts for a personalized experience.
- **Theme Switching**: Supports both light and dark themes, with the option to
  automatically set the theme based on the user's system preferences.
- **Responsive Design**: Provides an optimal layout for the interface depending
  on the user's device's screen size, ensuring accessibility on both mobile and
  desktop.

## Technologies Used 🛠️

- **React**: JavaScript library for building user interfaces.
- **Free Dictionary API**: Provides the data for word definitions,
  pronunciations, and more.

## Links

- **Source Code**:
  [GitHub Repository](https://github.com/unaygney/dictionary-web-app)
- **Demo**:
  [Dictionary App Live](https://650d9a3e2330da00a69a3852--willowy-churros-762902.netlify.app/)

## More Projects

I have created countless projects like this one. Many of them are `older` and do
not necessarily follow the best practices, so I didn't create a separate page
for each. `However`, if you'd like to explore my growth or find some
inspiration, you can check them out through the link below. I present most of
them in a table format with a demo link for each.

- Happy browsing and `happy coding!`

- 🔗 **Explore More Projects**:
  [Click here ](https://github.com/unaygney/frontend-mentor-challanges)