Spango

AI-Driven and Speech Recognition Language Learning Platform

Comment

Spango: A New Frontier in Language Learning

Welcome to the official README for Spango, an immersive, AI-powered language learning application designed to take you on an interstellar journey to fluency.
This document outlines the project’s vision, the technologies used, and the story of its creation.

The Inspiration: Beyond the Familiar

In a world filled with language apps, one giant stands tall: Duolingo. It gamified learning and made it accessible to millions.
However, for all its strengths, we identified a crucial gap — the confidence to speak.

Most platforms rely on tapping, matching, and occasional, limited speaking exercises. The fear of mispronunciation remains a significant barrier for new learners.

Spango was born from a simple question:

What if speaking were not an afterthought, but the core mechanic?

We envisioned a platform that doesn’t just teach you words, but actively listens, encourages accent practice, and turns speaking a new language into an exciting adventure rather than a daunting test.

Core Features: An Educational Cosmos

Spango is more than just a series of lessons — it’s a universe of knowledge waiting to be explored.

Interactive 3D Universe

The learning path is visualized as a beautiful, interactive galaxy.
Each planet represents a core language topic (e.g., Greetings & Basics, Food & Drink), creating a clear and engaging progression map for the user.

AI-Powered Speech Recognition

The heart of Spango. Every practice question requires the user to speak their answer.
Using the browser’s Web Speech API, we provide real-time speech-to-text transcription and immediate feedback on pronunciation and accuracy.

Gamified Learning and Progression

  • Asteroid Blaster: A fast-paced “Practice” mode where users type translations to destroy incoming asteroids, reinforcing vocabulary under pressure.
  • Unlockable Content: Completing all sections of a planet unlocks the next one, giving a tangible sense of accomplishment.
  • In-Game Economy: Earn credits for completing lessons, which can be spent in the shop.
  • Deep Customization: The Theme Shop allows users to spend credits on stunning cosmetic themes that change the look of the planetary system.

Multi-Language Support

Spango is built to be a polyglot’s playground, currently supporting:

  • Spanish
  • French
  • Hindi

The Technology Stack: Powering the Galaxy

This project was built using a blend of modern web technologies and powerful APIs.

Frontend Framework

  • HTML5, CSS3, and JavaScript (ES6+)
  • React for a dynamic, stateful, and responsive quiz interface

3D Graphics and Animation

  • Three.js – renders the planets, stars, and galaxy environment
  • TWEEN.js – handles smooth, cinematic camera transitions and object animations
  • Lottie – brings Spango’s alien character to life with expressive animations

Artificial Intelligence

  • Web Speech API (SpeechRecognition) – enables speech-to-text recognition and real-time transcription from the user’s microphone

Backend and Authentication

  • Firebase Authentication – secure sign-in via Google or as an anonymous “debug” user

The Journey: From a Single Star to a Galaxy

The Spark

We began with a simple Three.js scene—a blank canvas with a few stars. The goal: create an engaging visual space.

Building Worlds

We procedurally generated unique planets with distinct colors, sizes, and orbits — the foundation of our learning map.

The Voice of Spango

Integrating the Web Speech API brought life to the project.
We designed a React-based quiz component where users could practice speaking directly.

Creating a Loop

A progression system was introduced — completing one planet unlocked the next, encouraging continued exploration.

Adding Fun and Flair

We introduced Practice Mode, an asteroid shooter that turns vocabulary drills into an action game.

Personalization and Polish

A theme shop, credit system, and refined UI/UX gave Spango its signature feel — complete with pixel fonts, smooth transitions, and animated asteroids.

Future Vision: The Next Voyage

Spango is just beginning its journey. Our roadmap includes:

  • Expanded Curriculum: Dozens of new languages and advanced topics like grammar, conjugation, and conversational skills.
  • Advanced AI Integration: Add Text-to-Speech (TTS) for more natural pronunciation examples.
  • Competitive and Social Features: Leaderboards, friend systems, and weekly challenges to build community.
  • More Mini-Games: Additional modes to target listening, comprehension, and sentence construction.

Thank You

Thank you for exploring Spango.
We’re excited to continue pushing the boundaries of what a language learning app can be —
one planet, one phrase, one voice at a time.

Built With

Share this project:

Updates