Al-Lingo(Duolingo for AI Literacy)

AI-Lingo is a website which teaches AI by exploring daily routines, audio podcasts, reading materials, AI news and matching-game grids that explain how AI algorithms power our everyday world!

Comment

Inspiration

The AI boom left a massive portion of the population behind. While engineers argued over parameters, non-tech people were left feeling intimidated, confused, or worried about their jobs. I noticed a dangerous gap: while some people were trying to utilize the advanced LLMs but some other people did not understand AI and its powers feeling left behind. I wanted to fix that. I was inspired by the bite-sized, gamified learning loops of Duolingo. I realized that if you can teach a complex language like Japanese through cartoon birds and matching games, you can absolutely teach Operational AI Literacy using the same psychological hooks.

What it does

AI-Lingo bridges the gap between language learning and artificial intelligence education. It teaches core computer science and AI concepts through interactive vocabulary materials: AI Cascade Game: Players swap tiles to match deep learning nodes (Data, Model, Prompt, Neuron, Output, Bias) to clear columns, boost scores, and reveal real-time glossary concepts and fun facts.

Interactive Audio Podcasts: Users listen to sequential TTS-voiced tech podcasts equipped with suggestions and continuation sidebars.

Reading Stories: Students study written across beginner, curious, and deep-dive technical layers with instant translation overlays.

Daily Life AI Connections: Users explore typical situations (like cafés, transport, and meetings) through simple, child-friendly explanations revealing exactly how algorithms (like recommenders, CNNs, pathfinding, and voice transformers) work behind the scenes.

Dynamic News Feed: Keeps learners updated on live AI developments, featuring breakthrough filters, full read views, likes toggling, and pagination.

How I built it

AI-Lingo was built as a modern, high-fidelity web application using a modular stack combined with advanced AI tooling: Frontend Architecture: Developed with React, TypeScript, and Vite for fast, optimized, and type-safe development.

Visual Design & Styling: Leveraged Tailwind CSS alongside custom styling variables (theme.css and index.css) to implement a premium, dark glassmorphism aesthetic complete with ambient backdrop glow effects, smooth hover micro-animations, and responsive card layouts.

Core Interactive Modules: SpeechSynthesis Integration: Built a custom queue system utilizing the browser's native SpeechSynthesisUtterance to narration-stream podcast scripts sequentially.

Gaming Loop: Implemented a 7x6 match-3 swap matrix algorithm that coordinates slide offsets, column collapsing, and grid refills.

Data Persistence: Integrated Supabase backend databases to persist explored daily scenarios and track high scores dynamically on a global leaderboard.

AI Pair Programming: Codex was utilized to formulate grid physics computations, card swaps, and cascading state animations.

GPT-5.6 mapped high-fidelity Figma mockup styles to Tailwind CSS components, structured the sequential TTS player, and translated technical deep-learning concepts into simple, engaging analogies for daily situations.

Challenges I ran into

Speech Synthesis Constraints: The browser's native Text-to-Speech (TTS) api frequently cuts off or locks up on long blocks of text. I had to orchestrate a custom queue manager that partitions transcripts line-by-line and plays them sequentially.

Physics State in React: Designing a 7x6 match-3 cascading engine without mutating React state arrays directly required writing complex double-pass matrix algorithms to calculate grid falls, refills, and combos cleanly.

Simplifying AI Explanations: Translating complex models like YOLO, GNNs, and Transformer Diarization into simple, engaging analogies suitable for a 6-year-old—while maintaining technical accuracy—took multiple design revisions.

Accomplishments that I am proud of

Stunning UI/UX: Successfully matching the high-fidelity mockups exactly with rich glassmorphism backgrounds, ambient glows, hover micro-animations, and responsive layouts.

End-to-End Interactivity: Developing a fully interactive experience where every button works, news articles launch complete details, podcasts sync with play bars, and custom cards flip smoothly.

Dual Learning Model: Merging language vocabulary tracks with AI literacy concepts into one cohesive dashboard that keeps users engaged.

What I learned

How to efficiently coordinate coordinate systems (rows/columns) in React state for game-board math loops. Techniques for handling browser speech synthesis lifecycles safely across page navigation changes. The value of using clear, child-friendly analogies to explain complex machine learning math (like recommenders, CNNs, pathfinding, and voice transformers).

What's next for Al-Lingo(Duolingo for AI Literacy)

Interactive Coding Playgrounds: Introduce tiny sandboxed playgrounds where users can write basic prompts or parameters to see real-time AI outputs.

Voice Feedback Integration: Leverage speech-to-text models to let users speak translations aloud and receive pronunciation corrections.

Expanded Scenarios & Multi-Language Tracks: Expand from Spanish/English to support multi-lingual tracks (French, Japanese, German) alongside advanced modules covering LLM security, neural network weights, and reinforcement learning.

Built With

  • ai-literacy
  • css3
  • e-learning
  • everyday-ai
  • frontend
  • gamification
  • github
  • glassmorphism
  • html5
  • interactive-dashboard
  • interactive-education
  • javascript
  • language-learning
  • match-3
  • podcasts
  • product-demo
  • react
  • responsive-design
  • single-page-application
  • speech-synthesis
  • supabase
  • tailwindcss
  • typescript
  • vite
  • web-speech-api
Share this project:

Updates