pandatype

A competitive typing speed testing, traning, and ranking front-end web application with a minimalistic design, supports typing tests in multiple languages (EN/zhCN).

中英文打字速度测试/排行榜的一个网站

Try It Out HERE! 项目展示»

Backend repo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Roadmap
3. Getting Started
   • Prerequisites
   • Installation
4. Acknowledgments

About The Project

Pandatype was greatly inspired by Monkeytype, a beloved minimalistic typing test web application. However, it lacks a proper implementation on featuring typing tests with Chinese characters, hanzi 汉字, and its romanization system, pinyin 拼音. Therefore, to enhance the typing test experience for Chinese typists/speakers, Pandatype saw this opportunity and was created in a similar fashion in terms of visual design, enhanced word sets and testing methodology, especially for the Simplified Chinese language.

就是也想搞个玩中文打字测试，也能体验类似用国外英文打字网站Monkeytype打英文时的那种爽感。界面设计基本参考了人家的，在呈现简体中文词汇和句子打字测试的方面做了一些更加贴近本土化的修改和增强。

(back to top)

Built With

Front end:

• React.js - pandatype's UI components are coded in JavaScript
• Redux - state management with Redux Toolkit, it also offers redux store setup, creating reducers, updating immutable states in reducers in a convenient way, and much more.
• Chart.js - data visualization for result statistics of a typing test

Back end:

• Spring Boot - built a number of RESTful API microservices
• Spring Security - mainly used to handle user authentication with JSON Web Token (JWT) token
• MyBatis - to access database
• MySQL - relational database storing word sets, leaderboard records, user account, etc
• Docker - to containerize backend services for easier times during deployment

(back to top)

Roadmap

• Typing test
  • take tests in mutiple modes (time/words/quote)
  • word sets for mutiple languages (EN/zhCN)
  • result screen displays typing test statistics in numbers and graph
• Leaderboard
• Customizable theme
• Account system
• User dashboard

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

Make sure the backend services are up and running locally.

git clone https://github.com/any-other-guy/pandatype-backend.git
cd pandatype-backend
bash local.sh

Installation

1. Clone the repo

   git clone https://github.com/any-other-guy/pandatype-frontend.git

2. Install NPM packages

   npm install

3. Run the app in the development mode. Open http://localhost:3000 to view it in the browser.

   npm start

(back to top)

Acknowledgments

• UI/UX design is inspired by Monkeytype
• List of the most frequently used chinese words taken from webdict
• Converted chinese character to pinyin with pypinyin

(back to top)