augustingrigorov / vocabulary-builder

A webapp that helps you develop your vocabulary when learning a foreign language.

Vocabulary builder

A web application to help you learn the new words you encounter while studying a foreign language. It's built on React and Firebase.

You can submit your unfamiliar words in a user-friendly UI and they get stored in a Firebase DB making them accessible from anywhere.

The app provides an intelligent testing feature that aims to quiz you on the words you know least well, thus helping you improve.

Setup

npm install

Testing

npm test

vocabulary-builder's Issues

detect duplicates

Show example as optional hint

Make sure feedback button doesn't cover up any interactive areas

colour picker not responsive

it's to do with old state being present.

Flag difficult words

Make it easy to flag words that are too easy or too hard

Search gallery

Add the ability to search cards in the gallery.

editing not working

Refactor the project structure

• Components
• Actions

Validate fields on new entry creation

Workspaces

Ability to create multiple workspaces per account.

Local account

Perhaps make an account that stores data in local storage.

Make UI work on mobile

Improve design on views

• Error
• Loading
• Quiz result page

Quiz mode

• Ability to test yourself and get scored.
  • Measure and save word strength
  • Show weaker words more frequently than stronger ones

Import CSV

Would be quite nice if the app had a CSV (or whatever serialization format of the day) import feature.
If you would be up for having it, I could try to send a PR at some point when I get the time.

Record pronunciation

Record the pronunciation of the word and have it played back to you when you flip the card.

Or use google speech API

Handle submitting before being logged in

Handle submitting words before being logged in.

Score quiz

Consistently refer to entities as "entries"

Remove all instances where "word" is used.

Reverse language for well-known words

Make animations CSS only

Handle intermediate state between initiating and completing firebase requests

Move styled components out into separate files

Show example as hint on quiz

Do not refetch the whole dictionary on every update

Improve animation

Improve animation when you flip cards. Sometimes flipping gets in an inconsistent state.

Refresh strength without re-fetching

Write some tests

Use https://www.cypress.io to write some tests.

Sort dictionary by creation date

Optimise CSS

Look into using: https://www.styled-components.com/

Edit/remove words

• Remove words
• Edit words

Improve UX flow after clicking reveal

Remove classnames package

Word examples

Give an example use of the word.