Dictionary WebApp

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

The stories are hosted on Chromatic at this URL.

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
Bonus: Have the correct color scheme chosen for them based on their computer preferences.

Serif font + light mode	Serif font + dark mode

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

Mono font + light mode	Mono font + dark mode

Name		Name	Last commit message	Last commit date
Latest commit History 39 Commits
.github/workflows		.github/workflows
.storybook		.storybook
public		public
src		src
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts