ishiko732/ts-fsrs-demo

Interval Repeat Flashcard Demo with Basic Simple Features Designed based on Next.js App Router, ts-fsrs, fsrs-browser and Prisma.

TS-FSRS-Demo

introduction

Interval Repeat Flashcard Demo with Basic Simple Features Designed based on Next.js App Router, ts-fsrs, and Prisma.

use packages:

- prisma (global) npm install -g prisma
- dotenv (global) npm install -g dotenv
- next.js (>= 14.2.0)
- ts-fsrs (>= 3.5.3)
- tailwindcss (>= 3)
- daisyui (>= 4.4.22)
- fsrs-browser (>= 0.6.1)

Environment Variables

 An environment variable is a key value pair of string data that is stored on your machine's local environment. Refer to our Environment variables reference documentation for specific details.

Ref(prisma docs): https://www.prisma.io/docs/guides/development-environment/environment-variables

 .env.local  

DATABASE_URL="postgres://username:password@host:port/database?sslmode=require"
DATABASE_URL_WITH_SCHEMA=${DATABASE_URL}&schema=fsrsDemo 
# example
DATABASE_URL="postgres://default:[email protected]:5432/verceldb?sslmode=require&schema=fsrs"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=**** # openssl rand -base64 32

# GitHub OAuth https://github.com/settings/developers
GITHUB_ID=***
GITHUB_SECRET=***

# if need lingq server
LINGQ_KEY=**** # copy from http://localhost:3000/api/lingq/key

update schema: src/prisma/schema.prisma

datasource db {
  provider     = "postgresql" // or mysql
  url          = env("DATABASE_URL")
}

How to run?

• run docker make sure the database is running on your machine: docker-compose up
• Configure the database environment and use npm run dbpush
• Run demo

npm run dev # or yarn dev/ pnpm dev/ bun dev

• Open localhost:3000
• Sign In

Preview

Home

Tip: ts-fsrs version:3.5.3

Notes

You can view the added note information and status here, and click on each note to enter the detailed note page.

You can view detailed information about the note on this page, and you can click "forget" to reset the learning status of that card.

Review

You can perform review operations on the review page, and it is possible to display the answer using the keyboard. You can also schedule the timing and use Ctrl+Z or ⌘+Z to undo or revert the operation.

After completing the review, you will be prompted accordingly.

Settings

Click on the avatar, and you can set up, log out, and adjust the theme.

You can customize the parameters of your FSRS params

Train

use fsrs-browser to train.

API Router: http://localhost:3000/api/fsrs/train

Client: http://localhost:3000/train

In training:

Build

You can compile the demo for better performance by using npm run build, and then start the project using npm run start.

ts-fsrs-demo's Issues

add card hooks

Cannot read properties of undefined (reading 'request_retention')

I have set up this project but I am getting this error:
Error: Cannot read properties of undefined (reading 'request_retention')

from the file : src/lib/fsrs.ts (52:37) @ request_retention

it seems params[0] does not exist on a new database instance

[Question] What is the intention to call getFSRS twice with the first calling always returns null?

Thank you very much for creating this project ! I have interest to create my own flashcard app so I research about FSRS algorithm and found your example is really great!

I do have a question comes to my mind when I analyze how you update the card schedule.

export async function updateCard(cid:number,now:Date,grade:Grade,duration:number){
    const [_,recordItem]=await Promise.all([getFSRS(cid,true), schedulerCard({cid},now,Number(grade) as Grade)])

in your updateCard function, why are there two Promise with almost the same objective? I see schedulerCard() will do the same thing with getFSRS except for returning null. Why do we need to have getFSRS(cid, true) if the return in the end will be null. I don't see the generated user params will be used any where once we give skip=true.

thank you very much for your time and attention~

Exercises

Hi!

I am building my own anki-like app and your code is very helpful for me to understand how it should work, thank you!
I am planning to add to my app also exercises (for now, simple exercise like "fill the gap").

Swiping cards is my core, but I am trying to figure out how good or bad answer should affect fsrs score and properties. Do you have any suggestions/recommendations?

Thanks!

@ishiko732

use `ts-fsrs` for scheduling on the client-side

update retrieving the user FSRS parameters

Since we are using next-auth, we can actually retrieve the FSRS parameters using the user's uid, without the need to get it through the card's uid

add note models provider

I plan to implement extensions using a DI approach similar to Nestjs. Currently, I am still in the verification phase. The relevant repository :

• https://github.com/ishiko732/nextjs-reflect-metadata-DI
• https://github.com/microsoft/tsyringe
• https://github.com/instantcommerce/next-api-decorators

add external lifecycle hooks

Question: Best way to decide on next card

Hi there! Thanks a lot for creating this demo - I've learnt a lot from it trying to build my own flashcard application.

I would like to know what's the best approach for deciding on the next card to show. Currently, my approach is to sort by the due Date, but I noticed that you had a slightly different approach in CardContext.tsx.

// CardContext.tsx
function updateStateBox(
  noteBox: { [key in StateBox]: Array<Note & { card: Card }> },
  currentType: StateBox,
  nextDue?: Date
) {
  let change: StateBox = State.New; // default State.New
  switch (currentType) {
    case State.New:
      if (noteBox[State.Learning].length > 0) {
        change = State.Learning; // new -> learning
      } else if (noteBox[State.Review].length > 0) {
        change = State.Review; // new -> review
      }
      break;
    case State.Learning:
      if (noteBox[State.Review].length > 0) {
        change = State.Review; // learning/relearning -> review
      } else if (noteBox[State.New].length > 0) {
        change = State.New; // learning/relearning -> new
      } else {
        change = State.Learning; // learning/relearning -> learning/relearning
      }
      break;
    case State.Review:
      if (noteBox[State.Learning].length > 0) {
        change = State.Learning; // review -> learning
      } else if (noteBox[State.New].length > 0) {
        change = State.New; // review -> new
      } else {
        change = State.Review; // review -> review
      }
      break;
  }
  change =
    change === State.Learning &&
    noteBox[State.Learning].length > 0 &&
    fixDate(noteBox[State.Learning][0].card.due).getTime() -
      new Date().getTime() >
      0
      ? RandomNewOrReviewState(noteBox)
      : change;
  return change;
}

From what I can see, in general we are deciding on the next card by choosing a different state from the previous card.

May I know if there is a reason why you decided on this approach?
Is there a way to deterministically decide on the sort order of the cards for the day that doesn't use the due Date? Thanks!

use shadcn/ui

[Refactor] Review Page

Due to the large amount of data to be read, the review page takes too long to open, so the review page needs to be refactored.

• #24
• #26
• update card context
• #29
• allow note editing
• #30
• #27
• #32