https://github.com/codingwcal/js-sensei
Interactive JavaScript learning tool with quizzes, flashcards, AI tutor, and gamified belt progression. Built with Next.js, TailwindCSS, and Supabase.
https://github.com/codingwcal/js-sensei
ai gemini gemini-ai nextjs postgresql supabase supabase-auth tailwindcss typescript vercel
Last synced: 3 months ago
JSON representation
Interactive JavaScript learning tool with quizzes, flashcards, AI tutor, and gamified belt progression. Built with Next.js, TailwindCSS, and Supabase.
- Host: GitHub
- URL: https://github.com/codingwcal/js-sensei
- Owner: CodingWCal
- License: mit
- Created: 2025-09-21T07:13:55.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-21T09:06:20.000Z (9 months ago)
- Last Synced: 2025-09-21T09:14:49.873Z (9 months ago)
- Topics: ai, gemini, gemini-ai, nextjs, postgresql, supabase, supabase-auth, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage:
- Size: 197 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⛩️ JS Sensei
JS Sensei is an interactive learning dojo for JavaScript fundamentals.
Users can practice through quizzes, flashcards, and guided lessons while earning points and leveling up from white belt to black belt. The app features an AI tutor for personalized explanations, gamified progress tracking, and Supabase-powered authentication and persistence. Designed with Next.js 14, TailwindCSS, and modern tooling, it demonstrates full-stack skills in state management, database integration, and interactive UI/UX design
Train your JavaScript fundamentals in our interactive dojo.
Level up from white belt to black belt with practice quizzes, flashcards, and one-on-one tutelage from our AI Sensei.
---
## 🚀 Live Demo
[**View Live App on Vercel**](https://js-sensei.vercel.app/)
*(Signin with Github + Demo mode available — explore topics without an account!)*
---
## 🛠 Tech Stack
- Front End:
- [Next.js 14 (App Router)](https://nextjs.org/) + React + TypeScript
- [Tailwind CSS](https://tailwindcss.com/)
- Back End:
- [Supabase](https://supabase.com/) (Auth + Postgres for XP/Belts)
- Google Gemini API (AI Integrated Learning Hints + Tutor)
- Deployment/DevOps:
- [Vercel](https://vercel.com/) (hosting & deployment)
---
## 📸 Screenshots
Landing Page + Sign In with Github
Topics Page
Learn Page
Quiz Page
---
## ✨ Features
- **Learning Topic Coverage**
- Variables & Types
- Arrays & Objects
- Loops & Conditionals
- Functions
- Must-Know Methods (map, filter, reduce)
- Async/Await
- APIs & Event Loop
- JS Intro
- **Diagnostic Test** → Quickly find your weakest topic
- **Learn Pages**
- Explanations, code examples
- “Show Hint” and “Explain Differently” buttons
- Ask Tutor — AI-powered Q&A
- **Quizzes** → Per-topic multiple choice, mastery tracking
- **Flashcards** → Review built-in cards or add your own (+XP)
- **Gamification**
- XP system with belt ranks (🥋 White → Black)
- Toast notifications on actions (e.g., +20 XP for adding flashcards)
- **Authentication**
- GitHub sign-in with Supabase
- Demo mode (no account needed)
---
## 🏗 Project Structure
```
web/
├── app/ # Next.js App Router pages
│ ├── page.tsx # Landing page
│ ├── topics/ # Topics overview
│ ├── learn/ # Learn page with AI tutor + hints
│ ├── quiz/ # Quiz pages
│ ├── flashcards/ # Flashcards (browse + add)
│ └── api/ # API routes (e.g., /api/hint)
├── components/ # React components (Navbar, DemoMode, AuthButtons, etc.)
├── hooks/ # Custom React hooks (e.g., useLocalMastery)
├── lib/ # Utility functions (score.ts, mastery.ts, supabaseClient.ts)
├── data/ # Static data (questions.json)
├── public/ # Static assets (dojo.jpg, screenshots, icons)
├── styles/ # Global styles (globals.css, Tailwind config)
├── __tests__/ # Vitest test files
├── package.json
├── tsconfig.json
└── README.md
```
---
## ⚙️ Local Development
1. clone repo
```
git clone
cd js-sensei/web
```
2. install dependencies
```
npm install
```
3. copy env file and fill it
```
cp .env.local.example .env.local
```
4. run dev server
```
npm run dev
```
## 🔑 Environment Variables
Create a .env.local in /web with:
- [x] NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
- [x] SUPABASE_ANON_KEY=your_supabase_anon_key
- [x] GEMINI_API_KEY=your_gemini_api_key
- [x] NEXT_PUBLIC_SITE_URL=http://localhost:3000
Note:
Add your Vercel URL to Supabase Auth “Site URL” + “Redirect URLs”.
For GitHub sign-in, callback URL must be:
- [x] https://.supabase.co/auth/v1/callback
## 🚀 Deployment
- Push repo to GitHub.
- Import into Vercel.
- Root Directory: web
- Framework: Next.js
- Add env vars (same as .env.local).
After first deploy:
- Add production URL to Supabase Auth settings.
- Update NEXT_PUBLIC_SITE_URL to the production domain in Vercel settings.
### Redeploy and enjoy 🎉
## 📌 Roadmap & Future Updates
- [ ] Progress bar for XP → next belt
- [ ] Confetti on belt rank-up
- [ ] Streaks and daily challenges
- [ ] Dark mode dojo theme
- [ ] PWA support
## 💡 Inspiration (Teaching Takeaways)
- [The Programming Podcast with Leon Noel & Danny Thompson - JavaScript Roadmap](https://www.youtube.com/watch?v=U4CbEV1QfOs)
- [MIT Bloom Two Sigma Problem](https://web.mit.edu/5.95/readings/bloom-two-sigma.pdf)
## 📄 License: MIT