https://github.com/jakegodsall/fm-dictionary-web-app
Solution to the Dictionary Web App challenge on Frontend Mentor
https://github.com/jakegodsall/fm-dictionary-web-app
framer-motion frontend-mentor nextjs tailwindcss
Last synced: 5 months ago
JSON representation
Solution to the Dictionary Web App challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/jakegodsall/fm-dictionary-web-app
- Owner: jakegodsall
- Archived: true
- Created: 2023-06-29T07:59:59.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-06T14:11:17.000Z (almost 2 years ago)
- Last Synced: 2025-01-06T20:58:00.412Z (5 months ago)
- Topics: framer-motion, frontend-mentor, nextjs, tailwindcss
- Language: JavaScript
- Homepage: https://jakegodsall-dictionary-app.netlify.app/
- Size: 2.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Dictionary web app solution
This is a solution to the [Dictionary web app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/dictionary-web-app-h5wwnyuKFL). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Frontend Mentor - Dictionary web app solution](#frontend-mentor---dictionary-web-app-solution)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [Built with](#built-with)
- [Author](#author)
## Overview
### The challenge
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
- **Bonus**: Have the correct color scheme chosen for them based on their computer preferences. _Hint_: Research `prefers-color-scheme` in CSS.
### Screenshot
### Links
- Solution URL: [GitHub](https://github.com/jakegodsall/dictionary-web-app)
- Live Site URL: [Netlify](https://jakegodsall-dictionary-app.netlify.app/)
### Built with
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Next.js](https://nextjs.org/) - React framework
- [TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Framer Motion](https://www.framer.com/motion/) - Animation library
## Author
- Website - [Jake Godsall](https://jakegodsall.com)
- Frontend Mentor - [@jakegodsall](https://www.frontendmentor.io/profile/jakegodsall)
- LinkedIn - [@godsalljake](https://www.linkedin.com/in/godsalljake/)