/Word-Memorizer

An app that you can add your own word and definition pairs, with sorting and filtering functionality.

Primary LanguageJavaScript

Word Memorizer

  • This is an app that you can add your own word and definition pairs, with sorting and filtering functionality.
  • You can also take a quiz with random generated definitions from your database.
  • View the demo video here.

How to Use

  1. Open the website, and add your words
  2. Choose custom category, default to 'all'
  3. Choose custom sort method, default to 'date'
  4. Flag and unflag words for easy access
  5. Set sort method to flag to see only flagged words
  6. Delete words that you no longer need

How to Build

  1. Clone the repository
  2. Install dependencies and run server
cd ./api

# Install dependencies for server
npm install

# Run server
npm start

# Build react app for client
# open another console
cd ./client
npm install

# Build
npm run build

# Run client
npm start
  1. Server starts at http://localhost:5000
  2. Client starts at http://licalhost:3000

Module Used

Client

  • react
  • react-router
  • axios
  • Bootstrap

Server

  • express
  • cors
  • body-parser
  • morgan
  • dotenv
  • mongoose
  • mongodb
  • papaparse
  • common-json

My Contributions

  • Use Bootstrap as CSS template, and use react-router and react to render the client side view.
  • Server side is an api made from express, with functionality to read local file.

Work Division

Wei-Hsu Lee is responsible of server and making demo vedio, Hsuan-Jui Chen is resposible of client and a part of server.

Thoughts

The amount of time we could spend on doing this final project was really limited, so both of us was on edge during making this project. Fortunately we were able to cooperate well enough to finish the project within the time limit.