A modern, intelligent flashcard application for language learning and vocabulary building. Features cloud synchronization, AI-powered definitions, and an intuitive study interface.

Choose your learning path - Start immediately with local storage or sign in for cloud sync across devices.

Try before you commit - Full functionality with local storage, perfect for testing and quick vocabulary sessions.

Organize your vocabulary - Complete flashcard management with auto-definitions, pronunciations, and examples.

Smart learning experience - Distraction-free study interface with history tracking and keyboard shortcuts.

• Dual Storage Options: Local storage for trial or cloud sync for persistence
• Auto-Definitions: Automatic word definitions, pronunciations, and examples
• Smart Study Mode: History tracking, random selection, and progress monitoring
• Mobile Optimized: Touch gestures and responsive design
• Audio Support: Text-to-speech pronunciation with multiple voice options

• Secure Login: Clerk authentication with social login support
• Cloud Storage: Real-time sync with Supabase PostgreSQL database
• Data Migration: Seamless transition from local to cloud storage
• Cross-Device: Access your flashcards anywhere, anytime

• Clean Interface: Minimalist design focused on learning
• Keyboard Shortcuts: Space (flip), arrows (navigate), escape (exit)
• Touch Gestures: Swipe navigation for mobile devices
• Loading States: Smooth transitions and feedback

• Next.js 15: React framework with SSR and optimized performance
• React 18: Latest features with concurrent rendering
• TypeScript 5: Full type safety with strict configuration
• TailwindCSS 3: Utility-first styling with responsive design

• Clerk: Authentication and user management
• Supabase: PostgreSQL database with real-time capabilities
• Dictionary APIs: Free Dictionary API integration
• Vercel: Deployment and hosting platform

• ESLint: Code linting with Next.js and React rules
• PostCSS: CSS processing and optimization
• Lucide Icons: Modern icon library

Node.js >= 18.0.0
npm >= 8.0.0

# Clone the repository
git clone <your-repo-url>
cd flash-card-app

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your API keys

# Start development server
npm run dev

Create a .env.local file with:

# Authentication (Required for cloud features)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# Database (Required for cloud features)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# AI Features (Optional)
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

1. Visit the app → Choose between "Try Instantly" or "Sign In & Sync"
2. Trial Mode → Start immediately with local storage
3. Cloud Mode → Sign in for cross-device synchronization

1. Add Cards → Type a word and get automatic definitions
2. Manage Collection → Edit, delete, or add personal notes
3. Start Studying → Use keyboard shortcuts or touch gestures
4. Track Progress → Review history and focus on difficult words

• Space → Flip flashcard
• ← → → Navigate between cards
• Escape → Exit study mode
• Enter → Random next card

• Tap → Flip flashcard
• Swipe Left/Right → Navigate cards
• Tap "Back" → Exit study mode

flash-card-app/
├── docs/screenshots/       # App screenshots
├── src/
│   ├── components/         # React components
│   │   ├── AuthButton.tsx  # Authentication UI
│   │   ├── StudyMode.tsx   # Study interface
│   │   ├── ManagementMode.tsx # Card management
│   │   └── LocalApp.tsx    # Trial mode app
│   ├── hooks/              # Custom React hooks
│   │   ├── useFlashcardsCloud.ts # Cloud data
│   │   ├── useFlashcardsLocal.ts # Local data
│   │   └── useSettings.ts  # User preferences
│   ├── pages/              # Next.js pages
│   │   ├── index.tsx       # Landing page
│   │   ├── manage.tsx      # Management page
│   │   ├── study.tsx       # Study page
│   │   └── local.tsx       # Trial mode page
│   ├── services/           # External API integrations
│   │   ├── dictionaryApi.ts # Word definitions
│   │   └── supabaseService.ts # Database operations
│   └── types/              # TypeScript definitions
├── next.config.js          # Next.js configuration
├── tailwind.config.js      # TailwindCSS configuration
└── package.json           # Dependencies and scripts

1. Quick Entry → Type new vocabulary words
2. Rich Context → Get definitions, pronunciations, examples
3. Personal Notes → Add translations or memory aids
4. Spaced Practice → Random card selection for retention
5. Progress Tracking → Monitor learning history

• Modern React Patterns → Hooks, context, custom hooks
• TypeScript Best Practices → Strict typing, interface design
• Next.js Features → SSR, API routes, optimization
• External API Integration → Dictionary APIs, authentication
• Database Operations → Supabase integration, real-time sync

• No registration required for trial mode
• One-click sign-in with Google, GitHub, or email
• Automatic data migration from trial to cloud

• Auto-complete definitions from dictionary APIs
• Pronunciation support with text-to-speech
• Personal notes for custom learning aids
• Study history to track progress

• Fast loading with Next.js optimizations
• Responsive design for all screen sizes
• Offline capability for core features
• Smooth animations and transitions

The app is optimized for deployment on Vercel:

1. Connect your GitHub repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically on every push to main branch

Set these in your Vercel dashboard:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY

• Autocomplete from existing cards
• Word suggestions during typing
• Recently used words quick-add

• Complete Gemini AI integration
• Context-aware examples
• Learning difficulty assessment

• Spaced repetition algorithm
• Multiple deck organization
• Progress analytics dashboard

• React Native implementation
• Offline-first architecture
• Push notifications for study reminders

• ✅ Build time: < 30 seconds
• ✅ Bundle size: Optimized with Next.js
• ✅ Loading speed: < 2 seconds on 3G
• ✅ Type safety: 100% TypeScript coverage

• ✅ ESLint: Zero linting errors
• ✅ TypeScript: Strict mode enabled
• ✅ Responsive: Mobile-first design
• ✅ Accessible: ARIA labels and keyboard navigation

This is a personal learning project showcasing:

• Modern React development with Next.js
• TypeScript best practices
• Clean architecture patterns
• User-centered design principles

MIT License - Feel free to use this project for learning and reference.

🎓 Learning Focus: Vocabulary building efficiency and modern web development
🚀 Status: Core features complete, actively adding enhancements
🌟 Next: Enhanced input features and AI integration