Mobile-first learning flow for fixed safety courses. The app walks through each course’s YouTube lessons, pulls transcripts when possible, and generates a 3-question knowledge check after each video.
First, install dependencies and run the development server:
npm install
npm run devOpen http://localhost:3000 with your browser to see the result.
- The app calls
GET /api/transcript?videoId=...to try to auto-fetch a transcript. - If that fails, the quiz still generates using a generic OSHA fallback summary.
- Transcripts are loaded from the markdown files in
public/transcripts/.
- Set
OPENAI_API_KEYin.env.localfor local development. - In Vercel, add the same key in Project Settings → Environment Variables.
- The server route
src/app/api/generate-quiz/route.tscallsgpt-4o-miniand returns exactly 3 MCQs.
- Set
NEXT_PUBLIC_SUPABASE_URLandNEXT_PUBLIC_SUPABASE_ANON_KEYin.env.local. - In Vercel, add the same variables in Project Settings → Environment Variables.
- All pages are protected by a login modal supporting email/password and Google OAuth.
- Password reset uses the Supabase recovery flow and redirects back to the app.
src/lib/quiz.ts contains the deterministic fallback generator. If you want to disable OpenAI, swap the API route to call generateQuiz directly.
src/app/page.tsx→ course start / resumesrc/app/learn/page.tsx→ learning flowsrc/app/review/page.tsx→ review completed lessonssrc/app/api/transcript/route.ts→ transcript fetchsrc/app/api/generate-quiz/route.ts→ quiz generationsrc/lib/course.ts→ fixed course catalog
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.