Ripple
Diagram

Ripple

Ripple is a product we built for the UMaimi Horizon AI hackathon(2025), inspired by the challenges of studying for midterms using PDFs and written notes. It provides a 3-d gamified quiz experience built with a Next.js frontend, a Go backend deployed on Cloud Run, and Firebase for database storage. The application leverages a monorepo architecture managed by Turborepo and includes a WebSocket server for real-time communication.

Key Features

🎲 3D Multiplayer Gaming: Challenge friends in real-time quiz battles
📚 Universal File Support: Works with PDFs, PPTs, Images, and Text
🤖 AI-Powered Questions: Automatically generates MCQs and open-ended questions
🌎 Multi-Language Support: Instantly translate to Chinese and Spanish
📱 Canvas Integration: Seamlessly import your course materials
🎯 Accessibility First: Text-to-speech and keyboard navigation support

Inspiration

The inspiration for ripple came to us when we were having a hard time studying for our midterms last weekend. It was really difficult for some classes that only provided pdfs, ppts or even written notes to learn and test ourselves on. Hence, we decided to tackle this problem in this hackathon by creating Ripple which provides a gamified experience of taking quizzes using the step repetition method. We also hoped our solution would transcend linguistic barriers and we made it translate into Chinese and Spanish using generative AI.

What it does

Ripple basically takes in different forms of academic texts and converts them into questions that you can play with/against your friends until one of you wins. We have also added integration to Canvas in the background, making it really easy for someone to add files form their courses directly. Similarly, we have done our best to make the platform as accessable to everyone as possible through features like translation and text to speech.

What it does

Ripple basically takes in different forms of academic texts and converts them into questions that you can play with/against your friends until one of you wins. We have also added integration to Canvas in the background, making it really easy for someone to add files from their courses directly. Similarly, we have done our best to make the platform as accessible to everyone as possible through features like translation and text to speech.

How we built it

https://raw.githubusercontent.com/saphalpdyl/ripple/refs/heads/main/apps/web/public/diagram.png

Frontend Stack

React & Next.js: Used for building the main web application with page.tsx components
Three.js & React Three Fiber: Implemented 3D game environment with @react-three/fiber and @react-three/drei
TypeScript: For type-safe development across the project -Zustand: State management for player and game data
Firebase: Authentication and real-time database
TailwindCSS: Styling and UI components Canvas API Integration: Direct connection to educational content

Backend Stack

Go with Gin: RESTful API server
Tesseract OCR: Text extraction from images and PDFs
OpenRouter: AI-powered question generation and translation
Cloud Run: Deployment and scaling
WebSocket Server: Real-time game state synchronization DevOps & Architecture
Turborepo: Monorepo management and build optimization

Integrations

Canvas LMS API for user info and course content
Multi-language support (English, Chinese, Spanish)
Text-to-speech accessibility features
PDF and PPT file processing

Challenges we ran into

The biggest challenge was figuring out the game loop and also getting a 3D workspace to work through the browser.

Accomplishments that we're proud of

We are really proud of being able to extend generative AI for more accessibility areas, the implementation of the card deck and 3D table, and the overall look and feel of the application.