AllThatWord_Dictionary APP

Description

A Dictionary App with flashcard function using Free Dictionary API

You can read my project log HERE.

Table of Contents

• Design
• Usage

---

Design

Technologies

• React
• TypeScript
• Tailwind, react-icons
• ESLint, Prettier
• react-router-dom
• react-query, axios
• Firebase Authentication
• Firebase Realtime Database

Colors

• #5BBA6F - #3FA34D - #2A9134 - #137547 - #054A29 Color palette

Fonts

• Head font: Roboto
• Body font: Exo

Layout

Page	Desktop Layout	Function
Main		- LogIn button: move to login page - Search button: move to search page with results
Search		- Speaker button: listen to pronunciation - Save button: save word to user's vocabularies
Login		- Sign in with Google button - Sign in with Github button
Admin_list		- Flashcard mode button: switch view mode to flashcard mode
Admin_flashcard		- List mode button: switch view mode to list mode - User can flip flashcard to check the definition of the word

Prioritization

Must have

• Users can use search function by word.
• Users can listen to the pronunciation of the word.
• Users can move to another page when they click antonyms or synonyms.

Should have

• Users can login using google or github.
• Users can save words to their vocabularies.
• Users can see their vocabularies on both list mode and flashcard mode.

Nice to have

• Users can use dark mode.
• Users can handle words using multiple folders.

---

Usage

Search words

LogIn to save words

Save words using multiple folders

Save words	Check words on Admin page

Check my words using both viewmodes

List mode	Flashcard mode

Change theme_Dark mode