StudyFlow AI

Inspiration

As a student, I constantly ran into the same problem: I had tons of notes, but never enough time to actually study them properly. Most of my studying ended up being passive—just rereading or highlighting—which didn’t feel effective or engaging.

I wanted to build something that could take any input—notes, a PDF, or even just a topic—and instantly turn it into a complete study system. The goal was to help students study smarter, not harder, by automatically generating summaries, flashcards, quizzes, and structured study plans.

What it does

StudyFlow AI takes notes, PDFs, or a topic and instantly generates a full study package in seconds.

It includes:

A clean summary of key ideas, definitions, and core concepts
Interactive flashcards with flip animation, shuffle, mastery tracking, and keyboard shortcuts
A multiple-choice quiz with instant scoring and explanations
A personalized day-by-day study plan to help users learn the material efficiently

Instead of spending hours organizing notes, users get everything they need to study in one place, instantly.

How I built it

StudyFlow AI is a full-stack, serverless web app.

On the frontend, I used React 19 with Vite for fast performance and Tailwind CSS for a responsive and modern UI. On the backend, I built a Node.js + Express serverless function deployed on Vercel.

For AI generation, I used the Groq API with the llama-3.3-70b-versatile model because of its speed and free-tier availability. For PDF support, I used pdf-parse to extract text from uploaded files.

The project is deployed using GitHub + Vercel with automatic CI/CD, so every push updates the live app instantly. The entire system is serverless, with no database or authentication—just on-demand AI generation.

Challenges I faced

One of the biggest challenges was choosing the right AI backend. I initially started with OpenAI, then switched to Gemini, but ran into billing limitations. Eventually, I moved to Groq, which turned out to be the best option in terms of speed and reliability.

Deployment was another major challenge. Getting a Vite + React frontend to work smoothly with a serverless Node.js function required careful configuration. I had to resolve module system conflicts between ES modules and CommonJS, and ensure proper SPA routing so page refreshes wouldn’t break the app.

What I learned

This project taught me how to structure a full-stack serverless application and deploy it effectively on Vercel.

I also learned a lot about prompt engineering, especially how to get structured JSON outputs from large language models reliably. On the frontend side, I gained a deeper understanding of React error boundaries and why they are important for production apps.

Another key takeaway was the importance of validating AI-generated output before rendering it to users to ensure consistency and reliability.