Inspiration
For millions of Spanish speakers learning English, there's a shared, silent frustration: "I know the word, I just don't know how to say it." The confidence gap in speaking comes from a single, massive hurdle: pronunciation. The official tool for this, the International Phonetic Alphabet (IPA), is a non-intuitive system for the average learner. It's like needing a manual just to read the instructions.
Our inspiration was to destroy this barrier. We envisioned a tool that could translate the complex science of phonetics into the simple, familiar sounds of our native Spanish. We wanted to build a personal coach that understands where we come from to guide us where we want to go, turning the fear of speaking into the confidence to be heard.
What it does
"Suena Inglés" is an intelligent web application that acts as a personal pronunciation coach for Spanish speakers. At its core, it does two things:
It translates pronunciation. Our "Guía Fonética" feature takes any English word and decodes its official IPA into a simple, easy-to-read guide using Spanish syllables (e.g., for "world", instead of
/wɜːrld/, the user seesuérld).It provides AI-powered feedback. Users can record themselves saying a word, and our AI engine, powered by Gemini, analyzes their audio in real-time. It then provides instant, actionable feedback, telling them exactly what to improve (e.g., "Estás cerca. La parte de 'rld' necesita más fuerza.").
The app is a complete learning tool with features like dynamic word discovery, learning statistics, favorites, and a gamified "Challenge Mode" to make practice engaging and effective.
How we built it
We engineered "Suena Inglés" as a high-performance Single Page Application (SPA) designed for a seamless, mobile-first experience, demonstrating how much power can be packed into a modern client-side application.
Tech Stack: We used React with TypeScript for a robust and scalable component architecture, Tailwind CSS for rapid and consistent styling, and Framer Motion for fluid, meaningful animations that enhance the user experience.
AI Engine (Gemini): Our integration with the Gemini API is the heart of the app. We use it for two key functions:
- Dynamic Word Generation: Using a highly-specific prompt and forcing a JSON output, we ask Gemini to generate a full data object for any word a user searches for, including our unique Spanish Phonetic Guide.
- Pronunciation Analysis: We send the user's recorded audio (as base64 data) to Gemini with a carefully engineered prompt that instructs it to act as a strict pronunciation coach. The response is prefixed with
SUCCESS:orIMPROVE:for easy parsing, allowing us to deliver clear, instant feedback.
Architecture: The entire application runs on the frontend, using browser
localStoragefor data persistence (user progress, favorites, etc.) and native browser APIs likeMediaRecorderfor audio capture.
Challenges we ran into
Teaching AI Linguistics: Our primary challenge was prompt engineering. It took significant iteration to create prompts that could reliably "teach" Gemini to translate technical IPA into culturally and phonetically relevant Spanish guides for both US and UK accents, and to do so consistently in a structured JSON format.
The Zero-Lag Feedback Loop: Building a real-time audio analysis feature without a clunky user experience was tough. We had to optimize the flow of capturing audio, encoding it, sending it to the API, and displaying the result in a way that felt instant and magical, using optimistic UI updates to mask any potential latency.
The Backend-less Backend: Managing all user data, word lists, and application state on the client-side required a robust architecture. We leveraged React's Context API to create a centralized state management system that could handle this complexity without needing a traditional backend database.
Accomplishments that we're proud of
The "Phonetic Translator" Engine: We are incredibly proud of creating a prompt-based system that effectively turns a generalist LLM into a specialist linguistic tool. This innovative approach is our core accomplishment and is designed to be fully scalable to other languages.
A Truly Seamless AI Interaction: The flow for practicing pronunciation is seamless. The user clicks, speaks, and gets feedback in seconds. We are proud of achieving a user experience where the underlying AI complexity is completely invisible, making it feel intuitive and natural.
A Feature-Rich Serverless App: We successfully built a complete, persistent, and personalized application that runs entirely in the browser. This demonstrates a deep understanding of modern frontend capabilities and efficient application architecture.
What we learned
This project was a profound learning experience. We learned that the true power of an LLM is unlocked through meticulous prompt engineering—it's a new kind of programming. We discovered just how capable the modern frontend stack is, allowing us to build full-fledged applications without a backend. Most importantly, we confirmed that no matter how powerful the AI, a polished and intuitive user experience is what ultimately makes a tool useful and loved.
What's next for Suena Inglés — Pronunciation, Unlocked.
The architecture of "Suena Inglés" was built from day one to be scalable. Our vision is to make it the global standard for pronunciation learning.
Expand to New Languages: Our immediate next step is to add support for more languages. The "Phonetic Translator" engine is ready. Soon we will have guides for French speakers (
Prononcez comme un natif), German speakers (Sprechen Sie wie ein Muttersprachler), and beyond.Introduce Conversation Mode: We plan to leverage Gemini's more advanced capabilities to move beyond single words. A future "Conversation Mode" will analyze the user's rhythm, intonation, and flow in full sentences.
Deepen Gamification & Community: We will build out a more robust challenge system, introduce leaderboards, and allow users to create and share their own word lists, fostering a community of passionate learners.
Built With
- css3
- framer-motion
- gemini-api
- html5
- javascript
- localstorage
- mediarecorder-api
- react
- tailwindcss
- typescript
- web-speech-api
Log in or sign up for Devpost to join the conversation.