A React/Next.js/Typescript based statistics web app for the amazing WaniKani website !
Hosted here if you want to try: wkstats.tranqyll.fr.
There are actually two main statistics website for WaniKani: wkstats.comand wkstats.com:10001. I wanted to create a new app with more modern technology, WaniKani API V2 support, and share its source code so everyone can contribute.
That how this project was born !
It uses the following technologies:
- React/Typescript
- Material UI: UI library for React
- Next.js: For local API server and SSR rendering
- Docker: Easily deploy it to my own server
- TravisCI: Continuous Integration
The web app doesn't communicate with the WaniKani API directly. Instead, it sends its requests to the local API server
(under /pages/api) which will then connect to WaniKani. This allows mainly two things:
- Cache requests made to WaniKani
- Post-process WaniKani responses in a suitable format for the frontend
To authenticate the user, the local API need the user's access token. To check if the token is valid, a simple request to WaniKani is made and the response code is checked. The token is then stored in a browser's cookie.
Items data (radicals, kanjis, vocabularies) from the different sources are stored in src/data/dump. This directory
also contains scripts to dump them before launching the app. However, due to copyright issues, the WaniKani data can't be
dumped in a public repo like this, so they are retrieved at runtime, using scripts under src/data/dl. They
are only retrieved once, during the first connection of the first user since the last reboot (since we need an API token
to download them) and then saved to a temporary folder.
pages/: Pages of the web apppages/api: API endpointspublic/: Static images and files served by the serversrc/: The rest of the source code
If you want to contribute to the project, feel free to create an issue or to propose a pull request. I'll be more than happy !
- Fix every single bug !
- Implement "resets" support (I never made a reset, I have no idea how the app handle this)
- Improve the level-up projections with more accurate computation
- Fix UI glitches
- Add a heatmap of the user's activity
- Add a timeline (like the Ultimate Timeline script)
- Add more stats to the "General stats" section
- Add more stats everywhere actually !
- Improve speed
Favicon generated using favicon.io. Credits: https://www.flaticon.com/authors/freepik
This code is licensed under the MIT License. See LICENSE file for more information.