Clumsykeys is a fun and interative typing sim that helps you improve your typing speed and accuracy.
Description · Features · Key functionality · Running locally ·
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/
![clumsy-keys website base image](https://private-user-images.githubusercontent.com/106856064/253814033-529757ae-e126-45c7-94de-0d79b854f3e6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MjczNjEsIm5iZiI6MTcyNDcyNzA2MSwicGF0aCI6Ii8xMDY4NTYwNjQvMjUzODE0MDMzLTUyOTc1N2FlLWUxMjYtNDVjNy05NGRlLTBkNzliODU0ZjNlNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyN1QwMjUxMDFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mZTEyNDFiNTVmM2FlYzUwMzVhZjU0MzJhMDAwMzBmMDY0MWZkMjI1ZmY0MTllNWJkOGFkZmZiYWRlMTI4YmFhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.VtSt6eYa4VjENQfYTpomfdCESbp6cJVszwmEiD1TvGc)
![clumsy-keys website result image](https://private-user-images.githubusercontent.com/106856064/253814042-9b113e55-3ef2-4cb4-a6b0-20d85f78560a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MjczNjEsIm5iZiI6MTcyNDcyNzA2MSwicGF0aCI6Ii8xMDY4NTYwNjQvMjUzODE0MDQyLTliMTEzZTU1LTNlZjItNGNiNC1hNmIwLTIwZDg1Zjc4NTYwYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyN1QwMjUxMDFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00NTcxODczMjcyYTBmODNmMDRjMDVmODAxOTllNDFiM2M1N2E5NGM3NDI4NjE4OTVlM2M2NDIzMjQ3Mzk5ZDdhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.JbB4fsr67RFzGbRYP47tNqjSmPKd6-Nvbe6mDrXw_FI)
- 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.
- 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:
- English
- English_1K
- English_5K
- Code Javascript
- Code Python
Quotes are randomly generated from the Quotes.json
file.
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.
- Install run:
pnpm i
- Make a new
.env
file. - Populate the
.env
file with the necessary environment variables.
pnpm run dev
Your app template should now be running on localhost:5173.
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.