CogniFlow

Home page of CogniFlow
Teaching back page
Flashcard page
AI evaluation of your answer, and recommend room for improvement

Project Story

Inspiration

The inspiration for this project came from the desire to create an engaging and interactive learning platform that leverages AI to enhance the educational experience. We wanted to combine modern technologies like AI-driven transcription, text-to-speech, and interactive tools to make learning more accessible and effective.

What We Learned

Throughout this project, we learned how to integrate various technologies, such as:

Using React 19 and Next.js 15 for building dynamic user interfaces
Implementing Tailwind CSS 4 for responsive and modern styling
Creating a flashcard learning system with teaching and evaluation capabilities
Leveraging Zustand for state management across components
Implementing Google Gemini and OpenAI APIs for AI-driven features
Using browser APIs to handle audio/video streams for webcam and speech recording

How We Built It

Frontend: Built with Next.js and styled using Tailwind CSS with shadcn/ui components. Features like WebcamView and TeachingChat provide interactive learning experiences.
Backend: Powered by FastAPI with Google Cloud (Speech, Gemini) and OpenAI integration for AI features like transcription, text-to-speech, and intelligent responses.
State Management: Used Zustand with persist middleware for client-side state management, handling flashcards, chat interactions, and evaluation data.
Media Processing: Implemented browser MediaRecorder API for capturing audio/video, with comprehensive error handling and format compatibility.

Challenges We Faced

Media Handling: Managing webcam and audio streams while ensuring proper cleanup of resources was tricky.
API Integration: Integrating Google Cloud APIs required careful handling of authentication and environment variables.
Responsive Design: Ensuring the UI looked great across devices required fine-tuning Tailwind CSS classes.
State Synchronization: Keeping the frontend and backend in sync, especially for real-time features like transcription, was challenging.

This project was a rewarding experience, and we look forward to iterating and improving it further!