https://github.com/0ql/Coffeetyper-Svelte

Typing test with a minimalist design, fast but super customizable. Written in Svelte and Unocss.
https://github.com/0ql/Coffeetyper-Svelte

pwa svelte typingtest windicss

Last synced: 3 months ago
JSON representation

Typing test with a minimalist design, fast but super customizable. Written in Svelte and Unocss.

• Host: GitHub
• URL: https://github.com/0ql/Coffeetyper-Svelte
• Owner: 0ql
• License: gpl-3.0
• Created: 2021-11-27T16:24:56.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-24T16:50:15.000Z (over 1 year ago)
• Last Synced: 2024-08-03T13:04:30.658Z (6 months ago)
• Topics: pwa, svelte, typingtest, windicss
• Language: CSS
• Homepage: https://coffeetyper.netlify.com
• Size: 255 KB
• Stars: 25
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        



  

  




# Coffeetyper

### What is Coffeetyper?

[Coffeetyper](https://coffeetyper.com) is a minimalistic and lightweight typingtest inspired by [Monkeytype](https://monkeytype.com).

### Features

- ⚡ Super Fast loading time ⚡

- Full offline support

- Progressive Web App

- Highly customizable

  

  - Customize all aspects of the textbox like width, letter spacing, line height, caret width...

  

  - Realtime color scheme switching

  

  - Add a background image

  

  - Pick between ALL fonts available on [Google Fonts](https://fonts.google.com)

- Settings get saved to local storage

- Save and switch between instances of your cosmetics in realtime

- Export and import Cosmetics (as JSON)

- Keybindings

- Randomize the look of Coffeetyper (Produces very interesting results!)

- All settings apply in realtime; no need to reload

### Usage

To open the Settings move your mouse to the left of the screen.

![](https://i.imgur.com/PpnKinI.png) 

To switch the theme move your mouse to the right of the screen.

![](https://i.imgur.com/CVHuT6F.png)

![](https://i.imgur.com/db2T4DA.png)

![](https://i.imgur.com/az53ftv.png)

![](https://i.imgur.com/JvtXpVq.png)

### Calculation of WPM/SPM

The WPM are calculated by taking the amount of correctly written symbols per minute and dividing them by 5 (the average length of an english word).

### Stack

Coffeetyper is written in [Svelte](https://svelte.dev) with Typescript and uses Windicss in conjuction with Postcss. 

### Should you use Coffeetyper?

It still lacks some features and isn't so feature rich as Monkeytype. But it provides the most important functions and statistics of a typing test and is definitely useable.

### Color Schemes

Credit for the color schemes goes to [Monkeytype](https://github.com/Miodec/monkeytype).

### Contribute

PRs are always appreciated.