EduFlow AI

Landing Page
Where the magic happens: our flow canvas!
Dashboard and Projects View
Flow Canvas Initializer

Inspiration

We've all been there: staring at a 2-hour lecture recording at 11 PM, knowing we need to make flashcards and study guides but dreading the hours of manual work ahead. As students ourselves, we realized that AI could do more than just answer questions; it could actually build our study materials for us. We wanted to create something that didn't just save time, but fundamentally transformed how students prepare for exams. EduFlow AI was born from countless late nights and one simple question: "What if studying could be automated?"

What it does

EduFlow AI transforms any study material (lecture videos, PDFs, slides, even other students' notes) into flashcards, quizzes, summaries, and presentation slides in minutes. Here's the magic: users drag and drop AI agents onto a visual canvas, connect them to their uploaded materials, and watch as the agents generate study content automatically. Need a harder quiz? Just tell the agent. Want flashcards based on your quiz questions? Route the quiz output into the flashcard agent. It integrates directly with Quercus (our university's LMS) so you can import course materials with one click. No more rewatching lectures or spending hours on study prep. EduFlow handles the grunt work so students can focus on actually learning.

How we built it

We built EduFlow with a modern full-stack architecture:

Frontend: Next.js 16 and React 19 with React Flow powering the drag-and-drop canvas interface
Backend: Node.js with Supabase (PostgreSQL) and Prisma ORM handling database management
AI Pipeline: Gemini and OpenRouter APIs for content generation, DigitalOcean's Gradient AI for enhanced processing, ElevenLabs for audio/video transcription
Authentication: Auth0 for secure user login and Quercus OAuth integration
File Processing: Custom parsers using pdf-parse, mammoth (for Word docs), and jszip to handle various file formats
Deployment: Vercel for hosting with UploadThing managing file storage

The canvas system uses @xyflow/react to create the node-based interface where each AI agent appears as a draggable card. We built a routing system that lets outputs from one agent (like quiz questions) flow as inputs to another (like the flashcard generator), enabling true agentic workflows.

Challenges we ran into

Authentication Hurdles: Our journey began with an unexpected challenge: Auth0 integration. We spent hours battling version compatibility issues since Auth0 was not compatible with Next.js 16, meaning we had to completely refactor our authentication system multiple times. The constant import errors and deprecated methods made for a sluggish start that tested our motivation. Pushing through this initial barrier taught us valuable lessons about dependency management and reading documentation thoroughly.

Our biggest nightmare wasn't the code; it was security. Midway through the hackathon, we accidentally committed our API keys to GitHub. Not once, but twice on different laptops. We had to roll back commits, rotate all our keys, and set up GitGuardian for external security auditing, all while racing against the 24-hour clock. It was stressful, but it taught us the critical importance of proper secrets management and .env hygiene in production applications.

On the technical side, getting the agent chaining logic to work smoothly proved tricky. We needed to ensure data could flow between agents without breaking, handle different file formats reliably, and make the AI generation fast enough that users wouldn't abandon the app while waiting.

Accomplishments that we're proud of

We shipped a fully functional product in 24 hours. From landing page to authentication, from Quercus integration to AI-powered content generation: everything works. Users can sign up, import materials, drag agents onto a canvas, generate study materials, refine them with custom prompts, and download everything. The fact that we built a complete, end-to-end application that actually solves a real problem (and that we'd use ourselves!) is something we're incredibly proud of.

We're particularly proud of the UX. The canvas interface isn't just functional; it's intuitive and even enjoyable to use. Watching AI agents generate your study materials in real-time feels genuinely magical.

What we learned

Security is non-negotiable: One mistake with API keys can cascade into hours of damage control. Proper environment variable management and automated scanning tools are essential.
Scope matters: We initially planned features like an AI chatbot, content previews, and sharing functionality, but realized that focusing on the core experience (upload, generate, download) delivered more value than feature bloat.
AI orchestration is hard: Building a system where multiple AI agents work together seamlessly requires careful prompt engineering, error handling, and state management.
Students need this: Every time we demoed it to friends, they immediately asked "when can I use this?" We validated real demand for AI-powered study tools.
Patience with dependencies: Sometimes the biggest challenges aren't algorithmic but infrastructural. Wrestling with Auth0 taught us that thorough documentation review and version management are just as critical as writing good code.

What's next for EduFlow AI

Enhanced collaboration: Allow students to share flows and study materials with classmates
AI tutor chatbot: Interactive Q&A with the uploaded materials for deeper understanding
Content preview: Let users review generated materials before downloading
More agent types: Concept maps, practice problems, essay outlines, and more
Mobile app: Study on the go with a native mobile experience
Analytics dashboard: Track which study methods work best per user
Integration expansion: Canvas, Blackboard, Moodle, and other LMS platforms