Clumsy Keys

Clumsykeys is a fun and interative typing sim that helps you improve your typing speed and accuracy.

Description · Features · Key functionality · Running locally ·

Description

Clumsykeys is an interactive web interface that helps to improve your typing speed and accuracy. The web-app leverages the high performant capabilities of the Svelte to provide a smooth and responsive experience. The project is implemented in a TypeScript environment and hosted on Vercel.

Link: https://clumsy-keys.vercel.app/

Features

• Sveltekit App Router
• Svelte 3.x and Typescript for reliable and fast development
• Vercel Edge Adapter for Edge runtime compatibility
• User Interface and Experience
  • Design is built from scratch using Figma
  • Styling with Tailwind CSS
  • Icons from Heroicons and Google Icons
• ChartsJS for the visualizations.

(Soon to be added 😊)

• Supabase Auth, Github OAuth, Google OAuth for authentication and authorizing users.
• Supabase DB as the database solution.
• StripeJS for payment processing.

Key Functionality

• Realtime typing speed (wpm) and accuracy calculations.
• Ability to practice text with punctuations, special characters and numbers.
• Time and word counter to personalize the typing experience.
• Input history your tracking typing speed for each word after every test.
• Chart to visualize your typing speed, accuracy and errors over time.

Support for the following languages are currently available:

1. English
2. English_1K
3. English_5K
4. Code Javascript
5. Code Python

Quotes are randomly generated from the Quotes.json file.

Running locally

You will need to have the necessary environment variables setup in your .env file. This include keys for your Supabase account, and Stripe account, Github Outh Client, Github Outh Secret.

HOST =
SUPABASE_URL =
SUPABASE_ANON_KEY =
STRIPE_PUBLISHABLE_KEY =
STRIPE_WEBHOOK_KEY =
STRIPE_SECRET_KEY =
GITHUB_CLIENT_ID =
GITHUB_CLIENT_SECRET =

Note: You should not commit your .env file or it will expose secrets that will allow others to control access to your authentication provider accounts.

1. Install run: pnpm i
2. Make a new .env file.
3. Populate the .env file with the necessary environment variables.

pnpm run dev

Your app template should now be running on localhost:5173.

Running locally with docker

docker login
docker pull korebhaumik/clumsy-keys.
docker run -env-file .env -p 3000:3000 korebhaumik/clumsy-keys

Note: If the docker image is not available (repo is privated), you can build it locally by running docker build -t clumsy-keys. in the root directory of the project.