Made a Spooky Study Tool!

I wanted a study tool that was completely free. No paywalls, no limits on features, no "upgrade to pro" popups. So I built DeepTerm an open-source app that turns PDFs into cards and reviewers using AI or add it manually.

This is the story of how I built it from scratch using Kiro, from the first design to the final deployment.

Why I Built This

My girlfriend needed a reviewer maker for her studies. Every tool we tried either had limits or wanted money for basic features. Gizmo has generation limits. Other tools are clunky or expensive.

I thought: why not build one myself and make it free for everyone?

What DeepTerm Does

You upload a PDF or paste text. The AI extracts key terms and definitions automatically. Then you can study with:

• Flashcards with flip animations and spaced repetition
• Learn mode that tracks your progress through stages
• Match game for memorization practice
• Practice tests based on what you mastered

Cards move through stages: new, learning, review, mastered. This is spaced repetition - it helps you remember things longer.

But the real magic is in the gamification: XP system, achievements, Pomodoro timer, ambient sounds, export features, and a spooky Halloween theme with a flashlight study mode.

Planning and Design in Figma

I started by sketching the user flow. Upload PDF → AI generates cards → Study modes → Track progress. Simple.

Then I designed the UI in Figma. I wanted it clean but fun. Two themes: normal (light and warm) and spooky (dark purple Halloween vibes).

The key screens I designed:

• Landing page with hero section and features
• Dashboard with materials list
• Learn mode with progress tracking

Setting Up the Foundation with Kiro

I opened Kiro and started a new Next.js project. But first, I created steering rules to optimize my workflow:

# My Custom Steering Rules
- Do not make markdown files unless asked
- Use controlPwshProcess instead of executePwsh for all commands
- Read multiple files in parallel with readMultipleFiles
- Follow Next.js 16 App Router patterns
- Use TypeScript strict mode
- Mobile-first responsive design

These rules made Kiro much faster and more accurate. The parallel file reading alone saved time.

Then I set up the tech stack:

• Next.js 16 with App Router
• TypeScript in strict mode
• Tailwind CSS for styling
• Supabase for database and auth
• Google Gemini for AI generation
• Zustand for state management

Kiro helped me configure everything. It created the folder structure, set up TypeScript configs, and installed all dependencies.

Converting Figma to Code with MCP

This is where Figma MCP became a game changer. I uploaded my Figma designs to Kiro and said "convert this to code."

Kiro analyzed the design and generated:

• Landing page with hero section, features grid, and footer
• Responsive layout with Tailwind classes
• Component structure following my steering rules
• TypeScript interfaces for props

What would have taken me hours of manual work happened in minutes. The generated code was clean, responsive, and followed best practices.

I did this for each major page:

1. Landing page
2. Dashboard layout
3. Flashcard interface
4. Study modes
5. Pomodoro timer
6. Settings pages

Each time, Kiro converted the Figma design to near pixel-perfect React components.

I spent extra time on the spooky theme. Dark backgrounds, purple accents, Halloween-inspired text. The flashlight effect was just a crazy idea I com up with - a dark overlay with a radial gradient following the cursor.

Database Schema and Supabase Setup

I needed to store users, materials, flashcards, and progress data. I let Kiro designed the database schema.

Setting up Supabase was tricky at first. I struggled with SQL functions. That's when I installed Supabase Powers in Kiro.

Instantly, Kiro understood my schema. It helped me:

• Create SQL functions for rate limiting
• Debug complex queries

What took me hours of trial and error before was fixed in minutes with Supabase Powers.

AI Integration with Google Gemini

The core feature is AI generation. Users upload PDFs, and Gemini extracts flashcards or reviewer content.

I set up multiple API keys for rotation to handle rate limits. Kiro helped me build:

// API route for flashcard generation
export async function POST(request: NextRequest) {
  // 1. Parse PDF or text input
  // 2. Check user rate limits (10/day)
  // 3. Call Gemini with structured prompts
  // 4. Parse AI response into cards
  // 5. Save to database
  // 6. Return formatted response
}

The tricky part was prompt engineering. I needed Gemini to return consistent JSON with terms and definitions. Vibe mode helped me iterate on prompts until the output was reliable.

I also added a reviewer maker that organizes content into categories with color coding. Different extraction modes: full definitions, sentence summaries, or just keywords.

Study Modes and Spaced Repetition

Each study mode needed different logic:

Flashcards: Simple flip animation with next/previous navigation. Cards show term first, flip to definition.

Learn Mode: Adaptive algorithm that shows cards based on mastery level. New cards appear more often, mastered cards less often.

Match Game: Drag and drop interface matching terms to definitions. Timer and scoring system.

Practice Test: Mixed question types based on card difficulty. Multiple choice, fill-in-the-blank, true/false.

The spaced repetition algorithm was complex. Cards have states (new, learning, review, mastered) and intervals that increase based on how well you know them.

Kiro helped me implement the spaced repetition algorithm. It tracks when to show each card next based on your performance.

The Spooky Theme and Flashlight Effect

This was the fun part. I wanted something unique that no other study app had.

The spooky theme was straightforward - dark backgrounds, purple colors, Halloween-inspired text throughout the UI.

But the flashlight effect was tricky. I needed:

• Dark overlay covering the entire screen
• Radial gradient that follows mouse/touch
• Smooth animation without performance issues
• Works on mobile and desktop

The result is mystical! Turn on spooky mode and flashlight effect, and you study in complete darkness with only a circle of light around your cursor while studying. It's surprisingly immersive.

Gamification and Productivity Features

I added XP and achievements to make studying more engaging:

• Earn XP for completing cards, study sessions, streaks
• Level up from Novice to Grandmaster
• Unlock achievements for milestones
• Track study streaks and statistics

The Pomodoro timer was another major feature:

• Customizable work/break intervals
• Task list with reminders
• Ambient sounds (rain, cafe, nature)
• Background image upload on local storage
• Fullscreen focus mode

Kiro Vibe Mode helped me build the timer logic with proper state management. The notification system works across the entire app.

Export and Sharing Features

Users wanted to export their materials and share them with classmates.

Export features:

• PDF generation with jsPDF (two-column layout)
• DOCX export with proper formatting
• Clean, printable designs

Sharing system:

• Generate unique share codes
• Public pages that don't require login
• Copy-to-library feature for shared materials
• Privacy controls (active/inactive links)

The sharing logic was complex because of security. I needed public access without exposing private data. Supabase RLS policies handled this perfectly.

Testing and Optimization

I used Vitest for testing and fast-check for property-based tests. Kiro helped me set up automated testing with hooks:

• Run tests after every code change
• Check builds before deployment
• Lint code automatically
• Property-based testing for edge cases

The hooks saved me time because tests ran in the background. I got instant feedback if something broke.

Performance optimization:

• Server components where possible
• Dynamic imports for heavy features
• Image optimization with WebP
• Lazy loading for non-critical components

The Results

DeepTerm launched with all features working:

• AI-powered flashcard and reviewer maker
• Four study modes with spaced repetition
• Spooky theme with flashlight effect
• Pomodoro timer and productivity features
• Export and sharing capabilities
• Gamification with XP and achievements

The app is completely free and open source. No limits, no paywalls, no "upgrade to pro" nonsense.

What I Learned About Kiro and MCP

This project taught me how powerful Kiro can be with the right setup:

Figma MCP: Converting designs to code saved me days of work. What used to be tedious manual translation became instant generation.

Supabase Powers: Database debugging that used to take hours was fixed in minutes. Kiro understood my schema and wrote perfect SQL.

Context7 MCP: Access to up-to-date documentation was crucial for Next.js 16 features that weren't in the training data.

Custom Steering Rules: Small optimizations like parallel file reading and background processes made a huge difference in speed.

Agent Hooks: Automated testing and builds meant I could focus on features instead of manual tasks.

Try It Yourself

DeepTerm is live at Deepterm. Upload a PDF and see the AI generate flashcards in seconds. Try the spooky theme and flashlight mode - it's surprisingly fun to study in the dark.

The code is on GitHub if you want to host your own version or contribute features.

Building this taught me that with the right tools (Kiro + MCP + Hooks), you can build anything. The only limit is your imagination.

kiro