CatCoder — AI-accelerated learning platform for software development

npm run dev npm run build npm run storybook

CatCoder is a curriculum-driven platform designed to modernize the acquisition of software engineering skills. It combines structured learning paths with hands-on practice, gamification, and integrated artificial intelligence to provide a comprehensive educational environment.

The platform is architected to be accessible, open-source, and performance-optimized, supporting real-time code execution and personalized learning insights.

The following sequence provides a technical overview of the platform's primary user interfaces and workflow cycles:

CatCoder utilizes a modern, performance-centric stack for optimal developer and user experience:

• UI Framework: React 19 with Vite.
• Styling: Tailwind CSS 4 using the Emerald design system.
• State Management: Zustand with persistence capabilities.
• Backend/Infrastructure: Supabase (PostgreSQL, Authentication, Row-Level Security).
• Code Execution Engine: Pyodide for WebAssembly-based Python execution and native JavaScript execution.
• Intelligence: OpenAI integration for personalized progress analysis and real-time mentorship.
• Deployment: Progressive Web App (PWA) with offline-first capabilities via Vite PWA.

• Integrated assistant providing context-aware hints and explanations.
• Insights panel offering personalized XP analysis and skill recommendations.
• Dynamic challenge suggestions based on historical performance metrics.

• Structured curriculum for Python, JavaScript, and C++.
• Browser-resident code execution for immediate feedback loops.
• Hands-on challenges with automated validation.

• Curated repository of algorithmic challenges across three difficulty tiers.
• Global leaderboards and league-based progression (Bronze to Diamond).
• Daily challenges designed to encourage consistent practice and retention.

• Full Progressive Web App (PWA) support for installability.
• Service-worker based caching for offline functionality.
• Performance monitoring via Web Vitals.

• Node.js version 18.0.0 or higher.
• npm version 9.0.0 or higher.
• OpenAI API credentials (for mentorship features).
• Supabase Project credentials.

git clone https://github.com/rofiperlungoding/CatCoder.git
cd CatCoder

npm install

Run the whole app with zero external services. Auth, profiles, progress, and the leaderboard are backed by your browser's localStorage.

cp .env.local.example .env.local
npm run dev

Then open the app, hit "Create account", and sign up with any email and password. A demo leaderboard is seeded automatically. This is the fastest way to explore and test the platform.

Initialize the environment configuration by creating a .env file based on the provided .env.example. Ensure the following keys are specified:

• Supabase URL and Anon Key.
• (Optional) AI proxy configuration for mentorship features.

Set VITE_BACKEND=supabase (or simply provide valid Supabase credentials and omit VITE_BACKEND) to use the real backend.

Launch the local development environment:

npm run dev

To view the UI component library:

npm run storybook

CatCoder ships with three interchangeable backends selected via VITE_BACKEND:

The local backend implements the subset of the Supabase client the app uses (auth, table queries, RPC, realtime). It is intended for development and testing only — it stores credentials in the browser and performs no server-side enforcement.

CatCoder deploys as a single Cloudflare Worker that serves the SPA and the /api/* endpoints. The Turso token stays in Worker secrets and never reaches the browser.

turso db create catcoder
turso db shell catcoder < worker/schema.sql
turso db show catcoder --url        # -> LIBSQL_DB_URL
turso db tokens create catcoder     # -> LIBSQL_DB_AUTH_TOKEN

• Put LIBSQL_DB_URL into wrangler.toml under [vars].
• Set secrets (never commit these):

npx wrangler secret put LIBSQL_DB_AUTH_TOKEN
npx wrangler secret put AUTH_SECRET

# build the SPA, then run the Worker (serves dist + /api) on :8787
npm run cf:dev

For live frontend reload, run npm run cf:dev in one terminal and VITE_BACKEND=turso npm run dev in another — Vite proxies /api to the Worker on :8787.

npm run cf:deploy        # build + wrangler deploy

Add your custom domain in the Cloudflare dashboard (Workers & Pages → your Worker → Settings → Domains & Routes).

Heads up: Turso is a database only. It has no built-in auth, realtime, or RLS. CatCoder's Worker provides email/password auth and the leaderboard updates by polling. OAuth and magic links require the Supabase backend.

Technical documentation and component specifications are maintained through Storybook interfaces for high visibility into the design system.

Data access is enforced through Supabase Row-Level Security (RLS) policies, ensuring that student data remains isolated and secure.

Copyright (c) 2026 CatCoder Project. Distributed under the MIT License.