DEV Community: mukitaro

How I Added AI-Powered Code Generation to My Typing Practice App Using Gemini API

mukitaro — Thu, 05 Feb 2026 14:15:15 +0000

The Feature I Wanted to Build

I've been working on DevType, a typing practice app for programmers. The app comes with a set of pre-made code snippets, but I kept getting the same request from users:

"Can I practice typing my own code?"

Fair enough. So I added a custom problem feature. Users can paste their own code snippets and practice typing them. That worked, but then came the next question:

"What if I don't have code ready? Can you suggest something?"

I sat there thinking about this for a while. Manually curating code snippets for every possible topic users might want? That's a losing battle. Then it hit me - why not let AI generate it? The user just describes what they want to practice, and the AI creates a custom snippet instantly.

What the Feature Looks Like

Here's the flow in action:

User clicks "Generate with AI" button
A dialog opens asking for:
- What kind of code they want (natural language prompt)
- Programming language (15 options)
- Difficulty level (1-5)
AI generates the code, title, and description
User can edit, save, and start practicing

The whole thing takes about 2-3 minutes.

Why Gemini?

I actually started with Anthropic's Claude API. It works great, but I wanted a cheaper option for this feature since it's called frequently.

Gemini Flash is significantly cheaper for simple generation tasks like this. For comparison:

Anthropic Claude: ~$3 per million input tokens
Gemini Flash: ~$0.075 per million input tokens

That's a 40x difference. For a hobby project, that matters.

I kept both providers and added fallback logic - if one fails, try the other.

Setting Up the Gemini API

First, get an API key from Google AI Studio. Then install the SDK:

npm install @google/generative-ai

Basic usage is straightforward:

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
const model = genAI.getGenerativeModel({
  model: "gemini-2.5-flash",
  systemInstruction: "Your system prompt here",
});

const result = await model.generateContent("User prompt here");
const text = result.response.text();

The systemInstruction parameter is key - it sets the AI's role and rules before the user's request comes in.

The Prompt Engineering Part

This is where I spent most of my time. Getting consistent, usable output from an LLM requires careful prompt design.

System Prompt Structure

Here's the actual system prompt I use:

const systemPrompt = `You are a code generator for a typing practice game called DevType.
Your task is to generate realistic, practical code snippets that users will type to practice coding.

Rules:
1. Generate syntactically correct code in ${languageName}
2. Use common patterns and best practices for the language
3. Include appropriate variable names and structure
4. Do NOT include comments - they will be stripped anyway
5. Target difficulty level ${difficulty}/5:
   - Level 1: Very simple, 20-50 characters (basic variable declarations, simple functions)
   - Level 2: Simple, 50-100 characters (short functions, basic logic)
   - Level 3: Medium, 100-200 characters (moderate functions, some complexity)
   - Level 4: Complex, 200-350 characters (multiple functions, more logic)
   - Level 5: Advanced, 350-500 characters (complex algorithms, multiple components)
6. Make the code educational and representative of real-world patterns
7. The code should be self-contained and make sense on its own

IMPORTANT: Respond ONLY with valid JSON in this exact format, no markdown, no code blocks:
{
  "title": "A short descriptive title (max 50 chars)",
  "code": "The generated code here",
  "description": "A brief description of what the code does (1-2 sentences)",
  "executionOutput": "Standard output only if the code prints something, otherwise empty string"
}`;

Why These Specific Rules?

No comments - Users are practicing typing, not reading. Comments slow them down and aren't part of the "coding" experience.

Character limits per level - This took trial and error. Too short feels pointless, too long gets tedious. The ranges I landed on feel right for typing practice.

Self-contained code - The snippet needs to make sense without external context. No import statements that reference non-existent files.

JSON output format - I need structured data, not free-form text. Specifying the exact format prevents parsing headaches.

The "executionOutput" field - I added this later. Users like seeing what their code would output when run. It makes the practice feel more real.

Handling AI Response Parsing

LLMs don't always follow instructions perfectly. Sometimes they wrap JSON in markdown code blocks, sometimes they add explanatory text before or after.

Here's my parsing approach:

let generated: GeneratedProblem;
try {
  // Try to extract JSON from anywhere in the response
  const jsonMatch = responseText.match(/\{[\s\S]*\}/);
  if (!jsonMatch) {
    throw new Error("No JSON found in response");
  }
  generated = JSON.parse(jsonMatch[0]);
} catch {
  console.error("Failed to parse AI response:", responseText);
  return NextResponse.json(
    { error: "Failed to parse AI response" },
    { status: 500 }
  );
}

// Validate required fields
if (!generated.title || !generated.code) {
  return NextResponse.json(
    { error: "Invalid AI response: missing required fields" },
    { status: 500 }
  );
}

The regex /\{[\s\S]*\}/ finds the first JSON object in the response, even if there's garbage text around it. It's not bulletproof, but it handles most edge cases.

Provider Abstraction

Since I use two AI providers, I created an abstraction layer:

export type AIProvider = "anthropic" | "gemini";

export function getAIProvider(): AIProvider {
  const provider = process.env.AI_PROVIDER?.toLowerCase();
  if (provider === "gemini") return "gemini";
  return "anthropic"; // default
}

export async function generateWithAI(options: GenerateOptions): Promise<string> {
  const provider = getAIProvider();

  if (provider === "gemini") {
    try {
      return await generateWithGemini(options);
    } catch (error) {
      console.error("Gemini failed, falling back to Anthropic:", error);
      if (process.env.ANTHROPIC_API_KEY) {
        return await generateWithAnthropic(options);
      }
      throw error;
    }
  }

  // Similar fallback logic for Anthropic -> Gemini
  // ...
}

This gives me:

Easy switching between providers via environment variable
Automatic fallback if one provider has issues
Consistent interface regardless of which provider is used

Frontend: The Generate Dialog

The UI is a simple dialog with three inputs:

export function AIGenerateDialog({ open, onOpenChange, onGenerated }) {
  const [prompt, setPrompt] = useState("");
  const [language, setLanguage] = useState("python");
  const [difficulty, setDifficulty] = useState(3);
  const [isGenerating, setIsGenerating] = useState(false);

  const handleGenerate = async () => {
    setIsGenerating(true);

    const response = await fetch("/api/generate-problem", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt, language, difficulty }),
    });

    const generated = await response.json();
    onGenerated(generated, language);
    onOpenChange(false);
    setIsGenerating(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <Textarea
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="e.g., A function that checks if a number is prime"
        />
        {/* Language selector, difficulty buttons, etc. */}
        <Button onClick={handleGenerate} disabled={isGenerating}>
          {isGenerating ? "Generating..." : "Generate"}
        </Button>
      </DialogContent>
    </Dialog>
  );
}

Nothing fancy here. The interesting part is what happens on the server.

Things I Learned

1. Be explicit about output format

"Return JSON" isn't enough. You need to show the exact structure you want, with field names and example values.

2. Character counts are tricky

"Generate a short function" means different things to different LLMs (and different runs). Specific character ranges give more consistent results.

3. Fallback is essential

APIs fail. Rate limits hit. Having a backup provider saved me multiple times.

4. Users will try everything

Someone will type "generate malware" or "write code that crashes the system." Your system prompt should handle adversarial inputs gracefully. The typing practice context naturally limits the damage - it's just code text that gets displayed, not executed.

5. Cost adds up fast

Even cheap APIs become expensive at scale. I'm considering adding rate limits per user to prevent abuse.

Try It Yourself

If you want to see this in action:

Go to DevType
Sign up (GitHub or Google auth)
Go to Practice > Create New
Click "Generate with AI"

You can generate code in 15 languages: Python, JavaScript, TypeScript, Go, Rust, Java, C, C++, C#, PHP, Ruby, Kotlin, Swift, SQL, and Shell.

What's Next

I'm thinking about:

Smarter difficulty detection - Automatically adjust difficulty based on the generated code's actual complexity
Multiple variations - Generate 3 options and let the user pick
Learning paths - "Practice async/await in JavaScript" generates a progressive series of problems

Resources

What AI features have you added to your projects? I'd love to hear about your prompt engineering adventures in the comments.

Building a Theme System with Next.js 15 and Tailwind CSS v4 (Without dark: Prefix)

mukitaro — Fri, 09 Jan 2026 13:41:08 +0000

The Problem

When I started building DevType, a typing practice app for programmers, I wanted users to choose from multiple editor themes - not just light and dark, but themes like Dracula, VS Code Dark, GitHub, Monokai, and Nord.

The typical dark: prefix approach in Tailwind doesn't work well here. You'd end up with something like:

<div className="bg-white dark:bg-gray-900 dracula:bg-[#282a36] monokai:bg-[#272822]">

This gets messy fast. I needed a better approach.

The Solution: CSS Variables + Tailwind v4

The key insight is that CSS variables can be updated at runtime, and Tailwind CSS v4 makes it trivial to use them as color values.

Here's the architecture:

┌─────────────────┐     ┌──────────────┐     ┌─────────────┐
│ Theme Definition│ --> │ CSS Variables│ --> │ Tailwind    │
│ (TypeScript)    │     │ (:root)      │     │ (bg-primary)│
└─────────────────┘     └──────────────┘     └─────────────┘

Step 1: Define Theme Types

First, define what colors each theme needs. I split this into two categories:

src/lib/settings/themes.ts

// Site-wide colors (CSS variables)
export type SiteColors = {
  background: string;
  foreground: string;
  card: string;
  cardForeground: string;
  primary: string;
  primaryForeground: string;
  secondary: string;
  secondaryForeground: string;
  muted: string;
  mutedForeground: string;
  accent: string;
  accentForeground: string;
  destructive: string;
  border: string;
  input: string;
  ring: string;
  // ... more as needed
};

export type EditorTheme = {
  id: string;
  name: string;
  site: SiteColors;
};

This gives you type safety when defining themes. No more typos in color values.

Step 2: Create Theme Definitions

Here's a simplified version of my Dracula theme:

export const EDITOR_THEMES: Record<string, EditorTheme> = {
  dracula: {
    id: "dracula",
    name: "Dracula",
    site: {
      background: "#282a36",
      foreground: "#f8f8f2",
      card: "#1e1f29",
      cardForeground: "#f8f8f2",
      primary: "#bd93f9",
      primaryForeground: "#282a36",
      secondary: "#44475a",
      secondaryForeground: "#f8f8f2",
      muted: "#44475a",
      mutedForeground: "#8494c9",
      accent: "#50fa7b",
      accentForeground: "#282a36",
      destructive: "#ff5555",
      border: "#44475a",
      input: "#44475a",
      ring: "#bd93f9",
    },
  },
  "github-light": {
    id: "github-light",
    name: "GitHub Light",
    site: {
      background: "#ffffff",
      foreground: "#24292f",
      card: "#f6f8fa",
      cardForeground: "#24292f",
      primary: "#0969da",
      primaryForeground: "#ffffff",
      // ...
    },
  },
  // Add more themes...
};

I ended up with 8 themes: Dracula, VS Code Dark, GitHub Dark, GitHub Light, One Light, Monokai, Nord, and Solarized Dark.

Step 3: Apply Theme to CSS Variables

This is where the magic happens. When a user selects a theme, update the CSS variables on :root:

export function applySiteTheme(theme: EditorTheme): void {
  const root = document.documentElement;
  const { site } = theme;

  root.style.setProperty("--background", site.background);
  root.style.setProperty("--foreground", site.foreground);
  root.style.setProperty("--card", site.card);
  root.style.setProperty("--card-foreground", site.cardForeground);
  root.style.setProperty("--primary", site.primary);
  root.style.setProperty("--primary-foreground", site.primaryForeground);
  root.style.setProperty("--secondary", site.secondary);
  root.style.setProperty("--secondary-foreground", site.secondaryForeground);
  root.style.setProperty("--muted", site.muted);
  root.style.setProperty("--muted-foreground", site.mutedForeground);
  root.style.setProperty("--accent", site.accent);
  root.style.setProperty("--accent-foreground", site.accentForeground);
  root.style.setProperty("--destructive", site.destructive);
  root.style.setProperty("--border", site.border);
  root.style.setProperty("--input", site.input);
  root.style.setProperty("--ring", site.ring);
}

That's it. One function call and all colors update instantly.

Step 4: Connect CSS Variables to Tailwind v4

In Tailwind CSS v4, you use @theme to define custom properties. Here's my globals.css:

@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

/* Default values (Dracula) */
:root {
  --background: #282a36;
  --foreground: #f8f8f2;
  --card: #1e1f29;
  --primary: #bd93f9;
  /* ... */
}

Now you can use bg-background, text-foreground, border-border etc. in your components. These colors automatically update when the theme changes.

Step 5: React Context for State Management

Wrap everything in a context to persist settings and apply themes:

"use client";

import { createContext, useContext, useState, useEffect, useCallback } from "react";
import { getTheme, DEFAULT_THEME_ID, applySiteTheme } from "@/lib/settings/themes";

const STORAGE_KEY = "devtype-settings";

export function SettingsProvider({ children }) {
  const [themeId, setThemeId] = useState(DEFAULT_THEME_ID);
  const [isLoaded, setIsLoaded] = useState(false);

  // Load from localStorage on mount
  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored) {
      const { themeId } = JSON.parse(stored);
      setThemeId(themeId || DEFAULT_THEME_ID);
    }
    setIsLoaded(true);
  }, []);

  // Apply theme when it changes
  useEffect(() => {
    if (!isLoaded) return;
    const theme = getTheme(themeId);
    applySiteTheme(theme);
  }, [themeId, isLoaded]);

  const setTheme = useCallback((newThemeId: string) => {
    setThemeId(newThemeId);
    localStorage.setItem(STORAGE_KEY, JSON.stringify({ themeId: newThemeId }));
  }, []);

  return (
    <SettingsContext.Provider value={{ themeId, setTheme, isLoaded }}>
      {children}
    </SettingsContext.Provider>
  );
}

export function useSettings() {
  const context = useContext(SettingsContext);
  if (!context) throw new Error("useSettings must be used within SettingsProvider");
  return context;
}

Usage in Components

Now using themed colors is simple:

// No dark: prefix needed!
<div className="bg-background text-foreground">
  <Card className="bg-card border-border">
    <h1 className="text-primary">Welcome</h1>
    <p className="text-muted-foreground">Some description</p>
    <Button className="bg-primary text-primary-foreground">
      Click me
    </Button>
  </Card>
</div>

These colors work correctly whether the user picks Dracula (dark), GitHub Light (light), or any other theme.

Handling Flash of Default Theme

One issue: on page load, users might briefly see the default theme before their saved theme loads. Fix this by applying the theme early:

// In your root layout
<html>
  <head>
    <script dangerouslySetInnerHTML={{
      __html: `
        try {
          const settings = JSON.parse(localStorage.getItem('devtype-settings'));
          if (settings?.themeId) {
            document.documentElement.setAttribute('data-theme', settings.themeId);
          }
        } catch (e) {}
      `
    }} />
  </head>
  <body>
    <SettingsProvider>{children}</SettingsProvider>
  </body>
</html>

Or use a CSS-only approach with the default theme colors in :root.

Adding New Colors

When I needed warning colors for notices, adding them was straightforward:

Add to the type:

export type SiteColors = {
  // ... existing colors
  warning: string;
  warningForeground: string;
};

Add to each theme:

// Dark theme
warning: "rgba(251, 191, 36, 0.08)",
warningForeground: "#fcd34d",

// Light theme
warning: "rgba(217, 119, 6, 0.1)",
warningForeground: "#b45309",

Add to applySiteTheme:

root.style.setProperty("--warning", site.warning);
root.style.setProperty("--warning-foreground", site.warningForeground);

Add to @theme:

--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);

Use it:

<div className="bg-warning text-warning-foreground">
  Warning message
</div>

Why This Approach Works

No build-time variants - Colors are runtime CSS variables, not compiled classes
Type-safe themes - TypeScript ensures all themes have all required colors
Easy to add themes - Just add a new object to EDITOR_THEMES
Works with Tailwind v4 - @theme inline makes CSS variables available as utilities
Instant switching - No page reload, colors update immediately
Persisted settings - localStorage keeps the user's preference

Live Demo

Try it yourself at DevType - go to Settings and switch between themes. The entire site updates instantly.

Available themes:

Dracula
VS Code Dark
GitHub Dark
GitHub Light
One Light
Monokai
Nord
Solarized Dark

What approach do you use for theming? Let me know in the comments!

Adding GitHub, Google, and X Login to Next.js 15 with Supabase Auth

mukitaro — Sat, 03 Jan 2026 14:00:08 +0000

Social login is essential for modern web apps. In this article, I'll show you how I implemented GitHub, Google, and X (Twitter) OAuth in my typing game DevType using Next.js 15 App Router and Supabase Auth.

I'll cover:

Setting up OAuth providers in Supabase Dashboard
Client-side login implementation
Server-side callback handling
Middleware for session management
A critical gotcha with X OAuth 2.0 (and the workaround)

Prerequisites

Next.js 15 with App Router
Supabase project
Developer accounts for GitHub, Google, and X

Project Structure

src/
├── app/
│   ├── auth/
│   │   └── callback/
│   │       └── route.ts      # OAuth callback handler
│   └── [locale]/
│       └── login/
│           └── page.tsx      # Login page
├── components/
│   └── auth/
│       └── LoginForm.tsx     # Login UI component
├── lib/
│   └── supabase/
│       ├── client.ts         # Browser client
│       ├── server.ts         # Server client
│       └── middleware.ts     # Session management
└── middleware.ts             # Next.js middleware

Step 1: Install Dependencies

npm install @supabase/supabase-js @supabase/ssr

@supabase/supabase-js: Core Supabase client
@supabase/ssr: Server-side rendering support for Next.js

Step 2: Environment Variables

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Step 3: Configure OAuth Providers

Supabase Dashboard

Go to Authentication > Providers in your Supabase Dashboard.

GitHub Setup

Go to GitHub Developer Settings
Create a new OAuth App
Set Authorization callback URL:

   https://your-project.supabase.co/auth/v1/callback

Copy Client ID and Client Secret to Supabase Dashboard

Google Setup

Go to Google Cloud Console
Create OAuth 2.0 credentials
Add authorized redirect URI:

   https://your-project.supabase.co/auth/v1/callback

Copy Client ID and Client Secret to Supabase Dashboard

X (Twitter) Setup

Go to X Developer Portal
Create a new app with OAuth 2.0 enabled
Set Callback URI:

   https://your-project.supabase.co/auth/v1/callback

Copy Client ID and Client Secret to Supabase Dashboard

Important: More on X OAuth issues later in this article.

Step 4: Supabase Client Setup

Browser Client (src/lib/supabase/client.ts)

"use client";

import { createBrowserClient } from "@supabase/ssr";

let client: ReturnType<typeof createBrowserClient> | null = null;

export function isSupabaseConfigured(): boolean {
  return !!(
    process.env.NEXT_PUBLIC_SUPABASE_URL &&
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  );
}

export function createClient() {
  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

  // Return mock client if not configured (for development)
  if (!url || !key) {
    return createMockClient();
  }

  // Singleton pattern for browser client
  if (client) return client;

  client = createBrowserClient(url, key);
  return client;
}

function createMockClient() {
  // Returns a mock that won't crash your app during development
  return {
    auth: {
      getUser: async () => ({ data: { user: null }, error: null }),
      getSession: async () => ({ data: { session: null }, error: null }),
      signInWithOAuth: async () => ({ data: null, error: new Error("Not configured") }),
      signOut: async () => ({ error: null }),
      onAuthStateChange: () => ({ data: { subscription: { unsubscribe: () => {} } } }),
    },
  } as ReturnType<typeof createBrowserClient>;
}

Key points:

isSupabaseConfigured() allows checking before attempting auth
Mock client prevents crashes when Supabase isn't configured
Singleton pattern avoids multiple client instances

Server Client (src/lib/supabase/server.ts)

import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            );
          } catch {
            // Called from Server Component - ignore
          }
        },
      },
    }
  );
}

Step 5: Login Form Component

// src/components/auth/LoginForm.tsx
"use client";

import { useState } from "react";
import { createClient, isSupabaseConfigured } from "@/lib/supabase/client";

// Custom icons for each provider
function GitHubIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor">
      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
    </svg>
  );
}

function GoogleIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className}>
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
    </svg>
  );
}

function XIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  );
}

type OAuthProvider = "github" | "google" | "twitter";

export function LoginForm() {
  const [loadingProvider, setLoadingProvider] = useState<OAuthProvider | null>(null);
  const [error, setError] = useState<string | null>(null);

  const supabaseConfigured = isSupabaseConfigured();

  const handleOAuthLogin = async (provider: OAuthProvider) => {
    if (!supabaseConfigured) {
      setError("Authentication is not configured");
      return;
    }

    setLoadingProvider(provider);
    setError(null);

    try {
      const supabase = createClient();
      const redirectTo = `${window.location.origin}/auth/callback`;

      const { error } = await supabase.auth.signInWithOAuth({
        provider,
        options: {
          redirectTo,
        },
      });

      if (error) throw error;
    } catch (err) {
      console.error("Login error:", err);
      setError(err instanceof Error ? err.message : "Login failed");
      setLoadingProvider(null);
    }
  };

  return (
    <div className="space-y-4">
      {error && (
        <div className="text-red-500 text-sm">{error}</div>
      )}

      <button
        onClick={() => handleOAuthLogin("github")}
        disabled={loadingProvider !== null}
        className="w-full flex items-center justify-center gap-2 p-3 border rounded"
      >
        <GitHubIcon className="w-5 h-5" />
        Continue with GitHub
      </button>

      <button
        onClick={() => handleOAuthLogin("google")}
        disabled={loadingProvider !== null}
        className="w-full flex items-center justify-center gap-2 p-3 border rounded"
      >
        <GoogleIcon className="w-5 h-5" />
        Continue with Google
      </button>

      <button
        onClick={() => handleOAuthLogin("twitter")}
        disabled={loadingProvider !== null}
        className="w-full flex items-center justify-center gap-2 p-3 border rounded"
      >
        <XIcon className="w-5 h-5" />
        Continue with X
      </button>
    </div>
  );
}

Step 6: OAuth Callback Handler

This is the critical server-side route that exchanges the OAuth code for a session.

// src/app/auth/callback/route.ts
import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url);
  const code = searchParams.get("code");
  const next = searchParams.get("next") ?? "/";

  if (code) {
    const cookieStore = await cookies();

    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          getAll() {
            return cookieStore.getAll();
          },
          setAll(cookiesToSet) {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            );
          },
        },
      }
    );

    const { error } = await supabase.auth.exchangeCodeForSession(code);

    if (!error) {
      // Handle reverse proxy (AWS Amplify, etc.)
      const forwardedHost = request.headers.get("x-forwarded-host");
      const forwardedProto = request.headers.get("x-forwarded-proto") ?? "https";

      if (forwardedHost) {
        return NextResponse.redirect(`${forwardedProto}://${forwardedHost}${next}`);
      }

      return NextResponse.redirect(`${origin}${next}`);
    }
  }

  // OAuth error - redirect to error page
  return NextResponse.redirect(`${origin}/auth/auth-code-error`);
}

Key points:

exchangeCodeForSession() converts the OAuth code to a user session
Cookies are set automatically by Supabase
Reverse proxy headers support AWS Amplify and similar hosts

Step 7: Session Middleware

Middleware keeps the session fresh by checking and refreshing tokens on every request.

// src/lib/supabase/middleware.ts
import { createServerClient } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

  // Skip if Supabase is not configured
  if (!url || !key) {
    return supabaseResponse;
  }

  const supabase = createServerClient(url, key, {
    cookies: {
      getAll() {
        return request.cookies.getAll();
      },
      setAll(cookiesToSet) {
        cookiesToSet.forEach(({ name, value }) =>
          request.cookies.set(name, value)
        );
        supabaseResponse = NextResponse.next({ request });
        cookiesToSet.forEach(({ name, value, options }) =>
          supabaseResponse.cookies.set(name, value, options)
        );
      },
    },
  });

  // This refreshes the session if needed
  await supabase.auth.getUser();

  return supabaseResponse;
}

// src/middleware.ts
import { type NextRequest } from "next/server";
import { updateSession } from "@/lib/supabase/middleware";

export async function middleware(request: NextRequest) {
  return await updateSession(request);
}

export const config = {
  matcher: [
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

Step 8: Logout Implementation

// In your header or user menu component
const handleSignOut = async () => {
  const supabase = createClient();

  // Clear local storage if needed
  sessionStorage.removeItem("gameResult");

  // Sign out from all sessions
  await supabase.auth.signOut({ scope: "global" });

  // Redirect to home
  window.location.href = "/";
};

The X (Twitter) OAuth 2.0 Gotcha

Here's something I learned the hard way: Supabase's X OAuth 2.0 implementation has issues.

When I first implemented X login with provider: "x" (OAuth 2.0), users got this error:

{
  "errors": [{
    "error": "invalid_request",
    "error_description": "The action you have taken cannot be performed"
  }]
}

After investigating, I found that Supabase is calling the wrong X API endpoint internally.

The Workaround

Use the deprecated OAuth 1.0a provider instead:

// Instead of:
// provider: "x"  // OAuth 2.0 - broken

// Use:
provider: "twitter"  // OAuth 1.0a - works

In Supabase Dashboard:

Disable "X / Twitter (OAuth 2.0)"
Enable "Twitter (Deprecated)"
Use API Key and API Secret (not Client ID/Secret)

This isn't ideal since OAuth 1.0a is deprecated, but it works reliably until Supabase fixes the OAuth 2.0 implementation.

Bonus: Guest Play Support

Not every user wants to create an account. Here's how to support guest play:

// Check if user is logged in
const [isGuest, setIsGuest] = useState<boolean | null>(null);

useEffect(() => {
  const supabase = createClient();

  supabase.auth.getSession().then(({ data: { session } }) => {
    setIsGuest(!session?.user);
  });

  const { data: { subscription } } = supabase.auth.onAuthStateChange(
    (_event, session) => {
      setIsGuest(!session?.user);
    }
  );

  return () => subscription.unsubscribe();
}, []);

// Show notice for guests
{isGuest && (
  <div className="text-amber-500">
    Playing as guest. <a href="/login">Log in</a> to save your progress.
  </div>
)}

Auth Flow Diagram

User clicks "Login with GitHub"
         ↓
signInWithOAuth({ provider: "github" })
         ↓
Redirect to GitHub OAuth page
         ↓
User authorizes the app
         ↓
GitHub redirects to Supabase callback
(https://your-project.supabase.co/auth/v1/callback)
         ↓
Supabase redirects to your app
(/auth/callback?code=xxx)
         ↓
exchangeCodeForSession(code)
         ↓
Session stored in cookies
         ↓
User is logged in!

Lessons Learned

Always handle unconfigured state - Your app should work (gracefully degraded) even without Supabase credentials
Use singleton pattern for browser client - Avoid creating multiple instances
Session refresh is crucial - The middleware keeps sessions fresh automatically
Test OAuth on production URLs - Some providers (like X) have issues with localhost
Have a fallback for broken OAuth - X OAuth 2.0 doesn't work, so I use 1.0a

Conclusion

Setting up multi-provider OAuth with Supabase and Next.js 15 is straightforward once you understand the flow. The main challenges are:

Proper cookie handling between client and server
Session management in middleware
Provider-specific quirks (looking at you, X)

If you want to see this implementation in action, try DevType - a typing practice game for programmers.

Have questions? Found a bug in my code? Let me know in the comments!

Resources

A Complete Guide to i18n in Next.js 15 App Router with next-intl (Supporting 8 Languages)

mukitaro — Sun, 28 Dec 2025 03:00:09 +0000

TL;DR

This article walks through implementing multi-language support in Next.js 15 using next-intl, with real production code from DevType - a typing practice game for programmers.

Live Demo in 8 Languages:

Why next-intl?

When building a multi-language Next.js application, you have several options. I chose next-intl for these reasons:

Feature	next-intl	react-i18next	next-translate
App Router Support	First-class	Adapter needed	Limited
Server Components	Native	Manual setup	Not supported
Type Safety	Excellent	Good	Moderate
Bundle Size	Small	Larger	Small

next-intl is built specifically for Next.js and provides seamless integration with the App Router and Server Components.

Project Structure

Here's the i18n file structure in DevType:

src/
├── app/
│   ├── [locale]/           # Dynamic locale segment
│   │   ├── layout.tsx      # Locale-specific layout
│   │   ├── page.tsx        # Home page
│   │   ├── play/
│   │   ├── ranking/
│   │   └── ...
│   ├── layout.tsx          # Root layout
│   └── sitemap.ts          # SEO sitemap
├── i18n/
│   ├── config.ts           # Locale configuration
│   ├── routing.ts          # Navigation helpers
│   └── request.ts          # Server-side message loading
├── middleware.ts           # Locale detection & routing
└── messages/
    ├── en.json
    ├── ja.json
    ├── zh.json
    └── ...

Step 1: Install next-intl

npm install next-intl

Step 2: Configure Locales

Create a central configuration file for your supported languages:

src/i18n/config.ts

export const locales = ["en", "ja", "zh", "es", "pt", "de", "fr", "it"] as const;
export type Locale = (typeof locales)[number];

export const defaultLocale: Locale = "en";

export const localeNames: Record<Locale, string> = {
  en: "English",
  ja: "日本語",
  zh: "中文",
  es: "Español",
  pt: "Português",
  de: "Deutsch",
  fr: "Français",
  it: "Italiano",
};

Key points:

Use as const for type inference
Export a Locale type for type safety
Store display names for UI language selectors

Step 3: Set Up Routing

Create navigation helpers that work with your locale structure:

src/i18n/routing.ts

import { defineRouting } from "next-intl/routing";
import { createNavigation } from "next-intl/navigation";
import { locales, defaultLocale } from "./config";

export const routing = defineRouting({
  locales,
  defaultLocale,
  localePrefix: "always", // URLs always include locale: /en, /ja, etc.
});

export const { Link, redirect, usePathname, useRouter, getPathname } =
  createNavigation(routing);

The localePrefix: "always" option ensures clean, consistent URLs:

https://dev-type.honualohak.com/en (English)
https://dev-type.honualohak.com/ja (Japanese)
https://dev-type.honualohak.com/zh (Chinese)

Important: Use the exported Link component instead of Next.js's default Link to ensure correct locale handling.

Step 4: Configure Message Loading

Set up server-side message loading:

src/i18n/request.ts

import { getRequestConfig } from "next-intl/server";
import { locales, type Locale } from "./config";

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale;

  // Fallback if locale is invalid
  if (!locale || !locales.includes(locale as Locale)) {
    locale = "en";
  }

  return {
    locale,
    messages: (await import(`../../messages/${locale}.json`)).default,
  };
});

Step 5: Configure Next.js

Wrap your Next.js config with the next-intl plugin:

next.config.ts

import type { NextConfig } from "next";
import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin("./src/i18n/request.ts");

const nextConfig: NextConfig = {
  // Your other config options...
};

export default withNextIntl(nextConfig);

Step 6: Set Up Middleware

The middleware handles locale detection, redirects, and can be combined with other middleware (like authentication).

Combining middleware (like Supabase Auth) with next-intl can be tricky because both try to manage the response. The code below demonstrates how to merge cookies correctly so authentication and localization work together:

src/middleware.ts

import createMiddleware from "next-intl/middleware";
import type { NextRequest } from "next/server";
import { updateSession } from "@/lib/supabase/middleware";
import { routing } from "@/i18n/routing";

const intlMiddleware = createMiddleware(routing);

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // Skip i18n middleware for auth callbacks
  if (pathname.startsWith("/auth/")) {
    return await updateSession(request);
  }

  // Handle Supabase session
  const supabaseResponse = await updateSession(request);

  // Handle i18n routing
  const intlResponse = intlMiddleware(request);

  // Merge cookies from Supabase response
  supabaseResponse.cookies.getAll().forEach((cookie) => {
    intlResponse.cookies.set(cookie.name, cookie.value);
  });

  return intlResponse;
}

export const config = {
  matcher: [
    "/((?!api|_next/static|_next/image|favicon.ico|.*\\..*).*)",
  ],
};

The middleware automatically:

Detects the user's preferred language from browser settings
Redirects to the appropriate locale URL
Handles locale switching

Step 7: Create the Locale Layout

The [locale] dynamic segment layout provides translations to all child components:

src/app/[locale]/layout.tsx

import { NextIntlClientProvider } from "next-intl";
import { getMessages, setRequestLocale } from "next-intl/server";
import { notFound } from "next/navigation";
import { locales, type Locale } from "@/i18n/config";

type Props = {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
};

// Generate static params for all locales (for static generation)
export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({ children, params }: Props) {
  const { locale } = await params;

  // Validate locale
  if (!locales.includes(locale as Locale)) {
    notFound();
  }

  // Enable static rendering
  setRequestLocale(locale);

  // Load messages for this locale
  const messages = await getMessages();

  return (
    <NextIntlClientProvider messages={messages}>
      <div className="flex min-h-screen flex-col">
        <Header />
        <main className="flex-1">{children}</main>
        <Footer />
      </div>
    </NextIntlClientProvider>
  );
}

Key points:

generateStaticParams() enables static generation for all locales
setRequestLocale() is required for static rendering
NextIntlClientProvider makes translations available to client components

Step 8: Create Translation Files

Create JSON files for each language in the messages/ directory:

messages/en.json

{
  "common": {
    "appName": "DevType",
    "tagline": "Code like a Pro.",
    "loading": "Loading...",
    "error": "An error occurred"
  },
  "nav": {
    "home": "Home",
    "ranking": "Ranking",
    "about": "About",
    "login": "Login",
    "logout": "Logout"
  },
  "home": {
    "hero": {
      "title": "Type Code,\nSharpen Skills",
      "subtitle": "Practice real-world code in a professional code editor.",
      "cta": "Start Now"
    }
  },
  "play": {
    "wpm": "WPM",
    "accuracy": "Accuracy",
    "mistakes": "Mistakes"
  }
}

messages/ja.json

{
  "common": {
    "appName": "DevType",
    "tagline": "コードを極めろ。",
    "loading": "読み込み中...",
    "error": "エラーが発生しました"
  },
  "nav": {
    "home": "ホーム",
    "ranking": "ランキング",
    "about": "DevTypeについて",
    "login": "ログイン",
    "logout": "ログアウト"
  },
  "home": {
    "hero": {
      "title": "コードを打ち込め、\nスキルを磨け",
      "subtitle": "本物のコードエディタで実践的なコードを練習しよう。",
      "cta": "今すぐ始める"
    }
  },
  "play": {
    "wpm": "WPM",
    "accuracy": "正確率",
    "mistakes": "ミス"
  }
}

Step 9: Use Translations in Components

In Server Components

import { getTranslations } from "next-intl/server";

export default async function HomePage() {
  const t = await getTranslations("home");

  return (
    <section>
      <h1>{t("hero.title")}</h1>
      <p>{t("hero.subtitle")}</p>
      <button>{t("hero.cta")}</button>
    </section>
  );
}

In Client Components

"use client";

import { useTranslations } from "next-intl";

export function GameStats() {
  const t = useTranslations("play");

  return (
    <div>
      <span>{t("wpm")}: 85</span>
      <span>{t("accuracy")}: 98%</span>
      <span>{t("mistakes")}: 3</span>
    </div>
  );
}

With Variables

// In JSON:
// "shareText": "I scored {score} points! #DevType"

const t = useTranslations("result");
const message = t("shareText", { score: 8500 });
// Output: "I scored 8500 points! #DevType"

Step 10: SEO - Sitemap with hreflang

For SEO, generate a sitemap with hreflang alternates for all languages:

src/app/sitemap.ts

import type { MetadataRoute } from "next";
import { locales } from "@/i18n/config";

const APP_URL = "https://dev-type.honualohak.com";

const staticPages = ["", "/ranking", "/about", "/faq"];

export default function sitemap(): MetadataRoute.Sitemap {
  const sitemap: MetadataRoute.Sitemap = [];

  for (const locale of locales) {
    for (const page of staticPages) {
      const url = `${APP_URL}/${locale}${page}`;

      // Generate alternates for all locales
      const languages: Record<string, string> = {};
      for (const altLocale of locales) {
        languages[altLocale] = `${APP_URL}/${altLocale}${page}`;
      }
      languages["x-default"] = `${APP_URL}/en${page}`;

      sitemap.push({
        url,
        lastModified: new Date(),
        changeFrequency: page === "" ? "daily" : "weekly",
        priority: page === "" ? 1 : 0.8,
        alternates: {
          languages,
        },
      });
    }
  }

  return sitemap;
}

This generates sitemap entries like:

<url>
  <loc>https://dev-type.honualohak.com/en</loc>
  <xhtml:link rel="alternate" hreflang="en" href="https://dev-type.honualohak.com/en"/>
  <xhtml:link rel="alternate" hreflang="ja" href="https://dev-type.honualohak.com/ja"/>
  <xhtml:link rel="alternate" hreflang="zh" href="https://dev-type.honualohak.com/zh"/>
  <xhtml:link rel="alternate" hreflang="x-default" href="https://dev-type.honualohak.com/en"/>
  <!-- ... other locales -->
</url>

Common Patterns

Type-Safe Translation Keys

Create a type definition file (e.g., src/types/i18n.d.ts or src/global.d.ts) to catch typos at compile time:

// src/types/i18n.d.ts
// Infer translation keys from your JSON structure
type Messages = typeof import("../../messages/en.json");

declare global {
  interface IntlMessages extends Messages {}
}

Locale-Aware Links

Always use the exported Link from routing:

import { Link } from "@/i18n/routing";

// Automatically adds current locale to href
<Link href="/ranking">Rankings</Link>
// Renders: /en/ranking or /ja/ranking based on current locale

Dynamic Locale Switching

"use client";

import { useRouter, usePathname } from "@/i18n/routing";
import { locales, localeNames } from "@/i18n/config";

export function LocaleSwitcher() {
  const router = useRouter();
  const pathname = usePathname();

  const switchLocale = (newLocale: string) => {
    router.replace(pathname, { locale: newLocale });
  };

  return (
    <select onChange={(e) => switchLocale(e.target.value)}>
      {locales.map((locale) => (
        <option key={locale} value={locale}>
          {localeNames[locale]}
        </option>
      ))}
    </select>
  );
}

Performance Tips

Static Generation: Use generateStaticParams() to pre-render all locale variants at build time.
Message Splitting: For large apps, consider splitting messages by page/feature:

   messages: {
     ...(await import(`../../messages/${locale}/common.json`)).default,
     ...(await import(`../../messages/${locale}/home.json`)).default,
   }

Lazy Loading: Load translations for specific features on demand:

   const messages = await import(`@/messages/${locale}/dashboard.json`);

Conclusion

Implementing multi-language support in Next.js 15 with next-intl is straightforward when you follow this structure. The key components are:

Centralized config (src/i18n/config.ts)
Routing helpers (src/i18n/routing.ts)
Middleware for automatic locale detection
[locale] layout to provide translations
JSON message files for each language
SEO sitemap with hreflang alternates

Try it yourself at DevType - available in 8 languages!

Resources

What languages does your app support? Share your i18n setup in the comments!

In the Age of AI-Generated Code, I Built a Typing Game to Record Humanity's Peak Typing Speed

mukitaro — Tue, 23 Dec 2025 11:48:02 +0000

TL;DR

I built DevType, a typing game for programmers. Type real code in Python, JavaScript, TypeScript, Go, and Rust, measure your WPM, and compete on global rankings.

👉 Play now: https://dev-type.honualohak.com

Why I Built This

Humanity's Coding Speed May Have Already Peaked

GitHub Copilot, ChatGPT, and Claude are fundamentally changing how we write code.

It hit me one day.

This very moment might be when humans are typing code the fastest in history.

A few years from now, when AI writes most of the code, developers will transform from "people who type" to "people who direct AI." Review, instruct, fine-tune. Time spent hammering keyboards will inevitably decrease.

That's why I want to:

Record - Capture humanity's peak typing speed
Celebrate - Honor the muscle memory we've built over years
Preserve - Save this moment before it's lost

This is why I built DevType.

Why Regular Typing Tests Don't Cut It

Standard typing tests have you type English sentences. But programmers know better.

Typing const handler = async (req, res) => { is completely different from typing "The quick brown fox."

Programming requires:

Special characters: [], {}, =>, ::, &&
Precise indentation
Language-specific syntax patterns

DevType tests your ability to type real code.

What is DevType?

A code typing practice game designed for programmers.

🎮 Core Features

5 Programming Languages: Python, JavaScript, TypeScript, Go, Rust
5 Difficulty Levels: From variable definitions to complex function implementations
Real Code: Patterns you'd actually write
Professional Code Editor: With syntax highlighting

📊 Visualize Your Growth

WPM & Accuracy: Measure your typing speed and precision
Score System: Calculated from speed, accuracy, difficulty, and combo
Activity Heatmap: GitHub-style activity graph
Progress Charts: Track score/WPM/accuracy/max combo over time

🌍 Compete Globally

Global Rankings: Compete with programmers worldwide
Country Flags: Represent your country on the leaderboard
Public Profiles: Share your achievements

🌐 8 Languages Supported

Available in English, Japanese, Chinese, Spanish, Portuguese, German, French, and Italian.

Tech Stack

The technology powering DevType.

Frontend

Technology	Purpose
Next.js 15	React framework with App Router
React 19	UI library
TypeScript	Type safety
Tailwind CSS v4	Styling
Shadcn/ui	UI components
Recharts	Chart rendering
Prism.js	Syntax highlighting

Backend & Infrastructure

Technology	Purpose
Supabase	Database, Auth, Storage
AWS Amplify	Hosting
next-intl	Internationalization (8 languages)

Development Tools

Technology	Purpose
Claude API	Auto-generating problem content

Architecture

┌─────────────────────────────────────────────────────┐
│                   AWS Amplify                        │
├─────────────────────────────────────────────────────┤
│  Next.js 15 (App Router)                            │
│  ├── Server Components (RSC)                        │
│  ├── Client Components ("use client")               │
│  └── API Routes                                     │
├─────────────────────────────────────────────────────┤
│  Supabase                                           │
│  ├── PostgreSQL (problems, game_results, profiles) │
│  ├── Auth (GitHub, Google OAuth)                   │
│  └── Storage (avatars)                             │
└─────────────────────────────────────────────────────┘

Challenges & Solutions

1. Building a Natural Typing Engine

Challenge: Creating a typing experience that handles code-specific patterns like auto-indentation, special characters, and multi-line input.

Solution: Built a custom typing engine:

Auto-fills leading indentation (users don't need to type it)
Tracks cursor position character by character
Calculates WPM using standard 5 characters = 1 word
Handles edge cases like tabs vs spaces

// Simplified typing engine code
const handleKeyPress = (key: string) => {
  const expected = code[currentIndex];

  if (key === expected) {
    // Correct
    combo++;
    correctCount++;
  } else {
    // Mistake
    combo = 0;
    mistakeCount++;
  }

  currentIndex++;
  updateStats();
};

2. Generating Quality Code Problems

Challenge: Needed hundreds of realistic code snippets across 5 languages × 5 difficulty levels.

Solution: Used Claude API for auto-generation:

Set target character counts per difficulty
Syntactically correct code
Educational and practical content
Included explanations for each problem

// Problem generation script with Claude API
const prompt = `Generate a ${language} code snippet at difficulty ${level}.
Requirements:
- Approximately ${targetLength} characters
- Compilable/executable
- Brief explanation included
- Use patterns developers actually write`;

Each problem includes an explanation that helps users understand the code:

3. Real-time Score Calculation

Challenge: Designing a scoring system that fairly evaluates both speed and accuracy.

Solution: Multi-factor score calculation:

Speed (WPM): Faster = higher score
Accuracy: Mistakes = penalties
Difficulty: Higher levels = more points
Combo: Consecutive correct answers = bonus

4. Internationalization for 8 Languages

Challenge: Handling language-specific differences like pluralization and date formats.

Solution: Adopted next-intl:

Locale-based routing (/en/, /ja/, /zh/, etc.)
JSON message files per language
Automatic locale detection from browser

5. Progress Visualization Charts

Challenge: Wanted users to feel their improvement tangibly.

Solution: Implemented multiple visualizations:

Activity Heatmap: GitHub-style play history
Progress Charts: Score/WPM/accuracy/combo trends
Improvement Indicators: Compare start vs end of period with ↑↓

Used Recharts with colors matching the Dracula theme for visual consistency.

Score System

A rhythm-game-inspired ranking system:

Rank	Score Range	Description
S	9000+	Perfect performance
A	7000-8999	Excellent
B	5000-6999	Good
C	3000-4999	Average
D	0-2999	Keep practicing!

Future Plans

Planned Features

Additional languages (Java, C++, PHP, Ruby)
Badge & achievement system
Multiplayer battle mode
Custom problem creation

Give It a Try!

🎮 Play DevType: https://dev-type.honualohak.com

Perfect for:

Senior engineers who want to benchmark their typing speed
Beginners looking to learn syntax through practice
Anyone who simply enjoys typing games

Go for that high score!

Feedback Welcome

This project is a hobby development, and I'm improving it based on user feedback.

Feedback button in the app
Comments on this article

All forms of feedback are welcome!

Final Thoughts

We live in an exciting era where AI is transforming coding. But before we fully transition to AI-assisted development, let's celebrate and record what humans can do.

Your typing speed today might be humanity's fastest moment at writing code.

Let's preserve that record. 🚀

What's your high score? Let me know in the comments!

Hello DEV! My first step here 🚀

mukitaro — Mon, 22 Dec 2025 14:20:46 +0000

🖐️ Nice to meet you!

Hello, DEV community! I've just created my account and wanted to start with a quick introduction.

About Me

I am a Web Developer based in Japan.
I'm currently interested in:

Python
Frontend Development
AWS
AI and Machine Learning

Why I joined DEV.to

I decided to join this community because:

I want to keep track of my learning journey.
I'm looking for great technical insights from developers around the world.
I hope to eventually share my own knowledge and contribute to the community.

My Goals

My goal for this year is to build 3 portfolio projects.

Thank you for reading! I'm excited to connect with you all. Please feel free to leave a comment or say hi! 👋