VimGym

Interactive Vim training game where users complete levels by transforming text using Vim motions.

Features

• Interactive Levels: Practice Vim motions in a real editor environment.
• Scoring System: Compare your solution against the optimal keystrokes.
• Progress Tracking: Track your scores and improvements.
• Vim Emulation: Powered by @replit/codemirror-vim for accurate Vim behavior.

Tech Stack

• Framework: React 19 + Vite
• Styling: Tailwind CSS v4 + Motion
• Editor: CodeMirror 6 with @replit/codemirror-vim
• State Management: Zustand + Nuqs (URL state)
• Backend/Network: Supabase (RPC-first) + Zod
• Testing: Vitest + React Testing Library
• Tooling: Biome (Linter/Formatter)

Development

Prerequisites

• Node.js (Latest LTS recommended)
• pnpm

Setup

1. Install dependencies:

   pnpm install

2. Start the development server:

   pnpm dev

Commands

• pnpm dev: Start development server
• pnpm build: Build for production
• pnpm lint:fix: Fix linting and formatting issues (Biome)
• pnpm test: Run tests
• pnpm type-check: Run TypeScript type checking

Roadmap

• Motion log grouping
• Optimal solution comparison
• Analytics (Vexo)
• Keystroke visualization
• Vimsplain.ts package
• Text object support improvements
• Medals/Achievements system
• Theme picker
• Crowd-sourced levels