kebin20 / english-flashcards-app

A flashcard app built with React, TypeScript and styled-components with the main flashcard data stored in Firebase. This is to help ES students revise all of their studied vocabs. They're able to revise cards needing revision and remove learnt cards from the deck. Deck layout and content can be edited via Firebase.

English Flashcards App

Table of contents

• Overview
  • Main Function
  • Links
• My process
  • Built with
  • Continued development

Overview

Main Function

Users should be able to:

• Access flashcard sets and start revising vocabulary that has been learnt in the past year.
• Sort through the cards one by one and being able to see the the English and Japanese sides.
• Store cards needing to be learnt and revise them in a separate page.
• Remove cards that have been learnt from current deck.
• Being able to edit the master deck and editing the card contents (WIP)

Links

• Solution URL: Github Repo
• Live Site URL: English Flashcard App

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• CSS Modules
• Firebase - Backend as a Service
• TypeScript - Strongly typed programming language on top of JS
• React - JS framework
• React Router - React routing library
• 

What I learnt & Challenges I faced

• See my blog post on DEV.to!

Continued development & future implementations

• Enable users to edit the master deck and change the content of the flashcards first (WIP)
• Afterwards, being able to delete the cards/sets and add new ones as the user wishes.
• Add a button to randomise the flashcards for extra variety.
• Add animation for the cards when they flip.