# Project export: StimStudy
This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.
## Project metadata
- Hackathon: CruzHacks 2025
- Tagline: Personalized educational tik tok videos! animated visual explanations presented by your favorite celebrities and TV characters
- Devpost: https://devpost.com/software/stimstudy
- GitHub: https://github.com/hgupta1703/stimstudy_frontend
- Demo: https://github.com/georgesono21/stimstudy_backend
- Video: https://www.youtube.com/embed/cQwdWnmS3Jc?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Result: winner (Education Hacks)
- Team: 4 GitHub contributor(s) — george (5 commits), Colton Kirsten (4 commits), harshil8 (1 commits), hgupta1703 (1 commits)
## Devpost submission (written by the team)
### Inspiration
We asked ourselves, “What if studying could be as stimulating as scrolling through social media?” That question inspired StimStudy — an educational platform that blends AI-generated study plans with character narration and the engagement of entertainment apps to make learning both focused and fun. We wanted to build a tool that doesn't fight for attention — it works with how students already consume content, turning distractions into learning opportunities.
### What it does
StimStudy generates a personalized feed of short form educational content. This is perfect for the student who wishes they could watch a personalized tik tok video explaining the concept they just keep getting stuck on! For example: “teach me about the Pythagorean Theorem, I can solve for c but not a or b” Our platform will generate a few short-form pieces of content that describe the concept. Each video is complete with animated slides, and someone such as Peter Griffin, SpongeBob, or Joe Biden explaining the Pythagorean Theorem, with slang familiar and beloved by genZ! This all happens in an intuitive, easy to understand interface in which the user can refine a study plan, choose the character, and choose the background video. Once they click ‘Generate’ our AI and Video rendering system will get to work concurrently generating these videos. Once the videos are generated the user is brought to a familiar intuitive scrollable content viewer, and are able to ask additional clarifying questions about the concept to Gemini in the ‘Comments’ section!
### How we built it
We used React.js to build a smooth, responsive frontend interface that allows users to input prompts, choose characters, and watch their personalized study videos. For the backend, we built a Flask (Python) server that handles AI generation, video processing, and audio syncing. To power the generative AI experience, we integrated Google's Gemini API, which we used to create personalized study plans, refine user input, and generate educational scripts that are later turned into videos. This combination of technologies helped us deliver a fast, engaging, and intelligent user experience from end to end.
### Challenges we ran into
One challenge we faced was combining all the parts — AI content, voice narration, animations, and video — into one smooth experience. We had to make sure the AI-generated content felt fun and engaging, not boring like traditional study tools. It was also tricky to make the whole process run quickly, since generating everything one by one took too long. To fix that, we worked on running tasks in parallel to speed things up and make it more efficient.
### Accomplishments we're proud of
Throughout this project, our team overcame multiple challenges to deliver a truly technically impressive AI video generation pipeline. Here are some key moments that stand out to us: Concurrent Video Compositing Pipeline This video pipeline takes as an input HTML files, audio files, video files, and character sprites and combines them in the following way: Render HTML slides into videos Animate character sprite changes that play dynamically with the slides Combine all slides, character animations, and background videos into a final polished product Do this all concurrently so multiple videos can be created simultaneously! Smooth front end experience Our front end is a powerful abstraction on top of our video creation engine, allowing users to easily generate and refine study plans, choose the character and background video, and generate the final library of videos in just a few clicks. Gemini-Powered HTML slide animations We feel we took full advantage of the advanced capabilities of Gemini with our animated slide generation. Gemini 2.5 Flash can generate extremely detailed slides with surprisingly intuitive animations of various concepts.
### What we learned
We learned how to use generative AI to create content that’s not just accurate, but also fun and engaging for modern learners. We figured out how to build a fully integrated video pipeline that combines HTML-rendered slides, voiceovers, sprite animations, and background videos into one cohesive and visually appealing product. We gained hands-on experience with parallel processing to speed up video generation and learned how to manage concurrency in a way that keeps the system running smoothly. On the frontend, we focused on building an intuitive user experience that walks users through the process of creating content, from selecting a narrator and background to refining study plans and viewing the final videos. We also learned how to simplify complex technology by hiding all the heavy lifting behind a clean and interactive interface. This project challenged us to think both technically and creatively, helping us build something that is powerful behind the scenes while being easy and enjoyable to use.
### What's next
We want to deploy the app to mobile app stores so more students can easily access it. We plan to let users view and explore content created by others, creating a community of shared learning. We’ll add a history/log feature so users can revisit their past study plans and video creations. We want to add more voice characters to give users more fun and personalized narration options. We also plan to add more background environments and character animations to make the videos even more engaging.
## README (from the GitHub repository)
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
## Detected evidence (automated analysis)
Indexed codebase: 21 recognized source files, 70 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- Google Gemini (technology) — claimed on Devpost, not found in the code
- Node.js (technology) — claimed on Devpost, not found in the code
- Python (language) — claimed on Devpost, not found in the code
## Codebase structure (from repository index)
### Files (27 of 27)
```
.DS_Store
.gitignore
app/globals.css
app/layout.tsx
app/page.tsx
components.json
components/theme-provider.tsx
components/ui/avatar.tsx
components/ui/button.tsx
components/ui/card.tsx
components/ui/input.tsx
components/ui/textarea.tsx
lib/utils.ts
next-env.d.ts
next.config.ts
options.ts
package.json
postcss.config.mjs
prev/chat.html
prev/index.html
prev/README.md
prev/script.js
prev/styles.css
prev/video.html
README.md
tailwind.config.ts
tsconfig.json
```
### Dependencies
- package.json: @radix-ui/react-avatar@^1.1.4, @radix-ui/react-slot@^1.2.0, @shadcn/ui@^0.0.4, @tailwindcss/postcss@^4, @tailwindcss/typography@^0.5.16, @types/node@^20, @types/react@^19.1.1, @types/react-dom@^19.1.2, class-variance-authority@^0.7.1, clsx@^2.1.1, cors@^2.8.5, lucide-react@^0.487.0, next@15.3.0, next-themes@^0.4.6, react@^19.0.0, react-dom@^19.0.0, react-markdown@^10.1.0, tailwind-merge@^3.2.0, tailwindcss@^4, tailwindcss-animate@^1.0.7, tw-animate-css@^1.2.5, typescript@^5
### Recent commits (newest first)
- back button fix
- scroll to top MAJOR UPDATE
- videos working
- update
- added chat feature
- progress
- photos added
- mobile friendly
- curr
- frontend
- Initial commit
## Key source files (fetched from GitHub, selected and truncated for size)
### package.json
```
{
"name": "my-study-plan-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8080 --turbopack",
"build": "next build",
"start": "next start -p 8080",
"lint": "next lint"
},
"dependencies": {
"@radix-ui/react-avatar": "^1.1.4",
"@radix-ui/react-slot": "^1.2.0",
"@tailwindcss/typography": "^0.5.16",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cors": "^2.8.5",
"lucide-react": "^0.487.0",
"next": "15.3.0",
"next-themes": "^0.4.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-markdown": "^10.1.0",
"tailwind-merge": "^3.2.0",
"tw-animate-css": "^1.2.5"
},
"devDependencies": {
"@shadcn/ui": "^0.0.4",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19.1.1",
"@types/react-dom": "^19.1.2",
"tailwindcss": "^4",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5"
}
}
```
### app/layout.tsx
```typescript
import React from "react";
import "./globals.css";
import { Inter } from "next/font/google";
import { ThemeProvider } from "@/components/theme-provider";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Study Plan Generator",
description: "Interactive learning platform",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
### next.config.ts
```typescript
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;
```
### next-env.d.ts
```typescript
///
///
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
```
### options.ts
```typescript
// Character options for narration
export const characters = [
{
id: "spongebob",
name: "SpongeBob",
avatar: "/assets/spongebob.png",
},
{
id: "biden",
name: "Joe Biden",
avatar: "/assets/joebiden.png",
},
{
id: "peter",
name: "Peter Griffin",
avatar: "/assets/petergriffin.png",
},
];
// Background options
export const backgrounds = [
{
id: "minecraft",
name: "Minecraft Parkour",
image: "/assets/parkour.png",
description: "Learn while watching Minecraft parkour gameplay",
},
{
id: "construction",
name: "Construction",
image: "/assets/construction.png",
description: "Building and construction scenes as your background",
},
{
id: "soap",
name: "Soap Cutting",
image: "/assets/soapcutting.png",
description: "Relaxing soap cutting videos in the background",
},
];
```
### tailwind.config.ts
```typescript
import { type Config } from "tailwindcss";
const config = {
darkMode: ["class", "dark"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
borderColor: {
DEFAULT: "hsl(var(--border))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;
export default config;
```
### lib/utils.ts
```typescript
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
```
### prev/video.html
```html
Video Page
Video will be here soon!
Feature coming soon 🚧
```
### components/theme-provider.tsx
```typescript
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
export function ThemeProvider({
children,
...props
}: React.ComponentProps) {
return {children};
}
```
### prev/index.html
```html
Learn Something New
What do you want to learn?
```
[9 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]