CryptoLearn

CryptoLearn is an interactive, gamified learning platform designed to teach cryptography, ranging from classical ciphers to modern post-quantum algorithms. The platform organizes complex cryptographic concepts into an interactive curriculum graph and rewards users for engaging in active learning.

---

🚀 Features

🧠 Interactive Knowledge Graph

• D3.js Concept Map: A dynamic, force-directed graph provides a visual representation of the entire cryptography curriculum.
• Prerequisite Tracking: Topics are linked by dependencies. Students can visualize exactly what they need to learn before unlocking advanced algorithms.
• Progress Tracking: Nodes update their visual states (locked, available, completed) based on the user's progression and read history.

🎮 Gamified Learning

• XP System: Users earn Experience Points (XP) through active reading. Read time is tracked precisely on the frontend and validated by the backend.
• Progression: Earn XP to unlock achievements, build streaks, and demonstrate mastery over cryptographic domains.

🧩 Step-by-Step Algorithm Visualization

• AlgorithmStepViewer: Complex mathematical cryptography algorithms are broken down into interactive, step-by-step visual components to help students intuitively grasp the logic behind the math.
• Tabbed Learning Modules: Lessons are structured cleanly using Shadcn UI tabs, dividing content into logical sections: Math, Algorithm visually, Examples, and Security considerations.

🛠️ Admin Curriculum Editor

• Live JSON Editor: Administrators can dynamically create and edit structured learning modules via a dedicated admin interface (/admin/topics).
• Real-time Preview: Edit the JSON structure of a lesson and immediately view how the resulting math blocks and algorithm visuals will render.

---

🏗️ Technology Stack

Frontend (Client)

• Framework: [Next.js 14] (React)
• Styling: [Tailwind CSS] with [Shadcn UI] components
• Visualization: [D3.js] for the interactive curriculum map
• Icons: Lucide React

Backend (API & Services)

• Framework: [FastAPI] (Python)
• Database Connection: supabase-py HTTP SDK (Bypasses traditional TCP firewall blocks)
• Authentication: JWT validation natively integrated with Supabase Auth
• Graph Algorithms: Custom in-memory Directed Acyclic Graph (DAG) structures handling Topological Sorts and BFS pathfinding for prerequisites.

Infrastructure & Database

• Database & Auth: [Supabase] (PostgreSQL + GoTrue Auth)

---

⚙️ Local Development Setup

1. Prerequisites

• Node.js (v18+)
• Python (v3.11+)
• A Supabase Project (Cloud or Self-Hosted)

2. Frontend Setup

cd frontend
npm install

# Create a .env.local file with:
# NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
# NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# NEXT_PUBLIC_API_URL= # Keep empty to allow Next.js proxy rewrite

npm run dev

3. Backend Setup

cd backend
python -m venv venv
# Activate virtual environment
# Windows: .\venv\Scripts\activate
# Mac/Linux: source venv/bin/activate

pip install -r requirements.txt

# Create a .env file with:
# SUPABASE_URL=your_supabase_url
# SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
# JWT_SECRET=your_jwt_secret

uvicorn main:app --reload --host 0.0.0.0 --port 8000

(Optionally apply the local Supabase .sql migrations in /supabase/migrations/ and /supabase/seed.sql to your remote instance if creating a fresh environment).

---

🌐 Architecture

The frontend proxies all /api/* traffic automatically through the Next.js standard router to the FastAPI localhost:8000 service, bypassing restrictive CORS policies gracefully. The Python backend operates entirely synchronously via port 443 with the Supabase HTTP SDK, avoiding restricted network limits on raw SQL TCP ports.