bb84_simulation/README.md at main · PRODHOSH/bb84_simulation

🎬 Demo & Screenshots

🌟 3D Quantum Simulation in Action

Real-time photon transmission with polarization states

Home Page - Quantum-themed landing	3D Simulation - Interactive photon visualization
Theory - Educational content	Analytics - Real-time charts & metrics

🔬 Photon Polarization States

Four quantum polarization states: Vertical, Horizontal, Diagonal, Anti-diagonal

🔭 Overview

Experience quantum cryptography like never before - Watch individual photons travel through space in real-time 3D as they establish an unbreakable secret key!

BB84 Quantum Key Distribution Simulator is a cutting-edge web application that brings quantum mechanics to life. Built with React, Three.js, and modern web technologies, it provides an immersive 3D visualization of the groundbreaking BB84 protocol invented by Charles Bennett and Gilles Brassard in 1984.

🎯 The Quantum Advantage

Traditional encryption can be broken with enough computing power. Quantum Key Distribution uses the laws of physics themselves to guarantee security - making it future-proof against even quantum computers!

┌─────────────────────────────────────────────────────────────┐
│  "Any observation of a quantum system disturbs its state"   │
│        - The principle that makes BB84 unbreakable          │
└─────────────────────────────────────────────────────────────┘

✨ Features

🎮 Interactive 3D Simulation Real-time photon animation in 3D space Adjustable photon count (8-32) Color-coded basis matching 🟢 Green = Bases match (key kept) 🔴 Red = Bases differ (discarded) Smooth camera controls and zoom Particle effects for quantum states	🔬 Quantum Physics Visualization 4 Polarization States fully rendered: Vertical (\|) - Horizontal (—) Diagonal (/) - Anti-diagonal () Rectilinear (+) & Diagonal (×) bases Photon state collapse on measurement Quantum uncertainty demonstrated
👁️ Eavesdropper Simulation Toggle Eve mode with one click Real-time error injection QBER calculation (Quantum Bit Error Rate) Security threshold visualization Automatic detection of tampering	📊 Advanced Analytics Interactive dashboard with charts Key generation statistics Efficiency metrics Error rate analysis Basis matching breakdown Export simulation results

🎨 Stunning UI/UX

💎 Modern Design Features

🌟 Animated starfield background with colorful particles
🎨 Quantum gradient color scheme (Blue → Purple)
✨ Glow effects on interactive elements
🎭 Smooth transitions and animations
📱 Fully responsive design for all devices
🌙 Dark theme optimized for long viewing
🎯 Intuitive controls with tooltips
💬 Built-in AI chatbot for instant help

🚀 Quick Start

Prerequisites

Choose one of the following:

Node.js 18+ with npm/yarn/bun
Docker (no Node.js required)

Option 1: Using Node.js

# Clone the repository
git clone https://github.com/PRODHOSH/bb84_simulation.git
cd bb84_simulation

# Install dependencies
npm install

# Start development server
npm run dev

Option 2: Using Docker 🐳

# Clone the repository
git clone https://github.com/PRODHOSH/bb84_simulation.git
cd bb84_simulation

# Build and run with Docker
docker build -t bb84-simulation .
docker run -p 3000:80 bb84-simulation

# Access at http://localhost:3000

Build for Production

# Node.js
npm run build
npm run preview

# Or with Docker
docker build -t bb84-simulation .
docker run -d -p 3000:80 bb84-simulation

🐳 Docker Compose (Optional)

For easier container management, create a docker-compose.yml:

version: '3.8'
services:
  bb84-simulator:
    build: .
    ports:
      - "3000:80"
    restart: unless-stopped

Then run:

docker-compose up -d

Multi-Stage Build Process

Stage	Base Image	Purpose
Builder	`node:20-alpine`	Install deps, build app
Production	`nginx:alpine`	Serve static files

Final Image Size: ~50MB (optimized Alpine images)

🎯 How to Use

🎬 Step-by-Step Guide

⚙️ Set Parameters
- Adjust photon count using the slider (8-32)
- Toggle Eve to simulate eavesdropping
▶️ Run Simulation
- Click "Run Simulation" button
- Watch photons travel in 3D space
👀 Observe
- Green photons = Matching bases (kept)
- Red photons = Different bases (discarded)
- See polarization states in real-time
📊 Analyze Results
- View secret key generated
- Check error rates
- Explore analytics dashboard

🔬 The Science

Protocol Steps

graph TB
    A[🎲 Alice: Generate Random Bits] --> B[📡 Alice: Choose Random Bases]
    B --> C[🌟 Alice: Encode Photons]
    C --> D{👁️ Eve Intercepts?}
    D -->|Yes| E[⚠️ Eve: Measures & Disturbs]
    D -->|No| F[✅ Clean Transmission]
    E --> G[📬 Bob: Receives Photons]
    F --> G
    G --> H[🔍 Bob: Random Measurement]
    H --> I[📢 Public Basis Comparison]
    I --> J[🔑 Keep Matching Bases]
    J --> K[📊 Error Rate Check]
    K --> L{QBER > 25%?}
    L -->|Yes| M[❌ Abort - Eve Detected]
    L -->|No| N[✅ Secure Key Ready!]
    
    style A fill:#286EFF
    style N fill:#00FF88
    style M fill:#FF4444
    style D fill:#AA50FF

Quantum States

Basis	State	Symbol	Bit Value
Rectilinear (+)	Vertical	\|	0
Rectilinear (+)	Horizontal	—	1
Diagonal (×)	Diagonal	/	0
Diagonal (×)	Anti-diagonal	\	1

Security Guarantee

No-Cloning Theorem + Heisenberg Uncertainty = Unbreakable Security ✨

💻 Tech Stack

🛠️ Built With Modern Tools

Category	Technologies
Frontend	React 18, TypeScript 5, Vite 5
3D Graphics	Three.js, React Three Fiber, React Three Drei
Styling	Tailwind CSS, Shadcn/ui, Radix UI
State	React Context, TanStack Query
Backend	Supabase (PostgreSQL, Auth)
Charts	Recharts
Routing	React Router v6
Deployment	Docker, Nginx, Vercel

📚 Educational Value

Perfect for:

🎓 Students learning quantum cryptography
👨‍🏫 Educators teaching quantum mechanics
🔬 Researchers demonstrating QKD concepts
💼 Professionals exploring post-quantum security
🌟 Enthusiasts fascinated by quantum physics

Learning Resources

🎯 Project Structure

bb84_simulation/
├── src/
│   ├── components/
│   │   ├── simulation/
│   │   │   ├── PhotonScene.tsx       # 3D visualization
│   │   │   ├── PhotonParticle.tsx    # Individual photon
│   │   │   ├── KeyResults.tsx        # Results display
│   │   │   └── AnalyticsDashboard.tsx
│   │   └── ui/                       # Reusable UI components
│   ├── contexts/
│   │   └── SimulationContext.tsx     # State management
│   ├── hooks/
│   │   └── useBB84Simulation.ts      # Core BB84 logic
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── Theory.tsx
│   │   ├── Simulation.tsx
│   │   └── NotFound.tsx
│   └── lib/
│       └── utils.ts
├── public/
│   ├── team.html                     # Team page
│   └── images/
└── ...config files

👥 Meet the Team

VIT University Engineering Physics Project

🔧 Joshwa - Hardware Engineer
💻 Prodhosh - Full-Stack Developer
📄 Raghav - Documentation Lead
📊 Sachin - Presentation Specialist
📊 Sudhir - Presentation Specialist
📄 Vijay Nishal - Documentation Lead

→ View Full Team

🌟 Highlights

🏆 What Makes This Special

✅ Industry-Grade Code - Production-ready React/TypeScript
✅ Real Physics - Accurate quantum mechanics simulation
✅ 3D Graphics - Smooth 60fps rendering with Three.js
✅ Interactive Learning - Hands-on quantum education
✅ Modern Stack - Latest web technologies
✅ Open Source - Free for educational use
✅ AI Chatbot - Instant help and explanations
✅ Responsive Design - Works on all devices

🔮 Roadmap

VR Support for immersive quantum experience
E91 Protocol (entanglement-based QKD)
Bloch Sphere visualization
Noise Models for realistic channels
Performance Metrics comparison
Multi-language support
Tutorial Mode with guided tours
Advanced Analytics with ML predictions

🤝 Contributing

Contributions make the open-source community amazing! Any contributions are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

🔗 Links

💬 Connect

Prodhosh VS

⭐ If this project helped you, please give it a star!

Made with ❤️ and Quantum Physics

FilesExpand file tree

README.md

Latest commit

History