https://github.com/calcagnoloic/dictionary-webapp

Dictionary provides definitions and examples by lexical field.
https://github.com/calcagnoloic/dictionary-webapp

api reacttsx tailwindcss

Last synced: about 2 months ago
JSON representation

Dictionary provides definitions and examples by lexical field.

• Host: GitHub
• URL: https://github.com/calcagnoloic/dictionary-webapp
• Owner: CalcagnoLoic
• Created: 2024-01-29T11:46:55.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2025-12-06T10:20:42.000Z (6 months ago)
• Last Synced: 2025-12-10T04:13:48.867Z (6 months ago)
• Topics: api, reacttsx, tailwindcss
• Language: TypeScript
• Homepage: https://calcagnoloic.github.io/dictionary-webapp/
• Size: 2.81 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Dictionary WebApp

This dictionary provides definitions and examples by lexical field. Two contexts are included:

- One for darkMode (this adapts to the user's system preferences)

- One for changing the font (serif, sans-serif and mono)

The stories are hosted on Chromatic at this [URL](https://65c4faea26944c656f6474a3-sfiofbresk.chromatic.com/).



  

    

  





   



## User Stories

Users should be able to:

- [x] Search for words using the input field

- [x] See the Free Dictionary API's response for the searched word

- [x] See a form validation message when trying to submit a blank form

- [x] Play the audio file for a word when it's available

- [x] Switch between serif, sans serif, and monospace fonts

- [x] Switch between light and dark themes

- [x] View the optimal layout for the interface depending on their device's screen size

- [x] See hover and focus states for all interactive elements on the page

- [x] Bonus: Have the correct color scheme chosen for them based on their computer preferences.

## View

| Serif font + light mode                | Serif font + dark mode                |

| -------------------------------------- | ------------------------------------- |

| ![](./public/assets/img/monoLight.png) | ![](./public/assets/img/monoDark.png) |

| Sans-serif font + light mode                | Sans-serif font + dark mode                |

| ------------------------------------------- | ------------------------------------------ |

| ![](./public/assets/img/sansSerifLight.png) | ![](./public/assets/img/sansSerifDark.png) |

| Mono font + light mode                 | Mono font + dark mode                 |

| -------------------------------------- | ------------------------------------- |

| ![](./public/assets/img/monoLight.png) | ![](./public/assets/img/monoDark.png) |

## Built with

- Semantic HTML5 markup

- Mobile-first workflow

- TailwindCSS

- React

- Storybook

- Chromatic

## Author

- Website - [Portfolio](https://calcagno-loic.netlify.app/)

- Frontend Mentor - [@CalcagnoLoic](https://www.frontendmentor.io/profile/CalcagnoLoic)