0

Wizuality

A production-grade full-stack 3D learning platform built to make Data Structures & Algorithms visual, interactive, and intuitive through deterministic step-driven execution and WebGL rendering.

Live Demo

Co-Founder & CTO · 2025 – Present

Wizuality is a full-stack 3D learning platform built to make Data Structures & Algorithms visual, interactive, and easier to understand.

Instead of presenting algorithms as static code snippets, Wizuality transforms execution into interactive 3D scenes where learners can follow each operation step-by-step, inspect internal state, control playback, and connect source code with visual behavior.

The platform is designed for students, educators, and technical interview preparation, combining 3D visualization, structured learning modes, AI tutoring, coding practice, real-time collaboration, and university-oriented management infrastructure.

Overview

Traditional DSA learning creates a disconnect between reading an algorithm and understanding what actually happens during execution.

Wizuality approaches the problem visually:

Algorithms generate structured execution steps, which are replayed by a rendering system to derive the visual state at each frame. This architecture keeps algorithm logic independent from the rendering layer, allowing the same execution model to power playback, timeline scrubbing, speed control, state inspection, and multiple visualization types.

The platform currently includes 50+ LeetCode problems with full 3D visualizations, covering arrays, linked lists, strings, graphs, trees, and hash tables.

Core Architecture: Step-Driven Visualization Engine

The central architectural principle behind Wizuality is:

Algorithms never directly manipulate the DOM or 3D scene.

Instead, algorithms are implemented as pure functions that produce deterministic sequences of Step objects.

User Input
    ↓
Algorithm Engine
    ↓
Step[] Execution Sequence
    ↓
State Derivation
    ↓
3D Visual State
    ↓
Three.js Rendering
    ↓
Post-Processing
    ↓
Final WebGL Frame

The engine supports 150+ granular step types, including:

POINTER · COMPARE · SWAP · HIGHLIGHT · CREATE_NODE · LINK · MOVE_POINTER · PUSH · POP · ENQUEUE · DEQUEUE · INSERT · DELETE · TRAVERSE · VISIT · RELAX

This separation between algorithm execution and rendering makes the system extensible: new algorithms generate the same structured execution format without coupling to a specific visual implementation.

3D Rendering Pipeline

Wizuality uses a WebGL-based 3D rendering pipeline built with:

  • Three.js
  • React Three Fiber
  • @react-three/drei
  • react-spring/three
  • @react-three/postprocessing
  • d3-force-3d

The rendering pipeline converts execution events into animated 3D scenes:

Step Event
   ↓
useNodeAnimation
   ↓
Spring Animation
   ↓
React Three Fiber Component
   ↓
Three.js Scene Graph
   ↓
Wireframes + Materials + Dynamic Lighting
   ↓
Bloom + Tone Mapping
   ↓
WebGL Frame

Interactive structures include arrays, linked lists, stacks, queues, trees, graphs, and hash tables. The frontend also includes specialized rendering components such as animated stack boxes, queue spheres, graph nodes/edges, frequency boards, connection arrows, and WebGL context recovery.

Engineering Leadership — Co-Founder & CTO

As Co-Founder & CTO, I own the technical architecture and engineering direction of Wizuality.

Backend Architecture

  • Designed the backend architecture around Fastify + TypeScript
  • Structured the codebase into route, service, repository, middleware, and configuration layers
  • Built and maintained core business logic and API endpoints

Database Architecture

  • Designed the relational data model using PostgreSQL + Prisma
  • Structured domain entities across universities, users, students, teachers, classes, attendance, problems, progress, and sessions
  • Implemented migrations, seed systems, database transactions, and repository-level data access

Core Application Logic

  • Developed logic powering authentication, authorization, attendance, student progress, problem management, AI services, sessions, email, and platform operations
  • Maintained clean decoupling between algorithm execution and visual rendering

Infrastructure & Reliability

  • Implemented Redis-backed caching, session management, rate limiting, observability, automated testing, Dockerization, CI/CD, and deployment workflows
  • Engineered multi-tenant university platform architecture with institutional data isolation

System Architecture

Wizuality follows a layered full-stack architecture.

Frontend

React + TypeScript + Vite

Organized into feature-based modules with dedicated systems for authentication, problem engines, visualizers, learning modes, attendance, voice playback, persistent state, and API communication.

Backend

Fastify + TypeScript + Prisma

Routes
  ↓
Middleware
  ↓
Services
  ↓
Repositories
  ↓
Prisma
  ↓
PostgreSQL

The repository layer handles data access, while the service layer encapsulates business logic, validation, auditing, email workflows, AI integration, and progress handling.

Supporting Infrastructure

  • PostgreSQL — Primary relational database
  • Redis — Caching, rate limiting, and session storage
  • Socket.IO — Real-time bidirectional communication
  • Piston — Sandboxed code execution
  • Gemini / OpenRouter — AI integration layer
  • Deepgram — Text-to-speech engine
  • Brevo SMTP — Transactional email delivery

Authentication & Security

The platform implements a layered authentication and authorization system.

Authentication

  • JWT-based access and refresh tokens
  • Short-lived access tokens with HTTP-only refresh cookies
  • Session tracking through Redis
  • Token rotation on refresh
  • bcrypt password hashing
  • Email verification and secure password-reset workflows

Authorization

Role-based access control with four permission tiers:

STUDENT · TEACHER · ADMIN · SUPER_ADMIN

Data is scoped by university for strict multi-tenant isolation. The backend also enforces Helmet headers, CORS policies, Zod schema validation, Redis rate limiting, and centralized error handling.

Multi-Tenant University Architecture

Wizuality is built for institutional scale. The backend supports university-scoped users and data, enabling separate institutions to manage their own students, teachers, classes, problem sets, attendance, and learning progress.

Student Workflows

  • Progress dashboards
  • Problem attempts & time tracking
  • Code submissions & roadmap progress
  • Dynamic QR attendance check-in

Teacher Workflows

  • Class & enrollment management
  • Student progress tracking & analytics
  • Live attendance sessions
  • Custom problem creation & publishing

Administrator Workflows

  • User & role management
  • Class administration
  • Audit logs & platform metrics

AI-Powered DSA Tutor

Wizuality includes an AI tutoring layer focused specifically on Data Structures & Algorithms.

The system integrates providers including Google Gemini and OpenRouter, constrained to DSA-oriented assistance to provide guided step-by-step explanations rather than simply outputting code solutions. The backend architecture supports provider abstraction and automated fallback handling.

Integrated Code Execution

Wizuality connects visual learning directly with code execution through Piston.

Supported languages:

Java · C++ · Python · C

This enables students to move from conceptual understanding in 3D to executing real code inside the same environment, backed by per-user execution rate limiting.

Real-Time Collaboration

Built with Socket.IO to support synchronous interactions:

  • Collaborative coding rooms with real-time code synchronization
  • Live technical interview sessions
  • Real-time attendance session updates
  • Room-based state management

Dual Learning Modes

Student Mode

Designed for self-paced study:

  • Full source code view
  • Timeline scrubbing and granular stepping
  • Manual playback & camera controls
  • State inspection & custom inputs

Classroom Mode

Designed for teaching and projection:

  • Simplified presentation UI with enlarged typography
  • Automatic pacing with configurable step pauses
  • Tutor-controlled stepping
  • Projector-optimized layout

Problem & Algorithm Coverage

Wizuality includes 50+ fully visualized problems:

  • Arrays: Two Sum, Trapping Rain Water, Maximum Subarray, Sort Colors, Rotate Array, Product of Array, and more.
  • Linked Lists: Insertion, deletion, rotation, reversal, cycle detection, intersection, and palindrome checks.
  • Strings: Longest substring, palindrome detection, anagrams, minimum window substring, string reversal.
  • Graphs: BFS, DFS, Dijkstra, Cycle Detection, Topological Sort.
  • Trees: Heap Insert/Delete, Heap Visualization, BST Sandbox, AVL Sandbox.
  • Hash Tables: Hash functions, chaining, open addressing, collision handling.

Voice & Accessibility Layer

Integrates Deepgram text-to-speech for voice-narrated algorithm explanations. The frontend manages voice session state and playback synchronization with 3D animation steps.

Observability & Reliability

  • Prometheus: HTTP metrics & custom application counters
  • Sentry: Error tracking & performance monitoring
  • Winston: Structured JSON logging
  • Redis: Distributed caching, sessions, and rate limiting
  • Vitest: Automated test suites
  • k6 / Artillery: Load-testing workflows

CI/CD & Deployment

Wizuality is maintained as a monorepo with automated deployment pipelines:

  • Frontend: Vercel
  • Backend: Docker container on Render / VPS
  • Database: Managed PostgreSQL
  • Cache: Redis
  • CI/CD: GitHub Actions (Linting, TypeScript compilation, Vitest suite, Docker image builds, automated deployment)

Technology Stack

Frontend

React · TypeScript · Vite · Tailwind CSS · Framer Motion · React Router · Monaco Editor

3D & Graphics

Three.js · React Three Fiber · Drei · react-spring/three · Postprocessing · d3-force-3d

Backend

Node.js · TypeScript · Fastify · Prisma · PostgreSQL · Redis · Socket.IO · Zod · JWT · bcrypt

Integrations

Google Gemini · OpenRouter · Piston · Deepgram · Brevo SMTP · html5-qrcode

DevOps & Tooling

Docker · GitHub Actions · Vercel · Render · Vitest · ESLint · Prettier

Startup Milestone

₹1.5L Startup Funding Secured

Wizuality was incubated and awarded ₹1.5 lakh in startup funding to support product engineering, institutional validation, and platform scaling.

Links