This is a solution to the Dictionary web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- Search for words using the input field
- See the Free Dictionary API's response for the searched word
- See a form validation message when trying to submit a blank form
- Play the audio file for a word when it's available
- Switch between serif, sans serif, and monospace fonts
- Switch between light and dark themes
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- React - JS library
- Tailwind CSS - For styles
- Free Dictionary API - For dictionary data
- Shadcn - for UI Components
- React Hook Form - for form validation
- Tanstack Query - for data fetching
- I learned how to use React Hook Form to easily handle Forms data
- I also learned about Tanstack query for data fetching, and how to use it with React Hook Form
I'm getting more and more familiar with using React & TypeScript. Adding types for every variable seems exhausting at first, but it helps a lot in the long run. During this project, I discovered that I'm still have a long way to learn React, especially it's hooks as they are sometimes confusing and hard to understand.
Big Thanks <3 to :