{"id":31424850,"url":"https://github.com/codingwcal/js-sensei","last_synced_at":"2026-04-07T22:31:33.154Z","repository":{"id":315862234,"uuid":"1061071384","full_name":"CodingWCal/JS-Sensei","owner":"CodingWCal","description":"Interactive JavaScript learning tool with quizzes, flashcards, AI tutor, and gamified belt progression. Built with Next.js, TailwindCSS, and Supabase.","archived":false,"fork":false,"pushed_at":"2025-09-21T09:06:20.000Z","size":202,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-21T09:14:49.873Z","etag":null,"topics":["ai","gemini","gemini-ai","nextjs","postgresql","supabase","supabase-auth","tailwindcss","typescript","vercel"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodingWCal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-21T07:13:55.000Z","updated_at":"2025-09-21T09:06:23.000Z","dependencies_parsed_at":"2025-09-21T09:15:14.053Z","dependency_job_id":"a0d3ae28-59c1-4387-8a92-de761728a697","html_url":"https://github.com/CodingWCal/JS-Sensei","commit_stats":null,"previous_names":["codingwcal/js-sensei"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/CodingWCal/JS-Sensei","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWCal%2FJS-Sensei","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWCal%2FJS-Sensei/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWCal%2FJS-Sensei/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWCal%2FJS-Sensei/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodingWCal","download_url":"https://codeload.github.com/CodingWCal/JS-Sensei/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWCal%2FJS-Sensei/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277627409,"owners_count":25849860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-30T02:00:09.208Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","gemini","gemini-ai","nextjs","postgresql","supabase","supabase-auth","tailwindcss","typescript","vercel"],"created_at":"2025-09-30T04:06:34.919Z","updated_at":"2026-04-07T22:31:33.147Z","avatar_url":"https://github.com/CodingWCal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⛩️ JS Sensei\n\nJS Sensei is an interactive learning dojo for JavaScript fundamentals.\nUsers 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\n\nTrain your JavaScript fundamentals in our interactive dojo.\n\nLevel up from white belt to black belt with practice quizzes, flashcards, and one-on-one tutelage from our AI Sensei.\n\n---\n\n## 🚀 Live Demo\n\n[**View Live App on Vercel**](https://js-sensei.vercel.app/)\n\n*(Signin with Github + Demo mode available — explore topics without an account!)*\n\n---\n\n## 🛠 Tech Stack\n\n- Front End:\n  - [Next.js 14 (App Router)](https://nextjs.org/) + React + TypeScript\n  - [Tailwind CSS](https://tailwindcss.com/)\n- Back End:\n  - [Supabase](https://supabase.com/) (Auth + Postgres for XP/Belts)\n  - Google Gemini API (AI Integrated Learning Hints + Tutor)\n- Deployment/DevOps:\n  - [Vercel](https://vercel.com/) (hosting \u0026 deployment)\n\n---\n\n## 📸 Screenshots\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/CodingWCal/JS-Sensei/blob/main/JS-SENSEI-LANDINGPAGE.png\" width=\"650\" alt=\"JS Sensei Landing\"/\u003e\n  \u003cbr/\u003e\u003cem\u003eLanding Page + Sign In with Github\u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/CodingWCal/JS-Sensei/blob/main/JS-SENSEI-TOPICS.png\" width=\"650\" alt=\"JS Sensei Topics\"/\u003e\n  \u003cbr/\u003e\u003cem\u003eTopics Page\u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/CodingWCal/JS-Sensei/blob/main/JS-SENSEI-LEARN.png\" width=\"650\" alt=\"JS Sensei Learn\"/\u003e\n  \u003cbr/\u003e\u003cem\u003eLearn Page\u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/CodingWCal/JS-Sensei/blob/main/JS-SENSEI-QUIZ.png\" width=\"650\" alt=\"JS Sensei Quiz\"/\u003e\n  \u003cbr/\u003e\u003cem\u003eQuiz Page\u003c/em\u003e\n\u003c/p\u003e\n\n---\n\n## ✨ Features\n\n- **Learning Topic Coverage**\n    - Variables \u0026 Types\n    - Arrays \u0026 Objects\n    - Loops \u0026 Conditionals\n    - Functions\n    - Must-Know Methods (map, filter, reduce)\n    - Async/Await\n    - APIs \u0026 Event Loop\n    - JS Intro\n- **Diagnostic Test** → Quickly find your weakest topic\n- **Learn Pages**\n    - Explanations, code examples\n    - “Show Hint” and “Explain Differently” buttons\n    - Ask Tutor — AI-powered Q\u0026A\n- **Quizzes** → Per-topic multiple choice, mastery tracking\n- **Flashcards** → Review built-in cards or add your own (+XP)\n- **Gamification**\n    - XP system with belt ranks (🥋 White → Black)\n    - Toast notifications on actions (e.g., +20 XP for adding flashcards)\n- **Authentication**\n    - GitHub sign-in with Supabase\n    - Demo mode (no account needed)\n\n---\n\n## 🏗 Project Structure\n\n```\nweb/\n├── app/                   # Next.js App Router pages\n│   ├── page.tsx           # Landing page\n│   ├── topics/            # Topics overview\n│   ├── learn/             # Learn page with AI tutor + hints\n│   ├── quiz/              # Quiz pages\n│   ├── flashcards/        # Flashcards (browse + add)\n│   └── api/               # API routes (e.g., /api/hint)\n├── components/            # React components (Navbar, DemoMode, AuthButtons, etc.)\n├── hooks/                 # Custom React hooks (e.g., useLocalMastery)\n├── lib/                   # Utility functions (score.ts, mastery.ts, supabaseClient.ts)\n├── data/                  # Static data (questions.json)\n├── public/                # Static assets (dojo.jpg, screenshots, icons)\n├── styles/                # Global styles (globals.css, Tailwind config)\n├── __tests__/             # Vitest test files\n├── package.json\n├── tsconfig.json\n└── README.md\n\n```\n\n---\n\n## ⚙️ Local Development\n\n1. clone repo\n\n```\ngit clone \u003chttps://github.com/your-username/js-sensei.git\u003e\ncd js-sensei/web\n```\n\n2. install dependencies\n\n```\nnpm install\n```\n\n3. copy env file and fill it\n\n```\ncp .env.local.example .env.local\n```\n\n4. run dev server\n\n```\nnpm run dev\n```\n\n## 🔑 Environment Variables\n\nCreate a .env.local in /web with:\n\n- [x]  NEXT_PUBLIC_SUPABASE_URL=your_supabase_url\n- [x]  SUPABASE_ANON_KEY=your_supabase_anon_key\n- [x]  GEMINI_API_KEY=your_gemini_api_key\n- [x]  NEXT_PUBLIC_SITE_URL=http://localhost:3000\n\nNote:\nAdd your Vercel URL to Supabase Auth “Site URL” + “Redirect URLs”.\nFor GitHub sign-in, callback URL must be:\n\n- [x]  https://\u003cyour-project-ref\u003e.supabase.co/auth/v1/callback\n\n## 🚀 Deployment\n\n- Push repo to GitHub.\n- Import into Vercel.\n- Root Directory: web\n- Framework: Next.js\n- Add env vars (same as .env.local).\n\nAfter first deploy:\n\n- Add production URL to Supabase Auth settings.\n- Update NEXT_PUBLIC_SITE_URL to the production domain in Vercel settings.\n\n### Redeploy and enjoy 🎉\n\n## 📌 Roadmap \u0026 Future Updates\n\n- [ ]  Progress bar for XP → next belt\n- [ ]  Confetti on belt rank-up\n- [ ]  Streaks and daily challenges\n- [ ]  Dark mode dojo theme\n- [ ]  PWA support\n\n## 💡 Inspiration (Teaching Takeaways)\n  - [The Programming Podcast with Leon Noel \u0026 Danny Thompson - JavaScript Roadmap](https://www.youtube.com/watch?v=U4CbEV1QfOs)\n  - [MIT Bloom Two Sigma Problem](https://web.mit.edu/5.95/readings/bloom-two-sigma.pdf)\n\n## 📄 License: MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwcal%2Fjs-sensei","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingwcal%2Fjs-sensei","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwcal%2Fjs-sensei/lists"}