KeyBurst

KeyBurst is a lightweight, client-first typing trainer and results sharer built with Vue 3 and TypeScript. It focuses on fast feedback, simple sharing (no backend required), and internationalization.

This repository powers the KeyBurst UI and includes features such as a results modal with a downloadable/shareable PNG image (generated client-side from an SVG), compressed deep-link sharing using LZ-String, and an accessible language selector.

You can try the app on: keyburst.basselaflak.me

Features

• Vue 3 + TypeScript single-page app
• Client-side share image generation (SVG → canvas → PNG) with Web Share API support and download fallback
• Compressed deep-link sharing using LZ-String (no server required)
• Internationalization (i18n) with several language files in src/services/i18n
• Simple responsive UI components (Stats modal, Language selector, Charts)

Quick start

Prerequisites

• Node.js (18+) or compatible
• npm (or your preferred Node package manager)

Install

npm install

Run (development)

npm run dev

Build (production)

npm run build

Preview build

npm run preview

Important files and folders

• src/App.vue — main application shell (language handling, decode-on-load for shared stats)
• src/components/StatsView.vue — results modal, chart, share/export logic (SVG generation)
• src/components/LanguageSelector.vue — searchable, accessible language selector
• src/services/i18n/ — per-language translation files
• package.json — dependencies (includes lz-string for compressed deep links)

Configuration

KeyBurst uses an API key for integrations that call external services. If you have a Gemini API key, provide it to the app via an environment variable named GEMINI_API_KEY.

Local development (.env)

1. Create a file named .env in the project root (this file should NOT be committed).

# .env
VITE_GEMINI_API_KEY=your_gemini_api_key_here

2. Vite exposes variables prefixed with VITE_ to the client code. The app will read import.meta.env.VITE_GEMINI_API_KEY where necessary.

CI / Production

• Store the secret in your CI provider or hosting platform's secret manager and expose it as VITE_GEMINI_API_KEY at build time. Do not bake secrets into client-side code in source control.

Security notes

• Never commit .env files or plaintext API keys to the repository. Add .env to .gitignore if not already present.
• Client-side apps inevitably expose any key embedded in the built bundle. If the Gemini key must remain secret, proxy requests through a small server that keeps the key private and forwards only necessary data.

Share & deep links

KeyBurst uses a client-only sharing strategy:

• To create a visual share, the app builds a small SVG result card, renders it to a canvas, and exports a PNG. The app then attempts to use the Web Share API (with files) and falls back to downloading the PNG when the API is unavailable.
• For shareable links the app serializes a small payload of result fields, compresses it using LZ-String, and appends it to the application URL as ?share=.... When the app loads with that param it will attempt to decompress and show the results modal.

Notes: deep links contain only the minimal result payload and are compressed; they do not upload data to any server.

Localization

Translations live under src/services/i18n/. The application saves the selected language to localStorage and updates the document lang attribute and direction (dir) when the language changes.

Contributing

Contributions are welcome. Please open issues or pull requests for fixes, improvements, or translations. Keep changes focused and small; the project prefers minimal, well-documented PRs.

License

This project is licensed under the MIT License — see the bundled LICENSE file for details.

---