Let's build a flashcards-based learning app!

Let's build a flashcards-based learning app!

Using FastAPI, Vue.js, and HarperDB

Ever since I have entered the tech industry, I constantly update myself with new technologies, concepts, etc. They might be courses, or articles or some principles, or any best patterns that one should follow. I also dive into other stuff which is not tech-related to help me in other areas of life. We are living in a time where there is an abundance of data and knowledge. This is great and we are lucky but the problem we tend to forget what we learned. All of us have faced this, right? We read, listen or learn so many things but how much of it can we remember? The forgetting curve can explain this.

The forgetting curve

The forgetting curve is a concept discovered by the German psychologist Hermann Ebbinghaus which hypothesizes the decline of memory retention in time. It basically says that humans tend to forget their newly learned knowledge in a matter of days or weeks unless they consciously review the learned material.


Okay, so our memory retention decreases as time passes. So how to tackle this?

One of the techniques hypothesized by Hermann to improve the strength of memory was something called spaced repetition.

His premise was that each repetition in learning increases the optimum interval before the next repetition is needed (for near-perfect retention, initial repetitions may need to be made within days, but later they can be made after years). He discovered that information is easier to recall when it's built upon things you already know, and the forgetting curve was flattened by every repetition.


The Leitner system

The Leitner system is a widely used method of efficiently using flashcards that was proposed by the German science journalist Sebastian Leitner in the 1970s. It is a simple implementation of the principle of spaced repetition, where cards are reviewed at increasing intervals.

We will be implementing a version of the Leitner system as shown below with three boxes. We create a deck of flashcards for a topic that we are learning. All the cards start in the first box. We pick cards one by one, if we can remember the contents of the card, it goes to the next box. If we cannot remember then it goes directly to the first box.

flashcardsapphowitworks (1).png

The stack

We will be using HarperDB as our database.

The frontend will be built using Vue.js, Tailwind CSS for styling, and Buefy for some components and the backend APIs will be built using FastAPI.

Building the app

The features of the app will be as follows:

  • The user can create an account and log in to the system.
  • The user can create a deck.
  • The user can add flashcards to a deck.
  • The user can create a revision session for a deck. In a session, the set of cards will be displayed one by one with respect to the day and the boxes allowed for the day.

The first primary feature of the app is creating a deck. You can think of a deck as a topic you want to learn, for example, Algorithms, Web Development, React, etc. As soon as the user logs in to the app, the decks created by the user will be displayed. The user can click the Create new deck button to create a new deck, plus the user can create as many decks as they want.

Create deck demo

Once a deck is created, the next thing to be done is to add cards to the deck, for example, An Algorithms deck can have cards like Insertion Sort, Quick Sort, Binary Search, etc. The user can click on the deck and they will be redirected to the deck's page. Here in the Cards tab, the user can use the Add new card to this deck button to add a new card. The user will be prompted to add a title and the content for the card. The user can add any number of cards to a deck.

Next comes the interesting section of the app called Revisions. On the deck page, the user can click the Revisions tab to view all the previous session's logs. On the top, there is a button called Start today's revision session which creates a new session for the day.

In a session, the cards from the deck will be displayed one by one to the user, then the user can try and recall and flip the card to see the contents of the cards. If they recalled correctly then they can click Yes else No. Once all cards are viewed, the session will be completed and the user can go back and see that the current session was recorded.

Revision session demo

Future Improvements

  • Email reminder: An email can be sent to the user to remind them to complete their session for the day.
  • Combined session: Currently, the user has to go to each deck and complete their session for the day. A combined session can be a session where all the cards from all the decks for today can be loaded, so in one session multiple deck revisions can be completed.
  • Markdown support: Markdown support for card contents.

Code & Deployment

Check out the frontend code here and backend code here

The APIs are deployed on Heroku and the frontend Vue.js app on Vercel.

๐Ÿ‡ Click here to try the app ๐Ÿ‡

To conclude

This was my first time participating in a hackathon and it was absolute fun. The HarperDB Cloud and the HarperDB Python SDK was a breeze to use. I hope you liked the app.

Thanks for reading!

๐Ÿ“ท Cover photo by Tim Mossholder on Unsplash