🧠 Quantum Playground
An interactive quantum computing visualization playground built with Next.js + TypeScript, designed to demonstrate single-qubit quantum mechanics through simulation, visualization, and probabilistic measurement.
This project focuses on conceptual correctness, mathematical clarity, and frontend-driven simulation, rather than backend quantum SDKs.
✨ Features (Phase 3 – Completed) 🔹 Single Qubit State Simulation
Represents a qubit in the form
∣ψ⟩=α∣0⟩+β∣1⟩
Maintains normalization:
∣𝛼∣^2 + ∣β∣^2 = 1
🔹 Quantum Gates
Implemented gates:
Hadamard (H) – creates superposition Pauli-X (X) – bit flip Pauli-Z (Z) – phase flip
Gate sequences are applied sequentially and reflected immediately in:
State amplitudes Measurement probabilities Bloch sphere visualization
🔹 Bloch Sphere Visualization
2D Bloch sphere projection Visualizes qubit state as a vector on the sphere Updates dynamically after each gate operation Demonstrates geometric interpretation of qubit states
🔹 Measurement & Collapse
Single-shot measurement collapses the state Multi-shot measurement simulates repeated experiments Probabilities follow the Born rule
🔹 Multi-Shot Measurement Histogram
User-defined number of shots Displays frequency counts for:
∣0⟩ ∣1⟩
Clearly demonstrates probabilistic outcomes from superposition
🏗️ Architecture Overview
src/ ├── app/ │ ├── page.tsx # Main orchestration & UI │ ├── layout.tsx │ └── globals.css │ ├── components/ │ ├── QubitCard.tsx │ ├── GatePanel.tsx │ ├── BlochSphere.tsx │ ├── MeasurementHistogram.tsx │ ├── lib/ │ ├── quantumMath.ts # State evolution & gate math │ ├── bloch.ts # Bloch sphere calculations │ └── measurement.ts # Sampling & measurement logic
The project is intentionally modular:
Math logic is isolated from UI Visualization components are stateless State orchestration happens at the page level
🧪 Correctness & Validation
The simulator was validated through:
Deterministic states (|0⟩, |1⟩) Superposition states (H|0⟩) Statistical convergence in multi-shot measurements Visual alignment between Bloch vector and amplitudes
Example: H|0⟩ → ~50% |0⟩, ~50% |1⟩ over many shots
🚧 Project Scope & Limitations
Implemented
Single-qubit quantum mechanics Visualization-first learning tool Frontend-only simulation
Not Implemented (Planned)
Two-qubit systems Entanglement (Bell states) CNOT gate Density matrices Noise / decoherence models
Phase 4 (multi-qubit entanglement) was explored conceptually but intentionally not merged to maintain API clarity and type safety.
🎯 Intended Audience
Students learning quantum computing Developers exploring quantum concepts visually Educators demonstrating qubit behavior Researchers prototyping UI ideas for quantum tools
🚀 Getting Started npm install npm run dev
Open: http://localhost:3000
📌 Tech Stack
Next.js (App Router) TypeScript React Custom math (no external quantum SDKs)
🧠 Educational Philosophy
This project prioritizes: Conceptual transparency Mathematical interpretability Visual intuition Software engineering discipline It is not a replacement for full quantum simulators (e.g. Qiskit), but a learning-focused frontend system.
📜 License MIT