Let's build a flashcards-based learning app!
Using FastAPI, Vue.js, and HarperDB

Search for a command to run...
Using FastAPI, Vue.js, and HarperDB

Thanks for sharing such exciting information! E-learning became so promising nowadays considering the current terms!
Developers often tell me that the requirements they receive are usually vague and unclear. Another common complaint is that the requirements change midway, causing them to get stuck. Additionally, sometimes the deadline is set before the requirements...

Imagine you've got a REST API for listing users, and each user's information shows up in 12 fields. GET /v1/users/?page=1&page_size=15 { "pagination_data": { "total_records": 10000, "pages": 667, "prev_page_no": null, ...

Decoupling the Data Layer for Enhanced Code Modularity

Essentials for Safeguarding and Maintaining Your Sprint Cycles

A Step-by-Step Tutorial with Practical Examples

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 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 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.

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.
The features of the app will be as follows:
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.

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.

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 ๐
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