flashlearn

Open App

Flask Python SQLite HTML/CSS JavaScript App Hub Shared Backend App Hub Shared UI

education flashcards learning spaced-repetition productivity study

Database

FlashLearn 🎴

A smart flashcard learning system with spaced repetition and progress tracking. Perfect for learning anything - languages, programming concepts, medical terms, or any subject you want to master!

Features

• 📚 Deck Management - Create and organize multiple flashcard decks
• 🎯 Study Mode - Interactive flashcard study sessions with flip animations
• 📊 Progress Tracking - Visual statistics showing cards learned, correct/incorrect ratios
• 💾 Persistence - All decks and cards saved to SQLite database
• ✨ Beautiful UI - Modern, responsive interface using App Hub shared UI framework
• 🎨 Visual Feedback - Color-coded cards and statistics
• 📝 Card Reviews - Track which cards you know and which need more practice
• 🚀 Quick Start - Import sample data to get started immediately

Tech Stack

• Backend: Flask with App Hub Common Backend Framework
• Database: SQLite via DatabaseManager
• Frontend: HTML5 + CSS3 + Vanilla JavaScript
• UI Framework: App Hub Shared UI Library
• Process Management: App Hub Process Manager (auto-port allocation)

How to Run

Option 1: Via App Hub Process Manager (Recommended)

1. Open App Hub in your browser 2. Navigate to /processes 3. Find flashlearn and click "Start"

Option 2: Direct Python

cd ~/projects/flashlearn
python3 app.py

The app will automatically allocate a port in the 5100-6000 range.

Usage Guide

Getting Started

1. Import Sample Data - Click "Import Samples" to load pre-built decks for learning: - Programming Basics - Web Development - Python Quick Tips

2. Or Create Your Own Deck - Click "+ New Deck" and give it a name

Managing Decks

• View Decks - See all your decks on the main page
• View Cards - Click "View Cards" to see all cards in a deck
• Add Cards - Click "+ Add Card" to add new flashcards
• Delete Cards - Remove cards you no longer need
• Delete Decks - Delete entire decks (careful - this removes all cards!)

Study Mode

1. Click "🎯 Study Mode" in the navigation 2. Select a deck from the dropdown 3. Click "Start Study Session" 4. Flip the card - Click anywhere on the card to see the answer 5. Rate your answer: - ✓ Correct - You knew it! - ✗ Incorrect - Needs more practice - Skip - Move to next card 6. Complete the session to see your stats!

Tracking Progress

The stats bar shows:

• Total Decks - Number of decks you've created
• Total Cards - Total flashcards across all decks
• Total Reviews - Total number of cards reviewed

Each deck also shows:

• Card count
• Correct reviews
• Incorrect reviews

API Endpoints

Decks

• GET /api/decks - List all decks with stats
• POST /api/decks - Create new deck
• GET /api/decks/ - Get specific deck with cards
• DELETE /api/decks/ - Delete a deck

Cards

• POST /api/decks//cards - Add card to deck
• DELETE /api/cards/ - Delete a card
• POST /api/cards//review - Record card review (correct/incorrect)

Study

• GET /api/study/ - Get cards for study session

Stats

• GET /api/stats - Get overall statistics and recent activity

Utilities

• POST /import-sample-data - Import sample decks

Database Schema

CREATE TABLE flashlearn_decks (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL UNIQUE,
    description TEXT,
    created_at TEXT DEFAULT CURRENT_TIMESTAMP,
    card_count INTEGER DEFAULT 0
);
CREATE TABLE flashlearn_cards (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    deck_id INTEGER NOT NULL,
    question TEXT NOT NULL,
    answer TEXT NOT NULL,
    created_at TEXT DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (deck_id) REFERENCES flashlearn_decks(id)
);
CREATE TABLE flashlearn_reviews (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    card_id INTEGER NOT NULL,
    result TEXT NOT NULL,  -- 'correct' or 'incorrect'
    reviewed_at TEXT DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (card_id) REFERENCES flashlearn_cards(id)
);

App Hub Standards Compliance

✅ Uses AppHubApp base class from shared backend ✅ Uses shared UI CSS framework ✅ Uses shared UI JavaScript utilities ✅ Uses DatabaseManager for persistence ✅ RESTful API design ✅ Auto port allocation via process manager ✅ Valid manifest.yaml

Future Enhancements

• [ ] Advanced spaced repetition algorithm (SM-2)
• [ ] Due date scheduling
• [ ] Card shuffling options
• [ ] Export/import decks as JSON
• [ ] Image support on cards
• [ ] Audio pronunciation
• [ ] Study streaks
• [ ] Daily study goals
• [ ] Card difficulty ratings
• [ ] Search across all cards

Tips for Effective Learning

1. Keep cards simple - One concept per card 2. Use both sides - Make answers concise but complete 3. Study regularly - Consistency beats cramming 4. Review missed cards - Focus on what you don't know 5. Organize by topic - Create separate decks for different subjects

Author

Created by app-developer-agent for the App Hub platform.

License

Part of the App Hub platform.