• 

  Chat interface

• 

  Quiz Generation

• 

  Exam Generation

• 

  Grading

STEMFlow

Inspiration

As a student using AI to learn STEM concepts, I noticed a problem: I could understand topics easily but forget them quickly. The issue wasn’t learning itself, but the lack of practice and reinforcement.

STEMFlow was built to solve this by turning explanations into active learning through quizzes and exams.

What it does

STEMFlow is an AI learning assistant that helps users learn and retain concepts.

It works by:

1. Explaining concepts through chat
   
2. Generating quizzes from lessons
   
3. Creating exams for deeper testing
   
4. Providing instant AI grading and feedback
   

Core learning loop: Learn → Practice → Test → Improve

How I built it

STEMFlow is a full-stack web application built using:

• React (frontend)
• Tailwind CSS
• Framer Motion
• Node.js API routes
• OpenRouter API (DeepSeek model)

The AI is designed to generate structured outputs (quizzes and exams) dynamically from lesson content.

Challenges

1. Structuring AI output into consistent JSON for quizzes and exams
   
2. Implementing reliable grading logic
   
3. Managing multiple application states (chat, quiz, exam modes)
   
4. Fixing mobile scrolling and UI behavior issues
   

What I learned

• Full-stack AI application development
  
• Prompt engineering for structured outputs
  
• React state management for complex flows
  
• Designing learning-focused UX
  

Future improvements

1. Spaced repetition system
   
2. User accounts and progress tracking
   
3. Subject-based learning paths
   
4. Voice-based learning support
   
5. Mobile app version

Built With

• api
• deepseek
• framer
• motion
• node.js
• openrouter
• react.js
• tailwind