LearnQode

Browser-based Python learning platform on Solana Devnet. Solve challenges, pass tests, mint Proof of Learning NFTs to your wallet. Codecademy meets Web3.

---

What it does

Users connect a Solana wallet, pick a lesson, and write Python in a Monaco editor. The code runs entirely in the browser via Pyodide (no backend). Pass all test cases and a "Proof of Learning" NFT is minted to the connected wallet on Solana Devnet.

---

Tech Stack

Layer	Choice
Framework	Next.js 16 (App Router)
Language	TypeScript (strict)
Styling	Tailwind CSS + Shadcn UI
Code Editor	Monaco Editor
Python Runtime	Pyodide (WASM — runs entirely in browser)
Wallet	Solana Wallet Adapter (Phantom, Solflare)
Solana SDK	@solana/web3.js
NFT Minting	Metaplex UMI + mpl-token-metadata

---

Getting Started

Prerequisites

• Node.js 20+
• A Solana wallet browser extension (Phantom or Solflare)

Installation

git clone <your-repo-url>
cd learnqode
npm install

Environment

For Vercel deployment, set environment variables in the Vercel dashboard:

NEXT_PUBLIC_SOLANA_RPC_URL=https://api.devnet.solana.com

For self-hosting, copy .env.local.example to .env.local and fill in the values.

Development

npx next dev --webpack

Open http://localhost:3000.

Production Build

npx next build

---

Project Structure

app/               Next.js routes
components/        UI components
  editor/          Monaco editor, output console, toolbar
  lesson/          Lesson card, validation feedback
  reward/          Mint button, NFT preview card
  wallet/          Connect button, wallet status
content/lessons/   Static lesson definition files
hooks/             React hooks
lib/
  lessons/         Types and registry
  solana/          RPC connection, Umi factory, NFT minting
  validation/      Harness builder and test runner
providers/         React context providers
public/nft-assets/ NFT artwork (512x512 PNG per lesson)

---

Adding Lessons

1. Create content/lessons/NN-your-lesson.ts following the existing lesson format
2. Add a 512x512 PNG to public/nft-assets/
3. Import and add the lesson to lib/lessons/registry.ts

Each lesson needs an id, title, concept, difficulty, narrative, starterCode, tests, and reward. See lib/lessons/types.ts for the full type contract and any existing lesson file for a complete example.

---

Network

This project runs exclusively on Solana Devnet. No real SOL is used. NFTs minted here have no monetary value.