VSCode Achievements

Project Overview

VSCode Achievements is a Visual Studio Code extension that brings lightweight gamification into the editor to help developers stay motivated and build consistent habits. It tracks editor activity and milestones, awards achievements, and presents progress through an in-editor Achievements experience.

As the owner, I delivered the full product end-to-end: extension architecture, achievement modeling, persistence, UI/UX for discovery and progress tracking, and a migration to improve compatibility across all VS Code environments.

What It Does

• Awards achievements for editor actions and milestones, with 2,300+ achievements available.
• Provides an Achievements panel where users can browse achievements, view requirements, and track progress.
• Tracks time spent coding and aggregates activity into meaningful progress indicators.
• Supports filtering and search by category, progress, and name to keep large achievement sets usable.
• Displays profile/completion metrics so users can quickly see overall progress.
• Sends optional notifications when achievements are unlocked.
• Includes privacy-focused controls to enable/disable specific listeners, so users can tailor what gets tracked.

Implementation Highlights

• Achievement system design: Built a tiered achievement framework with a wide difficulty range, allowing both quick wins and longer-term challenges.
• Persistence and progress tracking: Used a local SQLite-based store to track unlock state and incremental progress over time.
• UI for scale: Designed the UI to work with thousands of achievements by emphasizing categorization, filtering, and clear requirement/progress presentation.

Technologies Used

Icon	Technology	How it was used
	TypeScript	Extension logic and VS Code API integration
	React	Webview UI for browsing achievements and viewing progress
	SQLite	Local persistence for achievements and user progress. Query engine for efficient data retrieval.

Challenges and Solutions

Gamification that feels native

The main design risk was creating a system that feels motivating without becoming noisy or distracting.

• Implemented a tiered achievement structure (introductory through expert-level) so users can choose their pace.
• Used a familiar, achievement-oriented layout to make the experience instantly understandable and easy to browse.

Minimizing performance impact

A persistent, always-on extension must be careful about work done on the hot path of editor interactions.

• Chose SQLite-backed persistence optimized for local reads/writes of progress data.
• Iterated through profiling and optimization cycles to reduce overhead and keep the extension responsive.
• Improved performance from the initial prototype to the current implementation by up to ~100x (based on internal iteration and profiling results).

Cross-platform compatibility

The initial persistence approach relied on native dependencies (better-sqlite3), which can be problematic across platforms and environments.

• Migrated from better-sqlite3 to sql.js to remove native dependency constraints and improve portability.
• Used the migration to also expand the achievement set and tighten UI/UX based on real usage.