Skip to content

Repository files navigation

WordVault

Master 333 GRE words. One day at a time.

A modern vocabulary learning PWA built for mastering Barron's GRE High-Frequency 333 Words using spaced repetition, visual mnemonics, and interactive flashcards.

Features

  • Spaced Repetition System - Learn words on Day 1, review on Day 3, 7, and 30 until mastered
  • Visual Mnemonics - Each word has a custom illustration depicting its meaning in a relatable scenario
  • Flashcard Review - 3D flip cards with "Got it" / "Need practice" progression
  • Browse & Search - Filter by status (New / Learning / Reviewing / Mastered), search by word or meaning
  • Word Detail Pages - Pronunciation, highlighted definition, explanation, example sentence, and spaced repetition timeline
  • Image Lightbox - Navigate between word images with keyboard arrows or swipe
  • Dashboard - Progress ring, stats, daily streak, and due-today words at a glance
  • Exam Mode - MCQ and fill-in-the-blank with timer, scoring, and history (coming soon)
  • Cloud Sync - Progress syncs across devices via Supabase (works offline with localStorage fallback)
  • Auth - Email/password signup and login

Tech Stack

Layer Technology
Framework Next.js 16 (App Router)
Styling Tailwind CSS v4
Animations Framer Motion
Icons Lucide React
Fonts Space Grotesk + Newsreader
Database Supabase (Postgres + Auth + Storage)
Deployment Vercel

Getting Started

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Add your Supabase URL and anon key

# Run development server
npm run dev

Open http://localhost:3000 to see the app.

Environment Variables

Variable Description
NEXT_PUBLIC_SUPABASE_URL Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY Supabase anonymous/public key

Project Structure

src/
  app/
    page.tsx          # Dashboard
    login/            # Auth page
    words/            # Browse all words
    words/[word]/     # Word detail page
    review/           # Flashcard review mode
  components/
    layout/           # AppShell (sidebar + bottom nav)
    ui/               # StatusBadge, ProgressRing, FlashCard, WordImage, etc.
  data/
    words.ts          # All 333 words with meanings, pronunciations, sentences
  hooks/
    useWordProgress   # Spaced repetition logic (Supabase + localStorage)
    useExamResults    # Exam history (Supabase + localStorage)
  lib/
    supabase.ts       # Supabase client
    auth-context.tsx  # Auth provider
  types/
    index.ts          # Word, WordProgress, ExamResult interfaces

Database Schema

  • profiles - User profiles (auto-created on signup)
  • word_progress - Per-user word learning status, stage, review dates
  • exam_results - Per-user exam scores, time, wrong answers
  • word-images (Storage) - Word illustration images

All tables use Row Level Security - users can only access their own data.

License

MIT

About

Master 333 GRE words with spaced repetition, visual mnemonics, and etymology breakdowns. Built with Next.js, Tailwind CSS, Framer Motion & Supabase.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages