Project Info
Inspiration
Have you ever finished watching a long lecture, only to forget everything not even an hour later? A large portion of real learning happens through audio and video: YouTube lectures, tutorials, recorded meetings, and long-form explanations that are difficult to study from. Tools like OpenNote can generate strong questions and reflections, and we utilize those tools to deliver a solid feedback system to motivate the user to be constantly paying attention. ThinkBack is our project where we can maximize the students' learning experience. capture what we’re hearing, transcribe it automatically, and convert it into active recall and reflection—without breaking focus. What ThinkBack Does ThinkBack is a web application (designed to pair cleanly with a browser-extension workflow) that: Captures audio from a live source (e.g., a YouTube lecture) Transcribes audio into text in near real time Sends transcript context to OpenNote to generate: Practice questions Journaling / reflection prompts Summaries / structured notes Practice questions Journaling / reflection prompts Summaries / structured notes At its core, ThinkBack follows a simple learning pipeline: audio / video → transcript → questions + reflection The key difference is timing: ThinkBack does not wait until the content ends. It injects recall and reflection while learning is happening. How We Built It System Overview ThinkBack runs as a timed study loop: Start a session (begin capturing audio) Transcribe audio into text (chunk by chunk) Accumulate context (maintain a rolling transcript buffer) Generate outputs (send relevant transcript slices to OpenNote) Repeat on a fixed cadence (e.g., every 30 seconds) This loop transforms passive listening into an active learning process. Audio Capture (Chunked Recording) Instead of recording a single massive audio file, we capture audio in short chunks. Chunking keeps files manageable and enables question generation while the user is still watching or listening. Transcription (Rolling Buffer) Each audio chunk is sent to a Whisper-style transcription API. The returned text is appended to a running transcript buffer, acting as the system’s short-term memory. OpenNote Integration (Active Learning Outputs) Once there is sufficient transcript context, ThinkBack sends prompts to OpenNote for generating practice problems based on what the user has just seen. This step converts raw text into active recall, reflection, and learning artifacts. The Study Loop (Timed Prompts) ThinkBack schedules question generation on a timer so it feels like a live study coach. Instead of binge-watching and hoping learning happens later, the system nudges recall and reflection during the content. Challenges We Faced Figuring out UX When figuring out the user experience, our project went through a lot of trial and error. Things that may have seemed obvious in hindsight weren't implemented. As a result, we spent a lot of time trying to make sure that the user flow would be smooth. Roadmapping the Project Due to not planning out the whole project in the beginning, we ended up splitting the work in a way that wasn't optimal for all of us to work on. Some would work on the backend, but would accidentally lock 2 other developers from making progression. With a steady plan, we could've maximized our productivity. What We Learned Engineering Lessons Timers require state: interval-based systems must respect pause/resume/stop conditions. Chunking is a product decision: it directly impacts learning quality. Async systems must surface progress: without visible states, users assume failure. Product Lessons The most effective tools extend existing systems rather than replacing them. ThinkBack acts as an adapter that unlocks OpenNote for video-first learning. “AI” only feels valuable when it removes friction and reinforces a habit loop: watch → recall → reflect → learn What’s Next If we continue developing ThinkBack, the next upgrades include: Video-only screenshots (capture the video frame, not the entire desktop) Timestamped notes and questions (click a prompt → jump to the source moment) Export formats (Markdown, Anki decks, shareable study docs) Smarter context selection using semantic boundaries instead of fixed time windows Closing ThinkBack started from a single frustration: we wanted powerful question generation on the content we actually learn from—especially YouTube. By combining transcription with a timed recall loop, ThinkBack transforms passive listening into active learning, one prompt at a time.
ThinkBack - Active Recall Learning Platform
Transform lecture videos into intelligent study guides with real-time active recall prompts
Features
Active Recall Learning
- Real-time comprehension questions during video watching
- Spaced repetition prompts to combat the forgetting curve
- Context-aware questions based on lecture content
Intelligent Study Guides
- Automatic generation of comprehensive "Teach Me" notes
- Structured learning objectives and key concepts
- Step-by-step explanations with examples
Modern Web Platform
- Beautiful, responsive gallery interface
- Advanced search and filtering capabilities
- Dark mode with stunning gold animations
- Three.js powered particle effects
Privacy-First Design
- You control when recording starts
- Private by default, yours forever
- Export and sync across devices
Quick Start
Prerequisites
Installation
-
Clone the repository
git clone https://github.com/yourusername/thinkback.git cd thinkback -
Install dependencies
# Install all packages cd app && npm install cd ../web && npm install -
Set up environment variables
⚠️ IMPORTANT: Copy the example files and add your actual API keys:
# Backend environment cp kiro-app/packages/backend/.env.example kiro-app/packages/backend/.env # Web platform environment cp kiro-app/packages/web-platform/.env.example kiro-app/packages/web-platform/.envThen edit the
.envfiles with your actual credentials. See SECURITY.md for details. -
Set up the database
cd app/packages/backend npx prisma db push npm run seed -
Start the applications
# Terminal 1: Backend API cd app/packages/backend npm run dev # Terminal 2: Web Platform cd web npm run dev # Terminal 3: Chrome Extension (optional) cd app/packages/extension npm run build -
Load the Chrome Extension
- Open
chrome://extensions/ - Enable "Developer mode"
- Click "Load unpacked"
- Select
app/packages/extension/dist
- Open
Screenshots
Light Mode Gallery
Dark Mode with Gold Animations
Active Recall in Action
Architecture
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Chrome │ │ Backend API │ │ Web Platform │
│ Extension │◄──►│ (Node.js) │◄──►│ (Next.js) │
│ │ │ │ │ │
│ • Media Capture │ │ • Transcription │ │ • Study Gallery │
│ • Active Recall │ │ • AI Processing │ │ • Dark Mode │
│ • Overlay UI │ │ • Note Generation│ │ • 3D Animations │
└─────────────────┘ └─────────────────┘ └─────────────────┘
Tech Stack
Frontend
- Next.js 15 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Three.js - 3D animations and particle effects
- NextAuth.js - Authentication with Google OAuth
Backend
- Node.js - Runtime environment
- Express.js - Web framework
- Prisma - Database ORM
- Redis - Caching and session management
- PostgreSQL - Primary database
Chrome Extension
- Manifest V3 - Modern extension architecture
- React - UI components
- Vite - Build tooling
- Service Workers - Background processing
AI Services
- OpenAI Whisper - Audio transcription
- Google Cloud Vision - OCR processing
- Opennote API - Question generation and summarization
Usage
For Students
- Install the Extension - Add ThinkBack to Chrome
- Start Learning - Navigate to a YouTube lecture and click "Start Session"
- Active Recall - Answer comprehension questions as they appear
- Review Notes - Access your generated study guides in the web gallery
For Developers
- Fork the Repository - Create your own copy
- Set Up Development - Follow the installation guide
- Make Changes - Implement new features or improvements
- Submit PR - Share your contributions with the community
Development Workflow
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- OpenAI for Whisper transcription
- Google Cloud for Vision API
- Opennote for AI-powered question generation
- Three.js community for amazing 3D graphics
- Next.js team for the incredible framework
Analysis
View
Metric
No commits on this project resolved to a GitHub account.
Technology
- CSSIn code
- ExpressIn code
- HTMLIn code
- JavaScriptIn code
- Next.jsIn code
- OpenAIIn code
- ReactIn code
- RedisIn code
- SQLIn code
- Tailwind CSSIn code
- TypeScriptIn code
- PostgreSQLClaimed
11 of 12 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
860 KB
Source files
147
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
asvinod/thinkback-cruzhacks-2026
180 files · 2.0 MB · @ 9979018
Structure
Interface
17 files · 9%Screens, components and styles rendered to the user.
API & routing
12 files · 7%Request entry points: routes, handlers and controllers.
Application logic
54 files · 30%Domain rules, services and shared utilities.
Data & schema
3 files · 2%Schema definitions, migrations and data access.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript76%
- Markdown18%
- HTML3%
- CSS1%
- SQL1%
- Shell0%
- Other (1)0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
kiro-app/packages/backend/package.json
npm · 25- @prisma/client
- cors
- dotenv
- express
- fast-check
- form-data
- jsonwebtoken
- multer
- openai
- redis
- tiktoken
- ws
- +13 more
kiro-app/packages/extension/package.json
npm · 21- @types/three
- framer-motion
- react
- react-dom
- three
- zustand
- +15 more
kiro-app/packages/web-platform/package.json
npm · 21- katex
- next
- next-auth
- prismjs
- react
- react-dom
- react-markdown
- remark-gfm
- +13 more
web/package.json
npm · 16- @types/three
- lucide-react
- next
- next-auth
- react
- react-dom
- three
- +9 more
kiro-app/package.json
npm · 11 development-only dependencies.
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.