Frontend Mentor - Dictionary web app solution
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.
Table of contents
Overview
The Challenge/User Stories
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
Screenshot
Links
- Solution URL: https://github.com/traez/dictionary-web-app
- Live Site URL: https://dictionary-web-app-traez.vercel.app
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Tailwind CSS
- Typescript
- next-themes
What I learned
This project was key in incremental learning and feeding me with new knowledge on my journey to professional programming:
- Tailwind CSS; General practical use with react.
- Effecting Tailwind CSS dark Mode with next-themes.
- Dynamically change App font with Tailwind CSS.
- Typescript; General practical use and why the industry swears by it.
- Proper use of useParams in Next.js.
- Not all States/Functions need be global. Very ok to create them in modular format on a per need basis.
- External "audio" HTML element use, and proper error handling when "fetching".
Continued development
- Open Source and Technical Writing to get that needed work experience for the job hunt!
Useful resources
Stackoverflow
YouTube
Google
ChatGPT
Author
- Website - Trae Zeeofor
- Twitter - @trae_z
Acknowledgments
To my Pops for the gift of "294". #5Years