Sign-o

Sign-o is the Duolingo of American Sign Language (ASL), making learning signs fun with gamified challenges, XP rewards and social "Parties" to master ASL in bite-sized, addictive, engaging steps

Comment

The Story of Sign-o: Bridging Worlds with Cosmic Flow

🌟 Inspiration

  • The idea for Sign-o began with a simple observation: American Sign Language (ASL) is one of the most expressive and powerful forms of communication. Yet, the tools available to learn it often feel academic, static, or disconnected. I wanted to change that. I believe that ASL should be accessible to everyone. Through this platform, I aim to ignite a new passion for learning and understanding. It's about creating a space where hearing and signing communities come together; not as separate groups, but as part of a shared experience. A world where learning isn’t a chore, but a thrilling, continuous journey.
  • Sign-o combines gamification with a futuristic aesthetic, creating an immersive learning experience for ASL that’s as engaging as a game. Inspired by the need for connection, it bridges hearing and signing communities, transforming ASL into a cultural journey rather than just a skill to be learned. With a vibrant, neon-infused universe, Sign-o makes learning addictive, beautiful, and social, turning each sign into an exploration of meaning.

🛠️ How I Built It

Sign-o is a modern web application built for performance and "juice."

  • The Frontend Foundation: I used React with Vite to ensure a lightning-fast developer experience and a snappy user interface.
  • State Management with Zustand: For a gamified app, state is everything. XP, levels, lesson locking logic, and social "Parties" are all handled by a centralized Zustand store, allowing for seamless updates across the leaderboard and profile.
  • Interactive AI Learning: This is the heart of Sign-o. I integrated MediaPipe’s Hand Tracking technology to provide real-time feedback. When a user practices a sign, the app tracks their hand landmarks and validates the gesture instantly.
  • The "Cosmic Flow" Aesthetic: Using Framer Motion, I brought the UI to life with fluid transitions and physics-based animations. The "zig-zag" skill tree and glassmorphic panels were styled using a custom design system that prioritizes vibrant neon gradients (#7F5AF0 to #2CB67D) and deep space-themed dark modes.

🧠 What I Learned

Building Sign-o was a masterclass in combining AI with UX. I learned:

  • Real-time Gesture UX: It’s not enough to just detect a hand; I had to guide the user. I learned how to implement "holding" mechanics (e.g., holding a sign for 2 seconds to confirm) to ensure accuracy and prevent accidental completions.
  • Gamification Architecture: Designing a skill tree that feels rewarding—complete with streaks, badges, and secret rewards—required a deep understanding of user psychology and state persistence.
  • Social Dynamics in Learning: Implementing the "Party" system taught me how social pressure and community can significantly boost user retention.

🚧 Challenges I Faced

No project is without its hurdles. For me, they were:

  1. Gesture Precision: Different lighting conditions and camera qualities can wreak havoc on hand tracking. I had to fine-tune the validation logic to be forgiving enough for beginners while remaining accurate.
  2. The Zig-Zag Layout: Building a dynamic, responsive skill tree that zig-zags and animates correctly on both mobile and desktop was a significant CSS and Framer Motion challenge.
  3. Flow State: Ensuring the transition from "Watching a Video" to "Practicing with AI" felt like a single, continuous flow required careful orchestration of React components and animation timing.

🚀 The Future

Sign-o is just getting started. I envision a future where entire conversations can be practiced in VR, and where "Sign-o Parties" become a global standard for inclusive social gaming. Let’s make the world a more communicative place, one sign at a time.

Built With

Share this project:

Updates