Voca Web

A vocabulary learning application with study mode and cross-platform support.

Live: https://voca.ysw.kr

Features

• 📚 Word dictionary with definitions from Free Dictionary API
• 🗣️ IPA pronunciation with CMU Dictionary fallback (134,000+ words)
• 🔤 Pronunciation helper (IPA → Korean hangul / Japanese katakana / English respelling)
• 📊 Vocabulary management with search and filter
• 🎴 Study mode with flashcards
• 📈 Learning statistics and progress tracking
• 🌐 Multi-language UI (Korean, English, Japanese, Chinese, Traditional Chinese)
• 📱 iOS & Android apps via Capacitor
• 📱 Home screen widgets (iOS & Android)
• 🔐 JWT authentication with secure API
• 🌙 Dark mode support

Quick Start with Docker

Prerequisites

• Docker
• Docker Compose

Production Deployment

# Copy environment file and configure
cp .env.example .env
# Edit .env with your settings (DATABASE_URL, JWT_SECRET, ADMIN_PASSWORD)

# Build and run
docker compose up -d

# The app will be available at http://localhost:7024

Environment Variables

Variable	Description	Required
DATABASE_URL	PostgreSQL connection string	Yes
JWT_SECRET	Secret for JWT signing	Yes
ADMIN_PASSWORD	Admin dashboard password	Yes
NODE_ENV	Environment (development/production)	No

Local Development

Prerequisites

• Node.js 20+
• PostgreSQL
• npm

Setup

# Install dependencies
npm install

# Set up environment
cp .env.example .env
# Edit .env with your database credentials

# Run database migrations
npx prisma migrate dev

# Start development server
npm run dev

The app will be available at http://localhost:7024

Mobile Development (Capacitor)

# Build for mobile
npm run build:static

# Sync to native projects
npm run cap:sync

# Open in Xcode/Android Studio
npm run cap:open:ios
npm run cap:open:android

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: TailwindCSS
• Database: PostgreSQL with Prisma ORM
• i18n: next-intl
• API: Free Dictionary API + CMU Pronouncing Dictionary
• Mobile: Capacitor (iOS/Android)
• Deployment: Docker & Docker Compose

Data Sources

• Word Definitions: Free Dictionary API
• Pronunciations: CMU Pronouncing Dictionary (134,000+ words)
• IPA Conversion: Custom ARPAbet to IPA converter
• Korean Phonetics: ipa-hangul library

Project Structure

.
├── src/
│   ├── app/              # Next.js app router pages
│   │   ├── api/          # API routes
│   │   └── admin/        # Admin dashboard
│   ├── components/       # React components
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utilities and helpers
│   └── i18n/             # Internationalization config
├── prisma/               # Database schema
├── messages/             # i18n translation files
├── ios/                  # iOS native project
├── android/              # Android native project
├── docker-compose.yml    # Docker config
└── Dockerfile            # Docker image

Security Features

• JWT-based authentication
• Rate limiting on sensitive endpoints
• XSS protection on user inputs
• Docker container hardening (read-only filesystem, no-new-privileges)
• Resource limits on containers

License

MIT