minnaingou / wordbank

WordBank

A dictionary app with built in flashcard style practicing, built with ReactJS.

About This Project

WordBank, a-not-just-another-dictionary app

Have you ever come across an unfamiliar word and looked it up in a dictionary, only to forget it a few moments later?

WordBank is an app to help you with that. With WordBank, you can lookup a word and save it to your favourite list along with the example usages and your own notes. You can easily review them later in the Practice session where you will be presented with flashcards created from your favourites.

WordBank helps you memorize new words by prioritizing the words you just added, or the words you are having a hard time remembering, before those which are more frequently reviewed, and are remembered well.

Key Features

• Material Design
• Integrated Free Dictionary API
• Add your own definitions, example usages and notes
• Easily search your favourite items
• Register or login to create your own list of favourite definitions and practice them across devices
• Restore login and last visited page on page reload
• Newly added words or the definitions you incorrectly guessed are prioritized
• Animated Flashcards
• View your statistics and sort by number of attemps or correction rates
• Drawer integration with Bottom Navigation

Demo

A hosted demo version is available on https://learnwordslikeaparrot.web.app For your convenience, use any email address to sign up! ;)

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. In the project directory, you can run:

# Clone this repository
$ git clone https://github.com/minnaingou/wordbank.git

# Go into the repository
$ cd wordbank

# Install dependencies
$ npm install

# Set your Firebase Web API Key in actions/auth.js

# Run the app
$ npm start

# Builds the app for production to the `build` folder
$ npm run build

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Credits

This software uses the following dependencies:

• ReactJS
• material-ui
• React Redux - state management
• Redux Thunk - middleware
• React Router
• react-card-flip
• axios - http client
• Firebase for database, authentication and hosting

To do

• To make the app responsive for desktops with sidebar
• To add forget password function
• To improve security at backend side

Note: Please contact me for the demo account login credentials with sample data, or you can create an account with any email address.