EduSpark

AI-powered Chrome extension that turns your browser sidebar into a full study assistant , chat, quiz, and summarize any web content.

---

Features

Cornell Notes Generator

• Generate structured Cornell-style study notes from any webpage
• Two-column layout: Cue Column (keywords/questions) and Notes Column (explanations)
• 3-tier importance labeling: Key Concept (high), Supporting (medium), Detail (low)
• Inline editing of cues and notes with auto-save
• Review Summary section for quick test prep
• Export notes as Markdown table
• Persisted per-URL — notes are saved and restored when revisiting pages
• Regenerate or load existing notes with one click

AI Chat Assistant

• Stream AI responses with real-time Markdown rendering
• Send any page's content as context for contextual Q&A
• Collapsible context panel with character count and manual editing
• Chat history auto-saved and restored across sessions
• Copy individual AI responses or clear the entire conversation

Quiz Generator (4-phase workflow)

• Generate — Choose topic (auto-fetch from current page or manual entry), number of questions (1–25+ preset buttons), difficulty (Easy/Medium/Hard), and question types (Multiple Choice, True/False, Essay)
• Take — Navigate questions with progress bar, select or type answers, submit for scoring
• Result — Circular score display with pass/fail assessment, wrong-answer preview, perfect-score banner
• Review — Full answer review with correct/incorrect indicators

Content Summarization

• Summarize any webpage or pasted text
• 9 combinations: Short (3 key points) / Medium (1 paragraph) / Detailed (full summary) × Paragraph / Bullet Point / Key Concept
• Streaming responses with real-time updates
• Copy and regenerate with one click

Page Content Extractor

• Automatically reads current tab content, stripped of scripts, nav, and ads
• Displays word/character count and page URL
• Editable before sending to Chat or generating Quiz/Summary
• Inject fallback via scripting API when content script isn't available

Authentication & Security

• Register, Login, Forgot Password with OTP verification, and Reset Password
• 6-digit OTP input with auto-advance and paste support
• Password requirements (8+ chars, uppercase, number)
• "Remember Me" and 7-day session token expiry
• Rate-limited endpoints (10 req/15min auth, 60 req/15min global)
• bcrypt password hashing (12 rounds)

Settings Panel

• Dark mode toggle with Moon/Sun icons
• About Us, Privacy Policy, Vision, Contact Us pages

Extension Integration

• Chrome Side Panel (full-featured) and Popup (quick access)
• Toolbar icon click opens side panel
• Text selection triggers via mouseup listener
• Works on all URLs (including chrome:// pages via scripting fallback)
• Chrome storage for token and preference persistence

---

Tech Stack

Layer	Technology
Frontend	React 19, TypeScript, Vite, Tailwind CSS, Lucide Icons
Backend	Express.js, TypeScript, OpenRouter API, Nodemailer
Database	Supabase (PostgreSQL)
Auth	bcrypt, custom session tokens, OTP-based password reset

---

Project Structure

studysidebar/
├── backend/
│ ├── src/
│ │ ├── routes/ # auth.ts, chat.ts, note.ts, quiz.ts, summary.ts
│ │ ├── utils/ # auth.ts, openrouter.ts, email.ts
│ │ ├── db/client.ts # Supabase client
│ │ └── index.ts # Express server
│ ├── .env.example
│ └── package.json
├── extension/
│ ├── src/
│ │ ├── components/ # App, Auth, Chat, Notes, Quiz*, Summary, Settings, Theme
│ │ ├── utils/ # api.ts (backend client), storage.ts (Chrome storage)
│ │ ├── popup.html/.tsx # Popup entry point
│ │ ├── sidepanel.html/.tsx # Side panel entry point
│ │ ├── background.ts # Service worker
│ │ ├── content.ts # Content script
│ │ ├── manifest.json # Chrome manifest
│ │ └── styles.css # Custom styling (glass3d, animations)
│ ├── vite.config.ts
│ └── package.json
├── package.json # Root monorepo orchestrator
├── pnpm-workspace.yaml
├── QUICKSTART.md
└── README.md

---

Quick Start

Prerequisites

• Node.js 18+
• pnpm
• Supabase project (free tier)
• OpenRouter API key

Setup

# Install dependencies
pnpm install
# Configure environment
cp backend/.env.example backend/.env
# Edit backend/.env with your Supabase URL, service role key, and OpenRouter key# Set up database tables in Supabase SQL Editor# (see Database Schema below)# Build extension
pnpm --filter ./extension build

Run

# Start backend (port 3001)
pnpm dev:backend

Load Extension in Chrome

1. Open chrome://extensions
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select extension/dist

Or run both simultaneously

pnpm dev

---

API Endpoints

Base URL: http://localhost:3001/api

Auth (no token required)

Method	Endpoint	Description
POST	/auth/register	Create account
POST	/auth/login	Login
POST	/auth/forgot-password	Request OTP
POST	/auth/reset-password	Reset password with OTP

Protected (Bearer token required)

Method	Endpoint	Description
POST	/chat/message	Send message (SSE streaming)
GET	/chat/history	Get chat history
POST	/quiz/generate	Generate quiz
POST	/quiz/submit	Submit answers and get score
GET	/quiz/list	List user's quizzes
POST	/notes/generate	Generate Cornell notes
PATCH	/notes/:id	Update notes (inline edit)
GET	/notes/list	List user's notes
GET	/notes/page/:pageUrl	Get notes for a specific page
POST	/summary/generate	Generate summary (SSE streaming)
GET	/summary/list	List user's summaries

---

Scripts

Command	Description
pnpm dev	Run backend + extension concurrently
pnpm build	Build all packages
pnpm dev:backend	Start backend only (tsx watch)
pnpm --filter ./extension build	Build extension only

---

Troubleshooting

• Extension not loading? Run pnpm --filter ./extension build, check extension/dist exists, refresh chrome://extensions
• Backend connection error? Is pnpm dev:backend running on port 3001?
• AI not responding? Verify OPENROUTER_API_KEY is set and has credits
• Auth fails? Check Supabase credentials and that tables exist in the SQL Editor
• Port in use? Kill the process: npx kill-port 3001

---

License

---

From passive reader to active master.