Revizio: A Flashcard Tool to Boost Retention Through Spaced Repetition

Hi,

I am writing after one month now.

Previously, I ended my series “Weekly Dev Journal” that I was writing from start of 2023.

after that, I didn’t get motivation to write about something.

Then, I got idea for articles, and I thought I made projects and will also make in future, so why not write about my projects. Just like a devlog but in writing format.

New Series

So, let me introduce you to my new series of this blog, “Building from Scratch“.

Its a series where I will talk about the complete process of creating a project step by step whether web dev, app dev, game or anything.

Each post will cover everything from the initial idea to the final, working product, breaking down each phase to make it easy to follow.

It may help you improve your skills and You can also give me suggestions to make next project.

Lets start with Episode # 01 of this series.

---

Episode # 01

So, In this article, I will talk about a tool that I was working on for past 2 days.

I was trying to get back to content creation by making Videos on YouTube, being active on Instagram etc. I did some live streams on YouTube, now I was thinking to again start making videos in consistency and see what will happen if I do everything for a long period of time.

So this week, I decide to work on any of my idea and record the video of it, and idea for this project directly comes to my mind.

Back Story

I was at class when I saw my friend Hanan using an app “ankidroid” which was a flashcard app where you can create decks and flashcards and later revise those cards. I really liked the idea of this app which was “Space Repetition”.

Space Repetition is a technique in which you review information at increasing interval of time. By doing this, person can attain the information without having chance of forgetting it.

Introduction of Project

The idea is to make a tool for students similar to ankidroid but in more simpler way. Although ankidroid is also simple to use but I just want to try this project.

So, we will be making the web version of ankidroid.

Tech stack

I used the following tech stack for making this project:

• NextJS

• Tailwind CSS + Shadcn

• MongoDB

• Vercel (for deployment)

Features

I picked the minimal features that make the tool usable so I can make this till this weekend and also record a video about this.

So, I decide to implement the following features:

• Authentication (of course 😆)

• Deck Creation

• Flashcard Creation

• Study Mode → Space Repetition

• Public Library

Authentication

First of all, authentication.

for this, I implemented custom auth using JWT Tokens.

This was simple, I had done this for many times now. I just copied my previous project code.

Deck & Flashcard Creation

This was the main feature, where user can make deck and inside those decks, can also add flashcards.

This was CRUD operation i.e. creating new deck, get deck info and delete deck.

First, I designed the db schema for it using mongoose.

const deckSchema = new mongoose.Schema({
    userId: {
      type: mongoose.Schema.Types.ObjectId,
        ref: "User"
      },
      title: {
        type: String, 
      },
      description: {
        type: String, 
      },
      subject: {
        type: String, 
      },
      visibility: {
        type: String,
        enum: ["public", "private"] 
      },
      tags: {
        type: [String],
        default: []
      },
    }, { timestamps: true });

Then, I created all the apis for the operations.

I repeat this process for flashcard feature also.

Checkout the link given at end of this article to access the source code.

Final version was:

This was the screenshot for deck creation page:

This was page for deck view page:

This was page for adding cards to deck.

Study Mode → Spaced Repetition:

This feature was a bit new for me to implement.

Here, I had to implement that Spaced Repetition algorithm so user can review cards repeatedly that he found hard to learn & algorithm will repeated show card based on user performance.

For this, I give 3 options to user while reviewing the card.

This was the criteria for repeating cards:

   const intervals = {
            hard: 1, 
            medium: 10,
            easy: 1440
          };

In Short, cards having difficulty of easy will be shown after some time while cards having hard difficulty will be shown immediately.

Having this criteria in mind, I update card details when user click on difficulty and show next card.

 const flashcard = await Card.findById(req.body.cardId);

// Update difficulty based on response
// 'again', 'hard', 'good', or 'easy'
flashcard.interval = intervals[req.body.difficulty];

// Calculate nextReviewDate by adding interval to current date
// Convert minutes to ms
flashcard.nextReviewDate = new Date(Date.now() + flashcard.interval * 60000);

await flashcard.save();

Public Library

I also implemented the public library feature.

The idea was, users can choose to pick “public” or “private” while creating the deck and public decks will be shown to other users.

Users can import and use that flashcards for review. This will also add the touch of community in the project.

Time Spent

So, I spent total 6 Hours building the project.

This time was only for coding, excluding the time for researching and thinking about other features.

Final Links

You can get the source code of this project from github:
https://github.com/coder-psycho/Revizio

The website is also live so you can use it live on your system:
https://revizio.vercel.app/

I also uploaded video on YouTube explaining the development process of it, so if you are interested, you can watch that video.

That’s it for this article.

Do like the article, comment out your thoughts about this project and share it with your friends.

See you in the next one ;)

- Psycho