Getting Started with Flashcard Learning App
- Upload all project files to Val Town
- Set the Val type to HTTP Val
- Set entry point to
main.ts
- Save and preview!
- Open the app in your browser
- Enter a username (any name you like - creates a new account)
- Create your first deck (e.g., "Spanish Vocabulary")
- Add some cards:
- Front: "Hello"
- Back: "Hola"
- Click "Study" to start learning!
3. Understanding the Study Mode
When you study:
- Card shows the front (question)
- Try to recall the answer
- Click "Show Answer"
- Rate your recall:
- š“ Again: Didn't remember ā see again tomorrow
- š Hard: Difficult ā see in a few days
- š¢ Good: Normal recall ā see in ~1-2 weeks
- šµ Easy: Perfect recall ā see in a month
The app learns which cards are hard for you and shows them more often!
flashcard/
āāā main.ts # Entry point
āāā README.md # Overview and features
āāā ARCHITECTURE.md # Technical deep-dive
āāā GETTING_STARTED.md # This file
ā
āāā backend/ # Server-side code
ā āāā index.ts # Hono app setup
ā āāā storage.ts # Blob storage
ā āāā routes/ # API endpoints
ā āāā auth.ts # Login
ā āāā decks.ts # Deck CRUD
ā āāā cards.ts # Card CRUD
ā āāā study.ts # Spaced repetition
ā āāā stats.ts # Statistics
ā āāā backup.ts # Export/import
ā
āāā frontend/ # Client-side code
ā āāā index.html # UI layout
ā āāā index.js # App logic
ā
āāā shared/ # Shared code
āāā types.ts # Types + SR algorithm
- ⨠Create unlimited decks and cards
- šÆ Study with proven spaced repetition (SM-2 algorithm)
- š Track your learning progress
- š¾ Backup/restore your data
- š± Works on mobile and desktop
š§ How Spaced Repetition Works
Instead of cramming, this app:
- Shows cards at optimal intervals
- Focuses on cards you're about to forget
- Spaces out cards you know well
- Adapts to your learning speed
Result: Better retention with less time studying!
- Deck: "French Vocabulary"
- Cards: English ā French translations
- Result: Build vocabulary naturally over weeks/months
- Deck: "Anatomy Terms"
- Cards: Term ā Definition + location
- Result: Retain complex terminology long-term
- Deck: "Python Syntax"
- Cards: Concept ā Code example
- Result: Memorize syntax patterns
- Deck: "World Capitals"
- Cards: Country ā Capital city
- Result: Fun trivia learning
Tips for Effective Learning
- ā
Keep cards simple (one concept per card)
- ā
Use clear, concise language
- ā
Add context when needed
- ā Avoid long paragraphs
- ā Don't make cards too easy or too hard
- ā
Study daily (even just 5-10 minutes)
- ā
Be honest with ratings
- ā
Focus on understanding, not just memorization
- ā
Take breaks between sessions
- ā Don't cram before tests (start early!)
- Again (1): Completely forgot or got it wrong
- Hard (2): Struggled but eventually remembered
- Good (3): Recalled with reasonable effort
- Easy (4): Instant, effortless recall
Number of flashcards you've created across all decks.
How many times you've reviewed cards (each rating counts as 1 review).
Cumulative time spent in study sessions (hours and minutes).
Percentage of reviews rated "Good" or "Easy" (higher = better retention).
Detailed log of each study session:
- When you studied
- Which deck
- How long
- How many cards
- Success rate
- Protect against accidental data loss
- Move data between Val Town accounts
- Keep version history
- Share decks with others (JSON format)
- Click "Backup" in navigation
- Click "Download Backup"
- Save the JSON file somewhere safe (e.g., Google Drive, Dropbox)
- Click "Backup" in navigation
- Click "Choose File" and select your backup JSON
- Click "Restore Backup"
- Confirm (ā ļø this replaces current data!)
Cards aren't showing in study mode
- Check if cards are due (new cards are due immediately)
- Make sure the deck has cards
- Try refreshing the page
- Did you use the same username?
- Check if you have a backup file
- Contact Val Town support if needed
- Stats calculate based on completed sessions
- Try logging out and back in
- Check backup file for data integrity
- Check Val Town status
- Try clearing browser cache
- Check browser console for errors
- Modify CSS in
frontend/index.html for styling
- Adjust SM-2 parameters in
shared/types.ts
- Add new features (see README for ideas)
- Export decks as JSON
- Share with friends/classmates
- Contribute improvements
This is an open-source project built for Val Town.
For Val Town platform issues, see Val Town Documentation.
For spaced repetition questions, research the SuperMemo SM-2 algorithm.
Happy Learning! š
Remember: Consistent daily practice beats intense cramming. The algorithm works best when you:
- Study regularly (even 5-10 min/day)
- Rate honestly (don't grade yourself too easily)
- Trust the process (cards will come back at the right time)
Good luck with your learning journey! š