Skip to content

README.md

Latest commit

 

History

History
89 lines (65 loc) · 3.83 KB

README.md

File metadata and controls

89 lines (65 loc) · 3.83 KB

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.