Study-Flow

Compete with friends, join study groups, and track your progress to become a top student.

Comment

FAST LINKS (if you're a judge, click these links):

Live Demo

Kiro Config

Category:

Costume Contest|

Inspiration

It all started with a simple question: "What if studying could feel less like a chore and more like an adventure?"

As students ourselves (or former students who remember the struggle), we knew the pain of staring at textbooks, losing track of time, and feeling isolated during long study sessions. We wanted to build something that would make studying engaging, social, and dare we say... fun.

Then Halloween season hit, and we thought: why not make it spooky too? 👻

Enter StudyFlow AI — a study management platform where ghosts float across your dashboard, sand drips through an hourglass timer, and an AI mentor named MentorMind helps you conquer your coursework.

What it does

StudyFlow AI is an enterprise-grade study management platform that transforms how students learn:

Core Features:

  • Smart Study Timer — Pomodoro-style sessions with a beautiful animated hourglass. Watch the sand drip as you study and earn coins (1 coin/second) to spend on AI assistance.
  • MentorMind AI Assistant — Your personal AI tutor powered by Claude Sonnet 4.5 with real-time streaming responses. Ask questions, get explanations, and receive personalized study guidance.
  • Study Groups — Collaborate with friends in real-time workspaces with messaging and leaderboards.
  • Task Management — Kanban-style todo board with drag-and-drop, priorities, and status tracking.
  • Performance Analytics — Beautiful charts showing your study patterns and progress over time.
  • Calendar & Spotify Integration — Sync with Google Calendar and play your favorite study playlists.

The Halloween Twist:

  • Floating ghost particles drift across every page
  • Interactive spooky ghosts that react to your mouse
  • Dripping text effects on headings
  • A gorgeous 3D skeleton model on the landing page
  • Gothic fonts for that extra atmospheric touch

How we built it

This is where Kiro became our secret weapon. 🚀

We used Kiro's spec-driven development approach to build StudyFlow AI systematically. Instead of diving into code chaos, we created structured specifications for each feature:

Our Kiro Specs:

  1. anthropic-ai-migration — Migrated from Heroku Inference to pure Anthropic Claude with real-time streaming
  2. threejs-hero-model — Replaced Unicorn Studio with a React Three Fiber 3D skeleton model
  3. halloween-dashboard-theme — Added floating particles, spooky ghosts, and atmospheric effects
  4. halloween-hourglass-timer — Built an animated SVG hourglass with dripping sand
  5. mini-cute-ghost-hero — Created adorable floating ghosts for the landing page
  6. gothic-font-integration — Integrated medieval-style fonts for the Halloween aesthetic

Each spec followed Kiro's structured format:

  • Requirements — User stories with detailed acceptance criteria
  • Design — Architecture diagrams, component interfaces, and correctness properties
  • Tasks — Step-by-step implementation checklist

Kiro Steering Files: We created three steering files that guided every interaction:

  • product.md — Product overview and feature descriptions
  • structure.md — Project organization and file naming conventions
  • tech.md — Technology stack and common commands

Kiro Hooks: We even built a custom hook called ghost-particles-checker that automatically ensures every main page includes our Halloween effects. When you edit a page, Kiro checks if the floating particles and interactive ghost components are present — if not, it adds them automatically!

Tech Stack:

  • Frontend: Next.js 14, TypeScript, Tailwind CSS, Shadcn/ui
  • Backend: Convex (real-time serverless database)
  • AI: Anthropic Claude Sonnet 4.5 with SSE streaming
  • 3D: React Three Fiber with @react-three/drei
  • Auth: Convex Auth with GitHub/Google OAuth

Challenges we ran into

1. The Streaming Saga Migrating from Heroku's MCP-based inference to pure Anthropic streaming was tricky. We had to implement Server-Sent Events (SSE) from scratch, handle partial responses gracefully, and ensure the UI updated smoothly as tokens arrived. Kiro's design docs helped us map out the architecture before writing a single line of code.

2. Three.js + Next.js = SSR Nightmares Three.js doesn't play nice with server-side rendering. We had to use dynamic imports with ssr: false, implement proper resource cleanup to prevent memory leaks, and create fallback components for mobile devices. The spec's correctness properties helped us catch edge cases we would have missed.

3. Performance vs. Spookiness We wanted ALL the Halloween effects, but too many floating particles would tank performance. We implemented responsive particle counts (15 on desktop, 8 on mobile) and used CSS animations with will-change for GPU acceleration. The design doc's property-based testing approach helped us verify our limits.

4. The Hourglass Physics Making sand look like it's actually flowing through an hourglass is harder than it sounds. We used multiple SVG paths with staggered animations, gradient fills for depth, and splash particles at the bottom. The result? Pure visual satisfaction.

Accomplishments that we're proud of

  • Real-time AI streaming that feels instant and responsive
  • A 3D skeleton model that loads gracefully with proper fallbacks
  • Floating ghost particles that don't murder your CPU
  • An animated hourglass that makes you actually want to watch time pass
  • A coin-based economy that encourages actual studying before using AI
  • Comprehensive Kiro specs that document every feature decision
  • A custom Kiro hook that enforces our Halloween theme automatically

What we learned

Spec-driven development is a game-changer. Writing requirements and design docs before coding felt slow at first, but it saved us countless hours of refactoring. When we hit implementation snags, we could refer back to our specs and remember why we made certain decisions.

Kiro's steering files are incredibly powerful. Having consistent guidance about our tech stack, project structure, and product vision meant every AI interaction was contextually aware. No more explaining "we use Convex" for the hundredth time.

Property-based testing catches bugs you'd never think of. By defining correctness properties like "particle count never exceeds 20" and "all particles use valid Halloween colors," we caught edge cases that traditional unit tests would miss.

Halloween themes make everything better. Seriously. Adding floating ghosts and dripping text transformed a standard study app into something people actually want to use.

What's next for StudyFlow AI

  • More AI models — Add GPT-4, Gemini, and local LLM support
  • Mobile app — React Native version with offline study tracking
  • Gamification 2.0 — Achievements, streaks, and seasonal themes (Christmas ghosts, anyone?)
  • Group video study sessions — Study together with friends in real-time
  • AI-generated study plans — Let MentorMind create personalized curricula
  • More Kiro specs — We're hooked on spec-driven development now!

Built with 👻 and Kiro for the Kiro Hackathon

Built With

Share this project:

Updates