Fluendo

Inspiration

The primary inspiration for Fluendo came from a personal desire to improve my English proficiency. I wanted to move beyond traditional learning methods and find a more engaging, fun, and practical way to learn and use new English words in various scenarios. The idea was to create a tool that makes learning feel less like a chore and more like an interactive experience.

What it does

Fluendo is an interactive language-learning platform designed to help users learn English vocabulary and conversation skills in a gamified environment.

• Interactive Conversations: Users can engage in conversations, with Tavus platform's replicas, to practice their English in realistic real-time scenarios.
• Gamified Learning: The app includes features like hearts (lives), streaks for daily practice, leaderboards, and achievements to keep users motivated.
• Structured Lessons: Learning is organized into episodes and daily word challenges, providing a clear path for progression.
• Vocabulary Practice: Dedicated sections for vocabulary review and practice to reinforce learning.
• User Profiles: Users have profiles to track their progress, streaks, and achievements.

How we built it

The project was bootstrapped using bolt.new with the Tavus bolt template. Fluendo is a modern full-stack application built with the following technologies:

• Frontend: Built with React and Vite, using TypeScript for type safety.
• Styling: Tailwind CSS was used for a utility-first styling approach, allowing for rapid UI development.
• State Management: Zustand was chosen for its simplicity and powerful state management capabilities in a React environment.
• Backend & Database: Supabase serves as the backend, providing database storage, user authentication, and serverless functions. The database schema is managed through SQL migrations.
• Routing & Navigation: A custom routing solution manages screen transitions, including protected routes for authenticated users.

Challenges we ran into

• Engaging User Experience: Creating a smooth, interactive, and visually appealing user experience with animations (SceneTransition.tsx, SnowAnimation.tsx) and overlays (VocabularyOverlay.tsx) while ensuring performance required thinking outside of the box prompts and also coding.
• Real-time Conversation Flow: Implementing the logic for real-time conversations, including handling user input, API calls to a conversation service (createConversation.ts), and managing the conversation state, required strategic prompting and coding.

Accomplishments that we're proud of

• Full-Stack Gamified App: Successfully building a feature-rich, full-stack application from prompts using bolt.new that combines language learning with engaging game mechanics.
• Robust Backend with Supabase: Creating a scalable and secure backend using Supabase integration on bolt.new, complete with user management, progress tracking, and achievements.

What we learned

• Gamification Design: Understood the principles of gamification and how to apply them to an educational context to increase user engagement and motivation.
• Project Prompting: Learned to break down a complex project into manageable prompts, from UI components to backend database schemas.

What's next for Fluendo

• Multi-Language Support: Expanding beyond English to include other languages.
• More Content: Adding a wider variety of episodes, scenarios, and vocabulary packs.
• Enhanced Social Features: Introducing features that allow users to compete with friends, share their progress, and practice together.
• Mobile App: Developing native mobile applications for iOS and Android to reach a broader audience.

Built With

• bolt.new