Duoslango | Devpost

Inspiration

The world of digital media has made large impacts on our everyday lives, but specifically in the world of language. With each video and comment, new vocabulary emerges. While this slang is the core of digital culture, being well-versed also comes with requirements of demographic and screen-time not everyone can meet. We set out to make Duoslango to bridge the communication between generations, and give people a tool to conserve screen time while staying up to date on slang and micro conventions. We wanted to create a fun and engaging way to combat the unproductive habit that it endless scrolling, turning it into a productive learning experience and communication tool.

What it does

Duoslango is an interactive web platform that helps users learn and retain modern internet slang through engaging, game-based quizzes. It uses Google’s Gemini API to dynamically generate relevant definitions, fill-in-the-blank sentences, and visual identification questions based on emerging online language. Players receive instant feedback on their answers and track progress through a points and lives system that encourages continued learning. The platform is designed to be both educational and entertaining, making cultural fluency more accessible in the fast-changing digital world.

How we built it

We used Gemini 2.0-Flash, configured with a high temperature, to generate creative and contextually meaningful questions drawn from current internet culture. The backend was built with Flask, enabling smooth API communication between the frontend and the Gemini model. We designed the frontend using React and styled it with Tailwind CSS for a clean and responsive user experience. To manage global state, we implemented React Context, and we incorporated Vite for fast development and hot module reloading. All components were structured modularly to support extensibility and rapid iteration throughout the hackathon.

Challenges we ran into

Prompt Engineering: Crafting precise and constrained prompts for Gemini was a major challenge. We iterated extensively to avoid repetitive or outdated slang and ensure responses matched our desired format.
Frontend–Backend Integration: Ensuring consistent communication between the React frontend and Flask backend took significant time, especially when handling asynchronous state updates and race conditions.
Version Control: Coordinating merge conflicts and managing rapid updates across multiple branches was difficult with a team actively working on different components.
Slang Image Matching: Designing and populating a visual slang dataset for image-based questions demanded both technical and cultural judgment to ensure the content remained relevant, engaging, and recognizable.
Debugging: It was time-consuming to trace and resolve bugs, particularly when connecting the frontend to the backend, and addressing aesthetic inconsistencies also presented a challenge.
API Integration and Data Handling: Effectively integrating and optimizing calls to the Gemini API, including managing response times and analyzing the generated slang data, required close attention.

Accomplishments that we're proud of

As first-time hackers, we're incredibly proud to have built and launched a complete website, overcoming various technical and creative challenges.
A significant achievement was effectively incorporating the Gemini API, which is crucial for generating the slang content in our game.
We're proud of finally achieving consistent, well-formatted, and relevant responses from the Gemini API which was important for generating high-quality, slang-based learning content.

What we learned

Figma: We gained experience in collaborative UI/UX design, translating our ideas into functional prototypes and ensuring a consistent visual appeal.
Gemini API: We learned how to integrate the Gemini API to enhance our application's intelligence and introduce features.
React: We gained a deeper understanding of React's component-based architecture, state management with Hooks, and efficient routing, leading to a more scalable frontend.

What's next for Duoslango

More languages: We aim to broaden Duoslango's content by including slang from a wider array of languages, creating a richer learning experience.
Authentication: We plan to introduce authentication so users can keep track of their progress and accumulate achievements.
Game Modes: We hope to introduce engaging new modes, such as vocabulary modules, daily quests, and vocal exercises to make learning more interactive.
ML models: We look to incorporate machine learning models to improve how well Duoslango can recognize and generate different slang usages, making it more accurate and responsive.