[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2908":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":15,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":33,"discoverSource":34},2908,"KeyZen","ShivaBhattacharjee\u002FKeyZen","ShivaBhattacharjee","A typing test with a keychron keyboard with audiofeedback inspired by Monkeytype","https:\u002F\u002Fkeyzen.theshiva.xyz",null,"TypeScript",135,20,117,1,0,2,9,3,3.97,"Apache License 2.0",false,"main",true,[26,27,28,29],"design","nextjs16","typing-game","ui","2026-06-12 02:00:44","\u003Cimg width=\"1440\" height=\"1080\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff44d3888-3b4e-45fd-9aa6-752ad1b47587\" \u002F>\n\n\n# KeyZen\n\n**KeyZen** is a typing-test website: timed and word-count drills, quotes, and a zen mode, with detailed results (WPM, accuracy, consistency, charts). On large screens you can turn on a **virtual keyboard** that highlights keys as you type, plus **key sounds** and optional **haptics** (supported devices).\n\n**Live :** [KeyZen](https:\u002F\u002Fkeyzen.theshiva.xyz\u002F)\n\n---\n\n## Features\n\n| Area | What you get |\n|------|----------------|\n| **Test modes** | Time (e.g. 15s–120s), word count, quotes (length presets), zen |\n| **Results** | WPM, raw speed, accuracy, character breakdown, consistency, elapsed time, WPM-over-time chart |\n| **Virtual keyboard** | Classic layout; mirrors expected keys while typing (**desktop \u002F `lg+` only** in the UI) |\n| **Sound** | Per-key feedback via Web Audio (`public\u002Fsounds\u002Fsound.ogg`); toggle in Settings |\n| **Haptics** | Optional vibration on supported hardware ([web-haptics](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fweb-haptics)) |\n| **Settings** | Theme (light \u002F dark \u002F system), accent color, typography (many Google fonts), show keyboard, sound, realtime WPM |\n\nSettings are stored in `localStorage` in the browser.\n\n---\n\n## Prerequisites\n\n- **Node.js** 20+ (LTS recommended)\n- **pnpm** 9+ (used in the commands below)\n\nIf you use npm or Yarn, run the equivalent of `install` and the scripts from `package.json`.\n\n---\n\n## Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002Fshivabhattacharjee\u002FKeyZen.git\n   cd KeyZen\n   ```\n\n   If your folder name differs (e.g. `keyboard-typing-test`), `cd` into that directory instead.\n\n2. **Install dependencies**\n\n   ```bash\n   pnpm install\n   ```\n\n   This installs all packages and runs **`postinstall`**, which copies quote text from the `inspirational-quotes` package into:\n\n   `data\u002Fquotes.json`\n\n   Quote mode needs that file; if `pnpm install` fails, fix the error first—do not skip install.\n\n3. **Run the development server**\n\n   ```bash\n   pnpm dev\n   ```\n\n4. **Open the site**\n\n   In your browser go to [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000).\n\n---\n\n## Production build\n\n```bash\npnpm build\npnpm start\n```\n\nBy default the app listens on port **3000** (`next start`). Use `pnpm start -- -p 4000` (or your host’s process manager) to change the port.\n\n---\n\n## Sound and the browser\n\nAudio uses the **Web Audio API**. Many browsers only unlock audio after a **user gesture** (click, tap, or key press). If sound is enabled in Settings but you hear nothing, interact with the page once (e.g. start typing or click the test area), then try again.\n\n---\n\n## Project scripts\n\n| Command | Description |\n|--------|-------------|\n| `pnpm dev` | Development server (Turbopack) |\n| `pnpm build` | Optimized production build |\n| `pnpm start` | Serve the production build |\n| `pnpm lint` | Run ESLint |\n| `pnpm typecheck` | Run TypeScript (`tsc --noEmit`) |\n| `pnpm format` | Format TS\u002FTSX with Prettier |\n\n---\n\n## Tech stack\n\n- [Next.js](https:\u002F\u002Fnextjs.org) (App Router), React 19, TypeScript  \n- Styling: Tailwind CSS, shadcn-style UI (Radix primitives, cmdk)  \n- Charts: Recharts  \n- Motion: [Motion](https:\u002F\u002Fmotion.dev)  \n- Words \u002F quotes: `random-words`, `inspirational-quotes` (data copied on install)\n\n---\n\n## Contributing\n\nIssues and pull requests are welcome on [GitHub](https:\u002F\u002Fgithub.com\u002Fshivabhattacharjee\u002FKeyZen). Before contributing, please read the [Contributing guide](CONTRIBUTING.md) for the project rules and workflow.\n\n## Contributors\n\nThanks to everyone who has contributed to KeyZen!\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\n      \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FShivaBhattacharjee\">\n        \u003Cimg src=\"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F95211406?v=4\" width=\"80\" height=\"80\" style=\"border-radius:50%\" alt=\"ShivaBhattacharjee\" \u002F>\u003Cbr \u002F>\n        \u003Csub>\u003Cb>ShivaBhattacharjee\u003C\u002Fb>\u003C\u002Fsub>\n      \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpriyanshuwq\">\n        \u003Cimg src=\"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F105375708?v=4\" width=\"80\" height=\"80\" style=\"border-radius:50%\" alt=\"priyanshuwq\" \u002F>\u003Cbr \u002F>\n        \u003Csub>\u003Cb>priyanshuwq\u003C\u002Fb>\u003C\u002Fsub>\n      \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FRusilKoirala\">\n        \u003Cimg src=\"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F209594643?v=4\" width=\"80\" height=\"80\" style=\"border-radius:50%\" alt=\"RusilKoirala\" \u002F>\u003Cbr \u002F>\n        \u003Csub>\u003Cb>RusilKoirala\u003C\u002Fb>\u003C\u002Fsub>\n      \u003C\u002Fa>\n    \u003C\u002Ftd>\n    \u003Ctd align=\"center\">\n      \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsaaahilhussain\">\n        \u003Cimg src=\"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F140058338?v=4\" width=\"80\" height=\"80\" style=\"border-radius:50%\" alt=\"saaahilhussain\" \u002F>\u003Cbr \u002F>\n        \u003Csub>\u003Cb>saaahilhussain\u003C\u002Fb>\u003C\u002Fsub>\n    \u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\n## Star History\n\n\u003Ca href=\"https:\u002F\u002Fwww.star-history.com\u002F?repos=ShivaBhattacharjee%2FKeyZen&type=date&legend=top-left\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=ShivaBhattacharjee\u002FKeyZen&type=date&theme=dark&legend=top-left\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=ShivaBhattacharjee\u002FKeyZen&type=date&legend=top-left\" \u002F>\n   \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=ShivaBhattacharjee\u002FKeyZen&type=date&legend=top-left\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n","KeyZen 是一个受Monkeytype启发的打字测试网站，专为使用Keychron键盘设计，并提供音频反馈。其核心功能包括多种测试模式（如定时、按字数和引用）、详细的测试结果（WPM、准确率、一致性等）以及虚拟键盘显示。技术上，它利用TypeScript编写，并采用Next.js 16框架，支持Web Audio API实现键音反馈及可选的触觉反馈。适用于希望提升打字速度与准确性，同时享受视觉与听觉反馈体验的用户，尤其适合那些偏好个性化设置（如主题切换、字体选择）的学习者或开发者。","2026-06-11 02:51:37","CREATED_QUERY"]