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
- next.js (>= 14.2.0)
- ts-fsrs (>= 3.5.3)
- tailwindcss (>= 3)
- shadcn
- fsrs-browser (>= 0.6.1)
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
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")
}
- run docker make sure the database is running on your machine:
docker-compose up
- Configure the database environment and use
npm run db:push
- Run demo
npm run dev # or yarn dev/ pnpm dev/ bun dev
- Open localhost:3000
- Sign In
Tip: ts-fsrs version:3.5.3
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.
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.
Click on the button, and you can set up.
You can customize the parameters of your FSRS params
use fsrs-browser
to train.
API Router:
http://localhost:3000/api/fsrs/train
Client:
http://localhost:3000/train
You can compile the demo for better performance by using npm run build
, and then start the project using npm run start
.