KeyBurn - Code Typing Test

KeyBurn is a typing test application specifically designed for programmers to practice and improve their coding speed and accuracy.

Features

• Code-specific typing tests with real code snippets
• WPM (Words Per Minute) and accuracy tracking
• Detailed statistics on your typing performance
• Keyboard heatmap to visualize your typing patterns
• User authentication with Clerk (social logins supported)
• Profile page to track your progress over time
• Test results saved to Supabase database
• SEO optimized for better search engine visibility

Setup Instructions

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/yourusername/keyburn.git
cd keyburn

2. Install dependencies:

npm install

3. Create a .env file in the root directory with the following variables:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_CLERK_SIGN_IN_URL=/sign-in
VITE_CLERK_SIGN_UP_URL=/sign-up
VITE_CLERK_AFTER_SIGN_IN_URL=/profile
VITE_CLERK_AFTER_SIGN_UP_URL=/profile

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Set up Clerk:

   • Create an account at clerk.dev
   • Create a new application
   • Configure social login providers (Google, GitHub, etc.)
   • Copy your publishable key to the .env file

5. Set up Supabase:

   • Create an account at supabase.com
   • Create a new project
   • Create a test_results table with the following schema:

     create table test_results (
       id bigint generated by default as identity primary key,
       user_id text not null,
       wpm integer not null,
       accuracy integer not null,
       correct_chars integer not null,
       incorrect_chars integer not null,
       total_characters_typed integer not null,
       character_stats jsonb not null,
       created_at timestamp with time zone default now(),
       snippet_title text,
       test_duration integer not null
     );

   • Copy your URL and anon key to the .env file

6. Run the development server:

npm run dev

7. Open your browser and navigate to http://localhost:5173

SEO Configuration

The application includes comprehensive SEO meta tags in the index.html file:

• Basic meta tags (title, description, keywords)
• Open Graph tags for social media sharing
• Twitter Card tags for Twitter sharing
• Canonical link

To customize the SEO for your deployment:

1. Update the URLs in the meta tags to match your domain
2. Create and add appropriate social media preview images
3. Adjust meta descriptions and keywords as needed

Technologies Used

• Vue.js 3 with Composition API
• TypeScript
• Tailwind CSS
• Clerk for authentication
• Supabase for database

License

MIT