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

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

api chromatic reacttsx storybook tailwindcss

Last synced: about 1 month 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 (11 months ago)
• Default Branch: master
• Last Pushed: 2024-03-12T12:13:43.000Z (10 months ago)
• Last Synced: 2024-10-14T22:11:42.523Z (3 months ago)
• Topics: api, chromatic, reacttsx, storybook, tailwindcss
• Language: TypeScript
• Homepage: https://calcagnoloic.github.io/dictionary-webapp/
• Size: 2.31 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)