A web app to practice your Japanese reading skill -- one sentence at a time. Try it out on https://ichibunzutsu.vercel.app
I started this project as a "rehab" project for getting back into programming. While the main goal is to learn NextJS and TypeScript, the web app is something that's relevant to my current "endeavour", which is learning the Japanese language.
Copy .env.sample to .env.local
cp .env.sample .env.localIf you want to be able to use the app without a WaniKani account, you'd need to setup a Google Sheet for fetching the sentence:
- Make a copy of this Google Sheet spreadsheet: https://docs.google.com/spreadsheets/d/1Ejvindpn_eqY3tZHbFxjHeqlyNdiaJP-XOjZ89JA1EE/edit?usp=sharing
- Sign up a https://sheetson.com account (login with your gmail account)
- Share your copy of the spreadsheet to google@sheetson.com
- Get the spreadsheet id as described in: https://docs.sheetson.com/getting-started/#getting-spreadsheet-id-and-sheet-name. Set the
SHEETSON_SPREADSHEET_IDin.env.localwith this spreadsheet id. - Get your Sheetson API Key from https://sheetson.com/console, and set it as value of the
SHEETSON_API_KEYvariable on your.env.local
Note that the sentences from the sample spreadsheet are downloaded from Tatoeba.
To enable furigana feature, the app depends on kuroshiro and kuromoji which uses these dictionary files. Download the dictionary files to your machine with the donwload dictionary script:
./download-dictionary.sh
The files should be downloaded to the /dict dictionary or the project root.
Run the web server:
yarn dev
Open http://localhost:3000 with your browser. When the app is opened for the first time, a settings dialog would be presented to enable or disable WaniKani integration. If WaniKani fetching is enabled, you'll be asked to input your WaniKani API Key. Input your API Key, and after the page loads, you should see a Japanese sentence on the screen.
If WaniKani fetching is enabled, the sentence would be fetched from WaniKani API through the /v2/subjects endpoint (see WaniKani API Reference for more details). You need to sign up on WaniKani to get the API Key. Free account works as well as the app currently only fetches sentences from the first 3 levels (which are free). Once you are signed in to WaniKani, you can get the token here.
The web app is being migrated to use Prisma & Postgres database as sentence source. For development, set the database url & shadow url in your .env.local (see .env.sample). Then run the following command when synching the Prisma schema with the database:
yarn dotenv -e .env.local prisma db push
To generate the prisma client run:
yarn prisma generate
To run E2E (end-to-end) tests:
yarn test:e2e
We use Playwright to write our test, and a CI setup has been integrated on GitHub Actions. The following is a list of files related to E2E testing:
- tests/e2e/: contains E2E test files
- playwright.config.ts: Playwright configuration file
- .github/workflows/playwright.yml: GitHub Actions Workflow configuration file
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.