didactr

💡 Inspiration

Anyone can recognize the importance of language. Whether it is a way to connect with loved ones, a necessary tool for everyday life, or a medium for art and self-expression, the sheer magnitude of language in our lives is undeniable. However, because language is so deeply woven into our daily routines, a language barrier can become a profound source of hardship.

Coming from a family of immigrants, we’ve learned firsthand the toll that not knowing the local language can take on someone struggling to find their footing in a new society. Isolation, difficulty finding employment, facing disrespect, and a general lack of fulfillment are just a few of the hurdles these individuals experience daily.

While it's impossible to teach someone a new language in a single day, making the learning process more engaging and enjoyable is absolutely doable. That undertaking is what inspired didactr. 🚀 What it does

didactr is an online, interactive platform that allows users to host and join multiplayer translation races. Players compete head-to-head to translate a given set of words into a target language as quickly as possible.

To create the perfect competitive environment for any group of friends, users can customize their lobbies by selecting:

The target language

The total word count

The lobby size

🛠️ How we built it

We built didactr as a full-stack web application using the SvelteKit (JavaScript/TypeScript) framework. This allowed us to build fluid front-end user interfaces and robust back-end server logic within the same unified environment.

Here is how the core loop works:

Game Creation: When a practice session or multiplayer game is launched, the app generates a random set of words in the user-specified language.

Smart Caching: The app first checks our MongoDB cluster for existing translations of those words.

AI Integration: If a word hasn't been translated before, we query the Google Gemini API for the translation.

Database Storage: New translations are instantly cached in the database (managed via MongoDB Atlas) for future use.

Multiplayer Sync: Live connections, player lobbies, and real-time game updates are handled seamlessly using Supabase Presence.

⚠️ Challenges we ran into

API Latency & Cost: One of the hardest challenges was managing the translation generation. We quickly discovered that querying an LLM API for every single word in real-time could be slow and potentially expensive. We solved this by implementing a database caching system. By saving previous translations to our MongoDB cluster, any previously encountered word can be pulled instantly, drastically reducing API calls and latency.

Real-Time State Management: Choosing how to handle real-time game updates took some trial and error. After evaluating options like SockJS and Socket.IO, we ultimately pivoted to Supabase Presence, which provided the most reliable and developer-friendly solution based on our past experiences.

🏆 Accomplishments that we're proud of

Successfully managing complex, real-time multiplayer states.

Building an efficient caching system that significantly optimized our app's performance.

Achieving a seamless, live deployment of our full-stack application through Vercel.

🧠 What we learned

Building this project deepened our understanding of SvelteKit. Specifically, we learned a massive amount about how SvelteKit handles component rendering and DOM manipulation, which ultimately reshaped our approach to designing and structuring front-end interface components. 🔮 What's next for didactr

We have big plans to make the platform even more competitive and social! Upcoming features include:

⏱️ Racing Timers for more precise tracking.

📊 Global Leaderboards to see who the fastest translators are.

📈 Rating & Ranking Systems for competitive matchmaking.

🤝 Friend Systems to easily invite and play with people you know.

Built With

• atlas
• geminiapi
• javascript
• mongodb
• mongodbatlas
• supabase
• svelte
• sveltekit
• vercel