WORDY - English Flashcards

Wordy is a Single Page Application built with React that serves to learn English words with the help of flashcards.

Homepage contains a list of all words with their translations and transcriptions. Data are fetched from an external server with the help of an API. Note, that all the words are grouped by collection and you can select only one single collection to be shown. You can both edit, delete and add words to the list (realised with React Context, but if you prefer MobX - just switch to mobx branch).

Gamepage represents a training mode: flashcards are shown one by one. You can have a look at their translation by clicking "check" button. A counter shows the number of words learned during one session.

Demo

Wordy

Features

• Possibility to edit, add and delete words in a list;
• All words or a single collection of words can be shown at a time;
• A counter for words learned during one training session.

Tech stack

    ✓   React
    ✓   Functional Components
    ✓   Custom Hooks
    ✓   SASS
    ✓   Fetch API, Get and Post requests
    ✓   React Router
    ✓   React Context
    ✓   Mobx (in separate branch)

Installation

The following commands install and run the development version:

# Clone this repository
$ git clone https://github.com/AlenaGM/flashcards-app.git

# Go into the repository
$ cd flashcards-app

# Install dependencies
$ npm install

# Run the app
$ npm start

Contributing

Contributions are always welcome! If you want to contribute:

# Clone repo and create a new branch:
$ git checkout https://github.com/AlenaGM/flashcards-app -b name_for_new_branch

#  Make changes
#  Submit Pull Request with description of changes

* Weeks 26-34 Learning Project in ITGirlSchool