Project Info
Inspiration
Our innovative platform combines the power of conversational AI with the fun of interactive games, transforming traditional language learning into an engaging and playful experience. With a vibrant, child-friendly interface and exciting games like 'Fruit Slash' for vocabulary building and a math challenge that lets kids solve basic arithmetic problems in Spanish, we make learning feel like play. The magic lies in our use of voice technology.
What it does
Kids respond to challenges by speaking, and our integration with Gladia’s speech-to-text engine ensures that their responses are instantly processed and validated. This conversation-based approach allows young learners to practice speaking Spanish in a natural and fun way, making language learning more interactive than ever. We believe that the best learning happens when you're having fun, and we’re changing the way kids learn languages—one conversation at a time.
How we built it
• Design & Prototyping: Used Figma to create a fun and interactive user interface, focusing on a kid-friendly design. • Frontend Development: Built the frontend using React and Next.js, implementing responsive components and game interfaces. • Speech-to-Text Integration: Integrated Gladia for live audio processing, converting speech into text in real time. • Text Processing Logic: Implemented simpdjson to handle JSON queries and manage data from the speech-to-text responses. • Game Functionality: Developed game UIs that utilize the processed text to validate responses and provide feedback within interactive games.
Challenges we ran into
• Limited Time and Expertise: Couldn't fine-tune voice models to the desired accuracy due to time constraints and lack of expertise. • Latency Issues: Experienced delays with API calls between the speech-to-text service and the conversational agent, affecting response times. • Poor Internet Connectivity: Encountered frequent connectivity issues throughout the hackathon, costing valuable development time. • Limited Workspace: Faced difficulties collaborating effectively due to cramped working conditions and lack of sufficient space.
Accomplishments we're proud of
• Team Collaboration: Successfully worked together despite various struggles, demonstrating strong teamwork and resilience. • Rapid Prototyping: Quickly tested different voice software to validate the idea and identify a feasible solution. • UI Design and User Experience: Created a friendly, appealing, and fun interface that makes learning enjoyable for kids. • Clean and Interactive Interface: Developed a clean, user-friendly interface that enhances the learning experience through engaging interactions.
What we learned
• Real time streaming ain't easy, if you want low latency! We promise awesome latency streaming!
What's next
• Character-Based Conversation Agents: Train voice models to incorporate popular TV and movie characters, allowing kids to learn from their favorite personalities and making the experience more engaging. • Personalized Pronunciation Tutor: Develop a conversation agent that listens to kids’ pronunciation and provides real-time feedback, acting as a personalized tutor to help them improve their speaking skills. • Research-Backed Educational Content: Collaborate with educators and researchers to design games that are not only fun but also scientifically proven to enhance language learning outcomes.
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Analysis
View
Metric
- 16
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- Next.jsIn code
- ReactIn code
- TypeScriptIn code
3 of 3 appear in the indexed code.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
40 KB
Source files
13
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
andouu/calhacks
38 files · 1.8 MB · @ 7aa5296
Structure
Interface
18 files · 47%Screens, components and styles rendered to the user.
Application logic
1 file · 3%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript96%
- Markdown4%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 15- @types/recordrtc
- framer-motion
- next
- react
- react-dom
- react-icons
- recordrtc
- sass
- scss
- +6 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.