CognitoFlow AI

Inspiration

The idea for CognitoFlow AI stemmed from the desire to make learning more immediate and personalized. Traditional learning resources can be static or require extensive searching. I envisioned an AI tutor that could instantly respond to specific questions, adapting to the user's needs, much like having a personal expert on call. The rise of conversational AI and video generation technologies made this vision seem within reach, especially for quick clarifications and explanations.

What it does

CognitoFlow AI is a personalized mobile learning companion that provides on-demand explanations through conversational AI video and voice. Users can ask questions via text or speech, and an AI tutor responds with dynamic video and voice explanations. The app features a subscription model for premium access, powered by RevenueCat, and securely stores a persistent history of user learning sessions in Firebase Firestore, allowing users to revisit past interactions and track their progress.

How we built it

CognitoFlow AI was built as a React Native mobile application using Expo, providing a streamlined development experience. The styling was handled with a hybrid approach, combining the utility-first speed of Tailwind CSS via twrnc with the component-level styling power of emotion/styled. The development proceeded in modular steps:

Core UI & RevenueCat Mock: Initial screens were set up with a mock subscription flow to demonstrate the "Make More Money" challenge.

Tavus Integration: A component was created to send user questions to the Tavus API and display a mock video response, fulfilling the "Conversational AI Video" challenge.

ElevenLabs Integration: A voice interaction component was developed to handle speech input and simulate AI voice responses, addressing the "Voice AI" challenge.

Firebase Backend: Firebase Authentication was implemented for anonymous user IDs, and Firestore was used for saving and retrieving user session history, ensuring data persistence.
Each integration was built as a separate, testable component before being combined into the main App.js orchestrator.

Challenges we ran into

Integration Complexity: Juggling multiple external APIs (RevenueCat, Tavus, ElevenLabs) and Firebase within a single React Native project presented challenges in managing asynchronous operations, securely handling API keys, and understanding each service's unique data structures.

React Native vs. Web Differences: Initially, there was some confusion in the development environment regarding React Native vs. React Web components, leading to compilation issues. This required careful attention to import statements and component types (e.g., View vs. div).

Mocking External Services: Accurately mocking the behavior of external APIs (like the asynchronous nature of video generation or subscription callbacks) for development and demonstration purposes required careful planning.

Firebase Setup: Ensuring Firebase was correctly initialized and security rules were properly configured for user-specific data was a critical but solvable challenge.

Accomplishments that we're proud of

I'm most proud of successfully integrating a diverse set of cutting-edge AI and monetization technologies into a cohesive mobile application within a tight hackathon timeframe. Getting the conversational AI (Tavus video and ElevenLabs voice) to interact, alongside a functional subscription model and persistent user data, feels like a significant achievement for a solo developer. The ability to demonstrate a clear user journey from question to AI response to session logging is a testament to overcoming complex integration hurdles.

What we learned

This project provided invaluable hands-on learning in several areas:

Building robust mobile applications with React Native and Expo, and navigating their ecosystem.

Mastering advanced styling techniques with twrnc and emotion/styled for highly customizable UIs.

The intricacies of integrating third-party SDKs and APIs, including managing authentication, data formats, and asynchronous operations.

The importance of modular component design for managing complexity in a multi-feature application.

Practical application of cloud-based authentication and NoSQL database (Firestore) for user data persistence.

What's next for CognitoFlow AI

For the future of CognitoFlow AI, the next steps would involve:

Full API Integration: Replacing all mock API calls with live integrations for Tavus and ElevenLabs to enable real AI video and voice responses.

Content Expansion: Developing more structured learning modules and a wider range of topics for the AI tutor to specialize in.

Enhanced Personalization: Implementing more sophisticated user profiles and adaptive learning paths based on user interactions and progress.

Advanced Authentication: Expanding Firebase Authentication to include email/password or social logins for more robust user management.

Performance Optimization: Focusing on optimizing video streaming and AI response times for an even smoother user experience.

User Feedback & Iteration: Gathering user feedback to refine the AI tutor's responses and overall app usability.

Built With

• expo.io
• firebase
• react-native
• revenuecat
• tailwind
• tavus