Kido Space

An immersive EdTech platform designed for middle school students, featuring interactive 3D NASA space visualizations and AI-driven adaptive learning pathways.

EDTECHCase Study
GAMIFIED LEARNING3D VISUALIZATIONAI ADAPTIVE LEARNING

Technologies Used

Next.jsReactThree.jsNASA APIPythonMongoDBFramer Motion

Technical Architecture & Design Document

1. Overall Project Details

Kido Space is a cutting-edge educational platform developed to transform how middle school students learn about astronomy. By integrating high-fidelity 3D visualizations with interactive pedagogical tools, the platform moves beyond passive video watching. It features a unique "In-Video Quiz" system that pauses content at critical learning moments, requiring students to engage with the material immediately. The system doesn't just grade answers; it analyzes response patterns, time-to-answer, and difficulty levels to dynamically restructure the student's future learning schedule in real-time.

2. Target Audience

  • Middle School Students (Ages 11-14): Learners who benefit from gamified, interactive, and visually stimulating content.
  • Science Educators: Teachers looking for a platform that provides data-driven insights into student comprehension and progress.
  • Space Enthusiasts: Young learners who want to explore the cosmos through scientifically accurate NASA-backed simulations.

3. User Experience & Workflow

The platform follows an "Observe, Interact, Explore" model, ensuring students are constantly engaged through multiple sensory channels.

User Journey Flowchart

Interactive Technical Blueprint

4. Technical Architecture Flow

Kido Space utilizes a modern web stack designed to handle complex 3D rendering and real-time performance analytics.

System Architecture

Interactive Technical Blueprint

5. Developer Role & Implementation Focus

  • Interactive 3D Simulation: Implementing Three.js scenes to render high-resolution textures of celestial bodies, ensuring smooth performance on school-grade hardware.
  • In-Video Synchronization: Developing a custom video player wrapper that triggers React components based on precise video timestamps for seamless quiz integration.
  • Adaptive Learning Engine: Engineering a Python-based analysis module that calculates the "Forgetting Curve" and student accuracy to prioritize future topics.
  • NASA Data Mapping: Creating a robust integration layer to translate raw NASA API data into visual parameters for the 3D exploration engine.

6. Technology Stack & Tools Used

Frontend & 3D Visualization:

  • Core: Next.js, React, TypeScript
  • 3D Engine: Three.js, React Three Fiber
  • Animations: Framer Motion, GSAP
  • Video: Custom Video.js Implementation

Backend & Analytics:

  • Runtime: Node.js (Express), Python (FastAPI)
  • Real-time: Socket.io
  • Analysis: NumPy / Pandas (for learning analytics)

Infrastructure & Data:

  • Database: MongoDB Atlas
  • Caching: Redis
  • APIs: NASA Open APIs (APOD, Exoplanets, Image Library)

7. Communication Structure (Quiz to Path Update)

The system ensures that student performance is immediately reflected in their educational journey.

Adaptive Learning Sequence Flow

Interactive Technical Blueprint