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:password@abc.com: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.