Vocab Vault

Learn the language of shipping — A mobile-first flashcard app designed to help vibe coders master the technical vocabulary they need to build with AI coding tools.

Overview

Vocab Vault bridges the gap between no-code builders and AI-assisted development by teaching essential technical terms in bite-sized, beginner-friendly ways.

200+ Terms

Comprehensive vocabulary across 12 categories

ELI5 Mode

Toggle super-simple “Explain Like I’m 5” definitions

Mobile-First

Swipe gestures and touch-optimized design

Progress Tracking

Build streaks and unlock achievements

Who It’s For

Beginners
Tool Learners
Transitioning
Communicators

🆕 People using ChatGPT to build but want to learn moreWhen AI generates code, you’ll finally understand what it means:

“Create a React component”
“Deploy to Vercel”
“Initialize a git repo”

Features

Flashcard System

Pick a Category

Choose from 12 categories or study all 200+ terms

Flip to Learn

Tap card to reveal definition, examples, and context

Swipe to Progress

Right: “Got it!” - Mark as learned
Left: Flip card to see definition again

Track Progress

See completion percentage for each category

ELI5 Mode

Toggle between technical and beginner-friendly definitions:

API (Application Programming Interface)

A set of rules and protocols that allows different 
software applications to communicate with each other.

Example: Weather apps use a weather API to fetch 
current temperature data.

Vocabulary Categories

Category	Terms	What It Covers
Foundation	25	MVP, Frontend, Backend, Deploy, etc.
APIs	18	Endpoints, Authentication, REST, GraphQL
Code & Files	22	Repos, Branches, Packages, Dependencies
Cloud	15	Infrastructure, Hosting, Serverless
Git	20	Version control, Commits, Pull Requests
DevOps	16	CI/CD, Environments, Deployment
UI/UX	24	Design principles, Components, States
CSS	19	Styling fundamentals, Flexbox, Grid
AI / Prompts	17	LLMs, Tokens, Prompt Engineering
No-Code	14	Automation, Workflows, Integrations
Money / Business	15	SaaS, MRR, Conversion, Churn
Tools	21	Platform-specific (Lovable, Cursor, etc.)

Progress & Motivation

Daily Streaks

Study daily to build momentum and habit

Category Progress

See completion percentage for each category

Achievements

Unlock rewards as you learn

Study History

Track which terms you’ve mastered

Search

Find any term quickly

Dark Mode

Easy on the eyes for late-night study

Tech Stack

package.json

{
  "name": "vocab-vault-alpha",
  "version": "1.5.0",
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.30.1",
    "framer-motion": "^12.29.0",
    "@capacitor/core": "^8.0.2",
    "@capacitor/preferences": "^8.0.0",
    "lucide-react": "^0.462.0",
    "tailwindcss": "^3.4.17",
    "date-fns": "^3.6.0"
  }
}

Frontend
Mobile
UI/UX
State Management

React 18 for UI
Vite for lightning-fast dev
TypeScript for type safety
Tailwind CSS for styling

Installation & Setup

Clone Repository

cd source/Experiments/Vocab\ Vault

Install Dependencies

npm install

Run Development Server

npm run dev

Opens at http://localhost:5173

Build for Production

npm run build

Mobile Build (Capacitor)

Android
iOS

# Build web assets
npm run build

# Sync to Capacitor
npx cap sync android

# Open in Android Studio
npx cap open android

Then build APK from Android Studio.

# Build web assets
npm run build

# Sync to Capacitor
npx cap sync ios

# Open in Xcode
npx cap open ios

Then build IPA from Xcode.

How to Use

Basic Workflow

Select Study Mode

Study All: Random terms from all categories
Pick Category: Focus on specific area
Continue: Resume where you left off

Study Cards

Tap: Flip card to see definition
Swipe Right: Mark as “Got it!”
Swipe Left: See definition again
Toggle ELI5: Switch to simpler explanation

Build Streak

Study daily to maintain your streak and unlock achievements

Search Terms

Use search bar to quickly find specific terms

Example Session

📋 Category: APIs (18 terms)
🔥 Current Streak: 7 days
✅ Progress: 12/18 (67%)

👉 Card 13/18: REST API

[Tap to flip]

————————————————————

REST API (Representational State Transfer)

An architectural style for building APIs that uses 
HTTP methods (GET, POST, PUT, DELETE) to interact 
with resources.

💡 Example:
GET /api/users/123 → Fetch user data
POST /api/users → Create new user

🔄 [Toggle ELI5]
————————————————————

⬅️ Swipe left: See again
➡️ Swipe right: Got it!

Design Philosophy

Learning Principles

Active Recall

Force retrieval from memory before revealing answer

Spaced Repetition

Review terms at increasing intervals

Progressive Complexity

Start simple (ELI5), progress to technical

Contextual Learning

Real examples from actual tools and workflows

UX Decisions

Mobile-first: Most people learn on their phones
Swipe gestures: Faster than tapping buttons
Dark mode default: Easier on eyes, premium feel
No authentication: Remove friction, start learning immediately
Offline-first: Works without internet connection

Achievements System

🌟 First Steps

Study your first 10 terms

🔥 Week Warrior

Maintain a 7-day streak

🏆 Category Champion

Complete any category 100%

🧠 Brain Vault

Master 100 terms

🚀 Polyglot

Complete all 12 categories

🔥 Unstoppable

30-day streak

Example Terms

Foundation
APIs
Git
Tools

MVP (Minimum Viable Product)
Frontend (Client-side code)
Backend (Server-side code)
Deploy (Make app live)
Localhost (Your computer as a server)

Roadmap

Future enhancements being considered:

Custom Decks

Create your own term collections

Community Sharing

Share and discover decks from others

Audio Pronunciation

Hear how to pronounce technical terms

Contextual Examples

See terms used in actual code

Quiz Mode

Test knowledge with multiple choice

AI Tutor

Ask questions about any term

Contributing

Help expand the vocabulary:

Suggest Terms

Open an issue with terms you’d like to see

Improve Definitions

Submit PRs to clarify or enhance existing terms

Add Examples

Contribute real-world examples for terms

Translate

Help translate to other languages

License & Credits

This application is not available for resale or redistribution.

Testimonials

“Finally! I can understand what developers are saying in meetings.” — Product Manager

“Went from confused to confident in two weeks. Game changer.” — No-code builder transitioning to Cursor

“The ELI5 mode is perfect. Technical definitions often go over my head.” — Beginner learning Lovable

Download Vocab Vault

Start mastering technical vocabulary today

Stop guessing what words mean. Start building with confidence. 🚀

Featured Apps

Tools & Utilities

Experiments

​Vocab Vault

​Overview

200+ Terms

ELI5 Mode

Mobile-First

Progress Tracking

​Who It’s For

​Features

​Flashcard System

​ELI5 Mode

​Vocabulary Categories

​Progress & Motivation

Daily Streaks

Category Progress

Achievements

Study History

Search

Dark Mode

​Tech Stack

​Installation & Setup

​Mobile Build (Capacitor)

​How to Use

​Basic Workflow

​Example Session

​Design Philosophy

​Learning Principles

Active Recall

Spaced Repetition

Progressive Complexity

Contextual Learning

​UX Decisions

​Achievements System

​Example Terms

​Roadmap

Custom Decks

Community Sharing

Audio Pronunciation

Contextual Examples

Quiz Mode

AI Tutor

​Contributing

​License & Credits

​Testimonials

Download Vocab Vault

Build docs developers (and LLMs) love

Vocab Vault

Overview

Who It’s For

Features

Flashcard System

ELI5 Mode

Vocabulary Categories

Progress & Motivation

Tech Stack

Installation & Setup

Mobile Build (Capacitor)

How to Use

Basic Workflow

Example Session

Design Philosophy

Learning Principles

UX Decisions

Achievements System

Example Terms

Roadmap

Contributing

License & Credits

Testimonials