${escapeHtml(deck.name)}

${escapeHtml(deck.description)}

\n ${deckCards.length} cards · ${dueCards.length} due\n

\n \n 🎯 Study\n \n \n 📝 Edit\n \n \n ✏️\n \n \n 🗑️\n \n

\n `;\n }).join(\"\");\n\n // Reload user data to get updated card info\n userData = await apiCall(\"/api/auth/login\", {\n method: \"POST\",\n body: JSON.stringify({ username: currentUser }),\n });\n } catch (error) {\n console.error(\"Failed to load decks:\", error);\n alert(\"Failed to load decks: \" + error.message);\n }\n}\n\nfunction createDeck() {\n currentDeckId = null;\n document.getElementById(\"deck-editor-title\").textContent = \"Create Deck\";\n document.getElementById(\"deck-name-input\").value = \"\";\n document.getElementById(\"deck-description-input\").value = \"\";\n showAppInnerView(\"deck-editor-view\");\n}\n\nasync function editDeck(deckId) {\n console.log(\"✏️ Edit deck clicked:\", deckId);\n currentDeckId = deckId;\n const deck = userData.decks.find((d) => d.id === deckId);\n console.log(\"Found deck:\", deck);\n\n if (!deck) {\n console.warn(\"⚠️ Deck not found!\");\n return;\n }\n\n document.getElementById(\"deck-editor-title\").textContent = \"Edit Deck\";\n document.getElementById(\"deck-name-input\").value = deck.name;\n document.getElementById(\"deck-description-input\").value = deck.description;\n showAppInnerView(\"deck-editor-view\");\n console.log(\"✅ Deck editor shown\");\n}\n\nasync function saveDeck() {\n const name = document.getElementById(\"deck-name-input\").value.trim();\n const description = document.getElementById(\"deck-description-input\").value.trim();\n\n if (!name) {\n alert(\"Please enter a deck name\");\n return;\n }\n\n try {\n if (currentDeckId) {\n // Update existing deck\n await apiCall(`/api/decks/${currentDeckId}`, {\n method: \"PUT\",\n body: JSON.stringify({ name, description }),\n });\n } else {\n // Create new deck\n await apiCall(\"/api/decks\", {\n method: \"POST\",\n body: JSON.stringify({ name, description }),\n });\n }\n\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n } catch (error) {\n alert(\"Failed to save deck: \" + error.message);\n }\n}\n\nasync function deleteDeck(deckId) {\n const deck = userData.decks.find((d) => d.id === deckId);\n if (!deck) return;\n\n if (!confirm(`Delete deck \"${deck.name}\" and all its cards?`)) return;\n\n try {\n await apiCall(`/api/decks/${deckId}`, { method: \"DELETE\" });\n loadDecks();\n } catch (error) {\n alert(\"Failed to delete deck: \" + error.message);\n }\n}\n\n// Card Management\nasync function viewCards(deckId) {\n currentDeckId = deckId;\n const deck = userData.decks.find((d) => d.id === deckId);\n if (!deck) return;\n\n document.getElementById(\"card-manager-deck-name\").textContent = deck.name;\n document.getElementById(\"card-editor-form\").style.display = \"none\";\n showAppInnerView(\"card-manager-view\");\n await loadCards();\n}\n\nasync function loadCards() {\n try {\n const cards = await apiCall(`/api/cards/deck/${currentDeckId}`);\n const cardList = document.getElementById(\"card-list\");\n const noCardsMsg = document.getElementById(\"no-cards-message\");\n\n if (cards.length === 0) {\n cardList.innerHTML = \"\";\n noCardsMsg.style.display = \"block\";\n return;\n }\n\n noCardsMsg.style.display = \"none\";\n cardList.innerHTML = cards.map((card) => {\n const nextReview = new Date(card.nextReview);\n const isDue = nextReview <= new Date();\n const dueText = isDue ? \"Due now\" : `Due ${formatDate(nextReview)}`;\n\n return `\n

\n \n

Front:

${renderMarkdown(card.front)}

Back:

${renderMarkdown(card.back)}

\n \n ✏️\n \n \n 🗑️\n \n

\n Reviewed ${card.reviewCount} times · ${dueText}\n

\n\n \n

💡 Tip: You can use Markdown!

\n ${escapeHtml(card.front)}\n ${escapeHtml(card.back)}\n

\n \n 💾 Save\n \n \n ✖️ Cancel\n \n

\n `;\n }).join(\"\");\n\n // Update userData cards\n const index = userData.decks.findIndex((d) => d.id === currentDeckId);\n if (index !== -1) {\n userData.cards = userData.cards.filter((c) => c.deckId !== currentDeckId).concat(cards);\n }\n } catch (error) {\n console.error(\"Failed to load cards:\", error);\n alert(\"Failed to load cards: \" + error.message);\n }\n}\n\nfunction addCard() {\n currentCardId = null;\n document.getElementById(\"card-editor-title\").textContent = \"Add Card\";\n document.getElementById(\"card-front-input\").value = \"\";\n document.getElementById(\"card-back-input\").value = \"\";\n document.getElementById(\"card-editor-form\").style.display = \"block\";\n\n // Scroll to the form\n document.getElementById(\"card-editor-form\").scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n}\n\n// Inline card editing\nfunction editCardInline(cardId) {\n console.log(\"✏️ Inline edit card:\", cardId);\n // Hide view mode, show edit mode\n document.getElementById(`card-view-${cardId}`).style.display = \"none\";\n document.getElementById(`card-edit-${cardId}`).style.display = \"block\";\n}\n\nfunction cancelCardInline(cardId) {\n console.log(\"✖️ Cancel inline edit:\", cardId);\n // Show view mode, hide edit mode\n document.getElementById(`card-view-${cardId}`).style.display = \"block\";\n document.getElementById(`card-edit-${cardId}`).style.display = \"none\";\n}\n\nasync function saveCardInline(cardId) {\n console.log(\"💾 Save inline edit:\", cardId);\n const front = document.getElementById(`card-front-edit-${cardId}`).value.trim();\n const back = document.getElementById(`card-back-edit-${cardId}`).value.trim();\n\n if (!front || !back) {\n alert(\"Please fill in both front and back\");\n return;\n }\n\n try {\n await apiCall(`/api/cards/${cardId}`, {\n method: \"PUT\",\n body: JSON.stringify({ front, back }),\n });\n\n // Reload cards to show updated content\n await loadCards();\n } catch (error) {\n alert(\"Failed to save card: \" + error.message);\n }\n}\n\n// Keep old editCard for compatibility (now unused)\nasync function editCard(cardId) {\n console.log(\"✏️ Edit card clicked:\", cardId);\n currentCardId = cardId;\n const card = userData.cards.find((c) => c.id === cardId);\n console.log(\"Found card:\", card);\n\n if (!card) {\n console.warn(\"⚠️ Card not found!\");\n return;\n }\n\n document.getElementById(\"card-editor-title\").textContent = \"Edit Card\";\n document.getElementById(\"card-front-input\").value = card.front;\n document.getElementById(\"card-back-input\").value = card.back;\n document.getElementById(\"card-editor-form\").style.display = \"block\";\n console.log(\"✅ Card editor form shown\");\n\n // Scroll to the form\n document.getElementById(\"card-editor-form\").scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n}\n\nasync function saveCard() {\n const front = document.getElementById(\"card-front-input\").value.trim();\n const back = document.getElementById(\"card-back-input\").value.trim();\n\n if (!front || !back) {\n alert(\"Please fill in both front and back\");\n return;\n }\n\n try {\n if (currentCardId) {\n // Update existing card\n await apiCall(`/api/cards/${currentCardId}`, {\n method: \"PUT\",\n body: JSON.stringify({ front, back }),\n });\n } else {\n // Create new card\n await apiCall(\"/api/cards\", {\n method: \"POST\",\n body: JSON.stringify({ deckId: currentDeckId, front, back }),\n });\n }\n\n document.getElementById(\"card-editor-form\").style.display = \"none\";\n await loadCards();\n } catch (error) {\n alert(\"Failed to save card: \" + error.message);\n }\n}\n\nfunction cancelCard() {\n document.getElementById(\"card-editor-form\").style.display = \"none\";\n}\n\nasync function deleteCard(cardId) {\n if (!confirm(\"Delete this card?\")) return;\n\n try {\n await apiCall(`/api/cards/${cardId}`, { method: \"DELETE\" });\n await loadCards();\n } catch (error) {\n alert(\"Failed to delete card: \" + error.message);\n }\n}\n\n// Study Mode\nasync function studyDeck(deckId) {\n currentDeckId = deckId;\n const deck = userData.decks.find((d) => d.id === deckId);\n if (!deck) return;\n\n try {\n studyCards = await apiCall(`/api/study/${deckId}`);\n\n if (studyCards.length === 0) {\n alert(\"No cards due for review!\");\n return;\n }\n\n document.getElementById(\"study-deck-name\").textContent = deck.name;\n currentStudyIndex = 0;\n sessionStartTime = Date.now();\n sessionCorrectCount = 0;\n\n showAppInnerView(\"study-view\");\n showStudyCard();\n startStudyTimer();\n } catch (error) {\n alert(\"Failed to start study session: \" + error.message);\n }\n}\n\nfunction showStudyCard() {\n if (currentStudyIndex >= studyCards.length) {\n completeStudySession();\n return;\n }\n\n const card = studyCards[currentStudyIndex];\n document.getElementById(\"card-front-text\").innerHTML = renderMarkdown(card.front);\n document.getElementById(\"card-front-text\").classList.add(\"markdown-content\");\n document.getElementById(\"card-back-text\").innerHTML = renderMarkdown(card.back);\n document.getElementById(\"card-back-text\").classList.add(\"markdown-content\");\n document.getElementById(\"study-progress-current\").textContent = currentStudyIndex + 1;\n document.getElementById(\"study-progress-total\").textContent = studyCards.length;\n\n // Reset card flip\n document.getElementById(\"card-inner\").classList.remove(\"flipped\");\n document.getElementById(\"study-flip-controls\").style.display = \"block\";\n document.getElementById(\"study-rating-controls\").style.display = \"none\";\n\n // Adjust card height based on content\n adjustCardHeight();\n}\n\nfunction adjustCardHeight() {\n // Wait for content to render\n setTimeout(() => {\n const cardInner = document.getElementById(\"card-inner\");\n const cardFront = cardInner.querySelector(\".card-front\");\n const cardBack = cardInner.querySelector(\".card-back\");\n\n if (cardFront && cardBack) {\n const frontHeight = cardFront.scrollHeight;\n const backHeight = cardBack.scrollHeight;\n const maxHeight = Math.max(frontHeight, backHeight);\n\n // Set the height to accommodate the taller side\n cardInner.style.height = maxHeight + \"px\";\n }\n }, 100);\n}\n\nfunction flipCard() {\n document.getElementById(\"card-inner\").classList.add(\"flipped\");\n document.getElementById(\"study-flip-controls\").style.display = \"none\";\n document.getElementById(\"study-rating-controls\").style.display = \"grid\";\n\n // Adjust height when flipping (back might be taller)\n adjustCardHeight();\n}\n\nasync function rateCard(rating) {\n const card = studyCards[currentStudyIndex];\n\n try {\n await apiCall(\"/api/study/review\", {\n method: \"POST\",\n body: JSON.stringify({ cardId: card.id, rating }),\n });\n\n // Track correct answers (Good or Easy)\n if (rating === Rating.Good || rating === Rating.Easy) {\n sessionCorrectCount++;\n }\n\n currentStudyIndex++;\n showStudyCard();\n } catch (error) {\n alert(\"Failed to record review: \" + error.message);\n }\n}\n\nfunction startStudyTimer() {\n if (studyTimerInterval) clearInterval(studyTimerInterval);\n\n studyTimerInterval = setInterval(() => {\n const elapsed = Math.floor((Date.now() - sessionStartTime) / 1000);\n const minutes = Math.floor(elapsed / 60);\n const seconds = elapsed % 60;\n document.getElementById(\"study-timer\").textContent =\n `${minutes}:${seconds.toString().padStart(2, \"0\")}`;\n }, 1000);\n}\n\nfunction stopStudyTimer() {\n if (studyTimerInterval) {\n clearInterval(studyTimerInterval);\n studyTimerInterval = null;\n }\n}\n\nasync function completeStudySession() {\n stopStudyTimer();\n\n const duration = Math.floor((Date.now() - sessionStartTime) / 1000);\n const accuracy = studyCards.length > 0\n ? Math.round((sessionCorrectCount / studyCards.length) * 100)\n : 0;\n\n document.getElementById(\"session-cards-count\").textContent = studyCards.length;\n document.getElementById(\"session-accuracy\").textContent = accuracy;\n\n document.getElementById(\"study-card\").style.display = \"none\";\n document.getElementById(\"study-flip-controls\").style.display = \"none\";\n document.getElementById(\"study-rating-controls\").style.display = \"none\";\n document.getElementById(\"study-complete-message\").style.display = \"block\";\n\n // Save session\n try {\n await apiCall(\"/api/stats/sessions\", {\n method: \"POST\",\n body: JSON.stringify({\n deckId: currentDeckId,\n duration,\n cardsReviewed: studyCards.length,\n correctCount: sessionCorrectCount,\n }),\n });\n } catch (error) {\n console.error(\"Failed to save session:\", error);\n }\n}\n\nfunction endStudySession() {\n if (!confirm(\"End study session early?\")) return;\n completeStudySession();\n}\n\nfunction finishStudy() {\n document.getElementById(\"study-card\").style.display = \"block\";\n document.getElementById(\"study-complete-message\").style.display = \"none\";\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n}\n\n// Statistics\nasync function viewStats() {\n try {\n const data = await apiCall(\"/api/stats\");\n\n // Update overall stats\n document.getElementById(\"stat-total-cards\").textContent = data.stats.totalCards;\n document.getElementById(\"stat-total-reviews\").textContent = data.stats.totalReviews;\n\n const hours = Math.floor(data.stats.totalTime / 3600);\n const minutes = Math.floor((data.stats.totalTime % 3600) / 60);\n document.getElementById(\"stat-total-time\").textContent = `${hours}h ${minutes}m`;\n document.getElementById(\"stat-accuracy\").textContent =\n `${Math.round(data.stats.averageAccuracy)}%`;\n\n // Update session history\n const tbody = document.getElementById(\"session-history-body\");\n const noSessionsMsg = document.getElementById(\"no-sessions-message\");\n\n if (data.sessions.length === 0) {\n tbody.innerHTML = \"\";\n noSessionsMsg.style.display = \"block\";\n } else {\n noSessionsMsg.style.display = \"none\";\n tbody.innerHTML = data.sessions\n .sort((a, b) => new Date(b.date) - new Date(a.date))\n .map((session) => {\n const accuracy = session.cardsReviewed > 0\n ? Math.round((session.correctCount / session.cardsReviewed) * 100)\n : 0;\n const duration = formatDuration(session.duration);\n\n return `\n \n ${formatDate(new Date(session.date))}\n ${escapeHtml(session.deckName)}\n ${duration}\n ${session.cardsReviewed}\n ${accuracy}%\n \n `;\n })\n .join(\"\");\n }\n\n showAppInnerView(\"stats-view\");\n } catch (error) {\n alert(\"Failed to load statistics: \" + error.message);\n }\n}\n\n// Backup & Restore\nfunction showBackup() {\n showAppInnerView(\"backup-view\");\n}\n\nasync function downloadBackup() {\n try {\n const data = await apiCall(\"/api/backup\");\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `flashcard-backup-${currentUser}-${Date.now()}.json`;\n a.click();\n URL.revokeObjectURL(url);\n } catch (error) {\n alert(\"Failed to download backup: \" + error.message);\n }\n}\n\nasync function restoreBackup() {\n const fileInput = document.getElementById(\"restore-file-input\");\n const file = fileInput.files[0];\n\n if (!file) {\n alert(\"Please select a backup file\");\n return;\n }\n\n if (!confirm(\"This will replace all your current data. Continue?\")) {\n return;\n }\n\n try {\n const text = await file.text();\n const backupData = JSON.parse(text);\n\n await apiCall(\"/api/backup/restore\", {\n method: \"POST\",\n body: JSON.stringify(backupData),\n });\n\n alert(\"Backup restored successfully!\");\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n } catch (error) {\n alert(\"Failed to restore backup: \" + error.message);\n }\n}\n\n// Utility Functions\nfunction escapeHtml(text) {\n const div = document.createElement(\"div\");\n div.textContent = text;\n return div.innerHTML;\n}\n\nfunction renderMarkdown(text) {\n try {\n // Use marked.js to parse markdown\n return marked.parse(text);\n } catch (error) {\n console.error(\"Markdown parsing error:\", error);\n return escapeHtml(text);\n }\n}\n\nfunction formatDate(date) {\n return new Intl.DateTimeFormat(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n }).format(date);\n}\n\nfunction formatDuration(seconds) {\n const minutes = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return minutes > 0 ? `${minutes}m ${secs}s` : `${secs}s`;\n}\n\n// Event Listeners\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n console.log(\"🎬 DOM Content Loaded - Initializing app...\");\n\n // Login\n console.log(\"🔗 Setting up event listeners...\");\n document.getElementById(\"login-btn\").addEventListener(\"click\", login);\n document.getElementById(\"username-input\").addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") login();\n });\n\n // Navigation\n document.getElementById(\"logout-btn\").addEventListener(\"click\", logout);\n document.getElementById(\"view-stats-btn\").addEventListener(\"click\", viewStats);\n document.getElementById(\"backup-btn\").addEventListener(\"click\", showBackup);\n\n // Deck management\n document.getElementById(\"create-deck-btn\").addEventListener(\"click\", createDeck);\n document.getElementById(\"save-deck-btn\").addEventListener(\"click\", saveDeck);\n document.getElementById(\"cancel-deck-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n });\n document.getElementById(\"back-to-decks-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n });\n\n // Card management\n document.getElementById(\"add-card-btn\").addEventListener(\"click\", addCard);\n document.getElementById(\"save-card-btn\").addEventListener(\"click\", saveCard);\n document.getElementById(\"cancel-card-btn\").addEventListener(\"click\", cancelCard);\n document.getElementById(\"study-deck-btn\").addEventListener(\"click\", () => {\n studyDeck(currentDeckId);\n });\n document.getElementById(\"back-to-decks-from-cards-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n });\n\n // Study mode\n document.getElementById(\"flip-card-btn\").addEventListener(\"click\", flipCard);\n document.querySelectorAll(\".rating-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n rateCard(parseInt(btn.dataset.rating));\n });\n });\n document.getElementById(\"end-session-btn\").addEventListener(\"click\", endStudySession);\n document.getElementById(\"finish-study-btn\").addEventListener(\"click\", finishStudy);\n document.getElementById(\"back-to-cards-btn\").addEventListener(\"click\", () => {\n stopStudyTimer();\n viewCards(currentDeckId);\n });\n\n // Statistics\n document.getElementById(\"back-to-decks-from-stats-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n });\n\n // Backup/Restore\n document.getElementById(\"back-to-decks-from-backup-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n });\n document.getElementById(\"download-backup-btn\").addEventListener(\"click\", downloadBackup);\n document.getElementById(\"restore-backup-btn\").addEventListener(\"click\", restoreBackup);\n\n // Check for existing session\n const savedUsername = sessionStorage.getItem(\"flashcard_username\");\n console.log(\"💾 Saved username from session:\", savedUsername);\n if (savedUsername) {\n console.log(\"🔄 Auto-logging in with saved username...\");\n document.getElementById(\"username-input\").value = savedUsername;\n login();\n } else {\n console.log(\"👋 No saved session, showing login screen\");\n }\n\n console.log(\"✨ App initialization complete\");\n});\n\n// Make functions globally accessible for onclick handlers\nwindow.studyDeck = studyDeck;\nwindow.viewCards = viewCards;\nwindow.editDeck = editDeck;\nwindow.deleteDeck = deleteDeck;\nwindow.editCard = editCard;\nwindow.editCardInline = editCardInline;\nwindow.saveCardInline = saveCardInline;\nwindow.cancelCardInline = cancelCardInline;\nwindow.deleteCard = deleteCard;\n\n",[18,79],"c85b92f4-befd-11f0-b938-42dde27851f2",93,["D",1762865764584],"\n\n\n \n \n Flashcard Learning App\n \n \n \n \n\n\n\n \n \n\n \n

\n \n \n\n

\n\n \n

My Decks

\n \n

No decks yet

Create your first deck to get started!

\n\n \n

\n \n

Create Deck

\n \n \n

\n\n \n

\n \n

\n \n \n

\n\n \n

Add Card

💡 Tip: You can use Markdown! Try **bold**, *italic*, lists, code, etc.

\n \n \n

\n\n \n

\n \n

No cards yet

Add your first card to start learning!

\n\n \n

\n \n\n

\n Card 1 of 0\n · ⏱️ 0:00\n

\n \n

\n\n \n

\n \n

\n\n

\n \n \n \n \n

\n\n

🎉 Session Complete!

\n Reviewed 0 cards\n

\n Accuracy: 0%\n

\n \n

\n\n \n

\n \n\n

📊 Your Statistics

\n\n \n

Total Cards

Total Reviews

0h 0m

Study Time

Accuracy

\n\n \n

Study Sessions

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

Date	Deck	Duration	Cards	Accuracy

No study sessions yet

\n\n \n

\n \n\n

💾 Backup & Restore

\n\n \n

Export Data

Download all your decks, cards, and study sessions as a JSON file.

\n \n

\n\n \n

Import Data

Restore your data from a previously exported JSON file.

⚠️ Warning: This will replace all your current data!

\n \n \n

\n\n

\n\n \n\n\n\n",[18,65],"217d2958-bef7-11f0-914a-42dde27851f2","README.md","217d2a3e-bef7-11f0-914a-42dde27851f2",24,["D",1762862907645],"# Frontend\n\nThis directory contains the client-side code for the Flashcard Learning App.\n\n## Files\n\n- **index.html** - Single-page application with all views and layouts\n- **index.js** - Client-side JavaScript for UI logic and API calls\n\n## Views\n\nThe app uses a view-based navigation system where views are shown/hidden:\n\n1. **Login View** - Username entry\n2. **Deck List View** - Dashboard showing all decks\n3. **Deck Editor View** - Create/edit deck form\n4. **Card Manager View** - List and manage cards in a deck\n5. **Study View** - Spaced repetition study session\n6. **Statistics View** - Performance metrics and history\n7. **Backup View** - Data export/import\n\n## Key Features\n\n### Card Flip Animation\nCSS 3D transforms create realistic card flipping effect:\n- Front shows question\n- Back shows answer\n- Smooth 0.6s transition\n\n### Study Timer\nReal-time timer tracks session duration:\n- Updates every second\n- Displays as MM:SS format\n- Stops when session ends\n\n### Session Persistence\nUsername stored in `sessionStorage` for auto-login on page reload.\n\n## State Management\n\nGlobal state variables in `index.js`:\n- `currentUser` - Logged-in username\n- `userData` - Full user data object\n- `currentDeckId` - Active deck being viewed/studied\n- `studyCards` - Cards in current study session\n- `sessionStartTime` - Study session start time\n- `sessionCorrectCount` - Correct answers counter\n\n## API Communication\n\nAll API calls use the `apiCall()` wrapper:\n- Adds `X-Username` header automatically\n- Handles JSON parsing\n- Provides error handling with user feedback\n\n## Styling\n\n- **TailwindCSS** via CDN for utility-first styling\n- **Custom CSS** for card flip animations\n- **Responsive design** works on mobile and desktop\n\n## Adding New Features\n\n1. Add HTML in `index.html` (or create new view)\n2. Add JavaScript logic in `index.js`\n3. Connect event listeners in DOMContentLoaded\n4. Style with TailwindCSS classes\n\n",[18,177],"pulls","branches",1,"forks","envVars",{"_191":100,"_193":100},"connections",{"_191":100,"_192":100},"count","unfilledCount","emptyCount",{"_34":388,"_13":317,"_63":311,"_44":-5,"_36":37,"_156":389,"_158":24,"_38":390,"_40":100,"_66":82,"_160":-5,"_67":30,"_161":-5,"_226":391,"_17":392},{"_34":383,"_13":342,"_63":336,"_44":311,"_36":37,"_156":384,"_158":24,"_38":385,"_40":100,"_66":82,"_160":-5,"_67":30,"_161":-5,"_226":386,"_17":387},{"_34":375,"_13":376,"_63":377,"_44":336,"_36":37,"_156":378,"_158":24,"_38":379,"_40":185,"_66":80,"_160":380,"_67":30,"_161":-5,"_226":381,"_17":382},{"_34":367,"_13":368,"_63":369,"_44":336,"_36":37,"_156":370,"_158":24,"_38":371,"_40":185,"_66":80,"_160":372,"_67":30,"_161":-5,"_226":373,"_17":374},{"_34":359,"_13":360,"_63":361,"_44":336,"_36":37,"_156":362,"_158":24,"_38":363,"_40":100,"_66":80,"_160":364,"_67":30,"_161":-5,"_226":365,"_17":366},{"_34":351,"_13":352,"_63":353,"_44":336,"_36":37,"_156":354,"_158":24,"_38":355,"_40":100,"_66":80,"_160":356,"_67":30,"_161":-5,"_226":357,"_17":358},{"_34":343,"_13":344,"_63":345,"_44":336,"_36":37,"_156":346,"_158":24,"_38":347,"_40":185,"_66":80,"_160":348,"_67":30,"_161":-5,"_226":349,"_17":350},{"_34":333,"_13":334,"_63":335,"_44":336,"_36":37,"_156":337,"_158":24,"_38":338,"_40":100,"_66":80,"_160":339,"_67":30,"_161":-5,"_226":340,"_17":341},{"_34":326,"_13":177,"_63":327,"_44":311,"_36":37,"_156":328,"_158":24,"_38":329,"_40":100,"_66":21,"_160":330,"_67":30,"_161":-5,"_226":331,"_17":332},{"_34":318,"_13":319,"_63":320,"_44":311,"_36":37,"_156":321,"_158":24,"_38":322,"_40":100,"_66":80,"_160":323,"_67":30,"_161":-5,"_226":324,"_17":325},{"_34":308,"_13":309,"_63":310,"_44":311,"_36":37,"_156":312,"_158":24,"_38":313,"_40":292,"_66":80,"_160":314,"_67":30,"_161":-5,"_226":315,"_17":316},{"_34":155,"_13":18,"_63":81,"_44":-5,"_36":37,"_156":157,"_158":24,"_38":305,"_40":100,"_66":82,"_160":-5,"_67":30,"_161":-5,"_226":306,"_17":307},{"_34":176,"_13":177,"_63":178,"_44":81,"_36":37,"_156":179,"_158":24,"_38":302,"_40":100,"_66":21,"_160":181,"_67":30,"_161":-5,"_226":303,"_17":304},{"_34":171,"_13":65,"_63":64,"_44":81,"_36":37,"_156":172,"_158":24,"_38":299,"_40":73,"_66":21,"_160":174,"_67":30,"_161":-5,"_226":300,"_17":301},{"_34":166,"_13":79,"_63":78,"_44":81,"_36":37,"_156":120,"_158":24,"_38":296,"_40":168,"_66":80,"_160":169,"_67":30,"_161":-5,"_226":297,"_17":298},{"_34":291,"_13":283,"_63":277,"_44":-5,"_36":37,"_156":292,"_158":24,"_38":293,"_40":100,"_66":82,"_160":-5,"_67":30,"_161":-5,"_226":294,"_17":295},{"_34":284,"_13":177,"_63":285,"_44":277,"_36":37,"_156":286,"_158":24,"_38":287,"_40":100,"_66":21,"_160":288,"_67":30,"_161":-5,"_226":289,"_17":290},{"_34":274,"_13":275,"_63":276,"_44":277,"_36":37,"_156":278,"_158":24,"_38":279,"_40":100,"_66":80,"_160":280,"_67":30,"_161":-5,"_226":281,"_17":282},{"_34":267,"_13":268,"_63":269,"_44":-5,"_36":37,"_156":223,"_158":24,"_38":270,"_40":100,"_66":21,"_160":271,"_67":30,"_161":-5,"_226":272,"_17":273},{"_34":259,"_13":260,"_63":261,"_44":-5,"_36":37,"_156":262,"_158":24,"_38":263,"_40":100,"_66":21,"_160":264,"_67":30,"_161":-5,"_226":265,"_17":266},{"_34":251,"_13":252,"_63":253,"_44":-5,"_36":37,"_156":254,"_158":24,"_38":255,"_40":185,"_66":21,"_160":256,"_67":30,"_161":-5,"_226":257,"_17":258},{"_34":243,"_13":244,"_63":245,"_44":-5,"_36":37,"_156":246,"_158":24,"_38":247,"_40":185,"_66":21,"_160":248,"_67":30,"_161":-5,"_226":249,"_17":250},{"_34":236,"_13":177,"_63":237,"_44":-5,"_36":37,"_156":238,"_158":24,"_38":239,"_40":100,"_66":21,"_160":240,"_67":30,"_161":-5,"_226":241,"_17":242},{"_34":229,"_13":230,"_63":231,"_44":-5,"_36":37,"_156":26,"_158":24,"_38":232,"_40":100,"_66":21,"_160":233,"_67":30,"_161":-5,"_226":234,"_17":235},{"_34":219,"_13":220,"_63":95,"_44":-5,"_36":37,"_156":221,"_158":24,"_38":222,"_40":223,"_66":224,"_160":225,"_67":30,"_161":14,"_226":227,"_17":228},"55c5c030-bef7-11f0-ae8e-42dde27851f2","main.ts",35,["D",1762862995360],3,"http","// Main entry point for the Flashcard Learning App\n// This exports the Hono app from the backend\nexport { default } from \"./backend/index.ts\";\n\n","children",[],[220],"69402846-bef5-11f0-a03d-42dde27851f2","deno.json","694028fa-bef5-11f0-a03d-42dde27851f2",["D",1762862169050],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[230],"14b024fa-bef7-11f0-b55d-42dde27851f2","14b02630-bef7-11f0-b55d-42dde27851f2",22,["D",1762862886168],"# 📚 Flashcard Learning App\n\nA full-featured flashcard application with spaced repetition learning, built for Val Town.\n\n## Features\n\n### ✨ Core Functionality\n- **Deck Management**: Create, edit, and delete flashcard decks\n- **Card Creation**: Add unlimited flashcards with front (question) and back (answer)\n- **Spaced Repetition**: Smart learning algorithm (SM-2) that shows cards at optimal intervals\n- **Study Sessions**: Intuitive study mode with card flipping and 4-level difficulty ratings\n- **Statistics**: Track your learning progress with detailed metrics\n- **Backup & Restore**: Export/import your data as JSON\n\n### 🎯 Spaced Repetition System\n\nUses the proven SM-2 algorithm (same foundation as Anki) to optimize your learning:\n\n- **Again**: Didn't remember - Review again soon\n- **Hard**: Remembered with difficulty - Review in a few days\n- **Good**: Remembered correctly - Review at normal interval\n- **Easy**: Remembered instantly - Review much later\n\nCards become easier or harder based on your performance, maximizing retention while minimizing study time.\n\n### 📊 Statistics & Tracking\n\n- Total cards created across all decks\n- Total reviews completed\n- Total study time\n- Average accuracy percentage\n- Detailed session history with per-deck performance\n\n### 💾 Data Management\n\n- Username-based login (no password required)\n- Per-user data isolation using Val Town blob storage\n- JSON backup/restore for data portability\n- All data stored securely in Val Town's infrastructure\n\n## Usage\n\n### Getting Started\n\n1. **Login**: Enter any username (creates new user if doesn't exist)\n2. **Create a Deck**: Click \"Create Deck\" and give it a name\n3. **Add Cards**: Open your deck and add flashcards (front and back)\n4. **Study**: Click \"Study\" to begin learning with spaced repetition\n5. **Track Progress**: View your statistics to see your learning journey\n\n### Study Mode\n\n1. Read the question (front of card)\n2. Try to recall the answer\n3. Click \"Show Answer\" to flip the card\n4. Rate your recall:\n - **Again** (red): Didn't remember\n - **Hard** (orange): Remembered with difficulty\n - **Good** (green): Remembered correctly\n - **Easy** (blue): Remembered instantly\n5. The algorithm schedules the next review based on your rating\n\n### Backup Your Data\n\n1. Click \"Backup\" in the navigation\n2. Click \"Download Backup\" to export as JSON\n3. Save the file somewhere safe\n4. To restore: Select the file and click \"Restore Backup\"\n\n## Project Structure\n\n```\nflashcard/\n├── main.ts # Entry point\n├── README.md # This file\n├── ARCHITECTURE.md # Detailed technical documentation\n├── backend/\n│ ├── index.ts # Hono app and route setup\n│ ├── storage.ts # Blob storage utilities\n│ └── routes/\n│ ├── auth.ts # User authentication\n│ ├── decks.ts # Deck CRUD\n│ ├── cards.ts # Card CRUD\n│ ├── study.ts # Study sessions and SM-2\n│ ├── stats.ts # Statistics and tracking\n│ └── backup.ts # Data export/import\n├── frontend/\n│ ├── index.html # Single-page app UI\n│ └── index.js # Client-side logic\n└── shared/\n └── types.ts # Shared types and SR algorithm\n```\n\n## Technology Stack\n\n- **Backend**: Hono (lightweight web framework)\n- **Frontend**: Vanilla JavaScript + TailwindCSS\n- **Storage**: Val Town Blob Storage\n- **Runtime**: Deno (Val Town platform)\n- **Algorithm**: SM-2 Spaced Repetition\n\n## Key Design Decisions\n\n### Why Blob Storage?\n- Simple per-user isolation\n- Fast single-fetch loading\n- No schema migrations\n- Perfect for personal-scale apps\n\n### Why Vanilla JavaScript?\n- Lightweight (no framework overhead)\n- Simple to understand and modify\n- Fast load times\n- No build step needed\n\n### Why SM-2 Algorithm?\n- Proven effective (used by Anki)\n- Well-documented and understood\n- Simple to implement\n- Excellent for long-term retention\n\n## API Endpoints\n\nAll endpoints require `X-Username` header (except login).\n\n- `POST /api/auth/login` - Login/create user\n- `GET/POST/PUT/DELETE /api/decks` - Manage decks\n- `GET/POST/PUT/DELETE /api/cards` - Manage cards\n- `GET /api/study/:deckId` - Get due cards\n- `POST /api/study/review` - Record card review\n- `GET /api/stats` - Get statistics\n- `POST /api/stats/sessions` - Save study session\n- `GET /api/backup` - Export data\n- `POST /api/backup/restore` - Import data\n\nSee [ARCHITECTURE.md](ARCHITECTURE.md) for detailed API documentation.\n\n## Development\n\n### Running Locally\n\n```bash\n# This is designed for Val Town's platform\n# To run locally, you'd need Val Town's SDK and blob storage emulator\n```\n\n### Deployment to Val Town\n\n1. Upload all project files to Val Town\n2. Set `main.ts` as the entry point\n3. Configure as an HTTP Val\n4. No environment variables needed\n\n### Testing\n\n- Use Val Town's preview feature to test in real-time\n- Create test decks and cards\n- Try the study mode with different ratings\n- Verify statistics update correctly\n- Test backup/restore functionality\n\n## Future Enhancements\n\nPotential features to add:\n\n- [ ] Image support in cards (using Val Town's AI image generation)\n- [ ] Audio pronunciation\n- [ ] Deck sharing/templates\n- [ ] Card tagging and search\n- [ ] Dark mode\n- [ ] Keyboard shortcuts\n- [ ] Study heatmap calendar\n- [ ] Review forecast\n- [ ] Cloze deletion cards\n- [ ] Bulk CSV import\n- [ ] Progressive Web App (offline mode)\n\n## Learning Resources\n\n### About Spaced Repetition\n- [Spaced Repetition on Wikipedia](https://en.wikipedia.org/wiki/Spaced_repetition)\n- [SuperMemo Algorithm](https://www.supermemo.com/en/archives1990-2015/english/ol/sm2)\n- [Anki Manual](https://docs.ankiweb.net/)\n\n### Val Town\n- [Val Town Documentation](https://docs.val.town/)\n- [Val Town Blog](https://blog.val.town/)\n\n## License\n\nThis project is built for Val Town and is free to use, modify, and distribute.\n\n## Credits\n\nBuilt with ❤️ for effective learning through spaced repetition.\n\nAlgorithm based on SuperMemo's SM-2, popularized by Anki.\n\n---\n\nHappy Learning! 🚀\n\n",[],[177],"54ccd272-bef7-11f0-ba26-42dde27851f2","GETTING_STARTED.md","457cce12-bef7-11f0-ab6c-42dde27851f2",34,["D",1762862993727],"# Getting Started with Flashcard Learning App\n\n## Quick Start Guide\n\n### 1. Deploy to Val Town\n\n1. Upload all project files to Val Town\n2. Set the Val type to **HTTP Val**\n3. Set entry point to `main.ts`\n4. Save and preview!\n\n### 2. First Use\n\n1. **Open the app** in your browser\n2. **Enter a username** (any name you like - creates a new account)\n3. **Create your first deck** (e.g., \"Spanish Vocabulary\")\n4. **Add some cards**:\n - Front: \"Hello\"\n - Back: \"Hola\"\n5. **Click \"Study\"** to start learning!\n\n### 3. Understanding the Study Mode\n\nWhen you study:\n- Card shows the **front** (question)\n- Try to recall the answer\n- Click **\"Show Answer\"**\n- Rate your recall:\n - 🔴 **Again**: Didn't remember → see again tomorrow\n - 🟠 **Hard**: Difficult → see in a few days\n - 🟢 **Good**: Normal recall → see in ~1-2 weeks\n - 🔵 **Easy**: Perfect recall → see in a month\n\nThe app learns which cards are hard for you and shows them more often!\n\n## Project Structure\n\n```\nflashcard/\n├── main.ts # Entry point\n├── README.md # Overview and features\n├── ARCHITECTURE.md # Technical deep-dive\n├── GETTING_STARTED.md # This file\n│\n├── backend/ # Server-side code\n│ ├── index.ts # Hono app setup\n│ ├── storage.ts # Blob storage\n│ └── routes/ # API endpoints\n│ ├── auth.ts # Login\n│ ├── decks.ts # Deck CRUD\n│ ├── cards.ts # Card CRUD\n│ ├── study.ts # Spaced repetition\n│ ├── stats.ts # Statistics\n│ └── backup.ts # Export/import\n│\n├── frontend/ # Client-side code\n│ ├── index.html # UI layout\n│ └── index.js # App logic\n│\n└── shared/ # Shared code\n └── types.ts # Types + SR algorithm\n```\n\n## Features Overview\n\n### ✅ What You Can Do\n\n- ✨ Create unlimited decks and cards\n- 🎯 Study with proven spaced repetition (SM-2 algorithm)\n- 📊 Track your learning progress\n- 💾 Backup/restore your data\n- 📱 Works on mobile and desktop\n\n### 🧠 How Spaced Repetition Works\n\nInstead of cramming, this app:\n1. Shows cards at optimal intervals\n2. Focuses on cards you're about to forget\n3. Spaces out cards you know well\n4. Adapts to your learning speed\n\nResult: **Better retention with less time studying!**\n\n## Example Use Cases\n\n### Language Learning\n- **Deck**: \"French Vocabulary\"\n- **Cards**: English → French translations\n- **Result**: Build vocabulary naturally over weeks/months\n\n### Medical Studies\n- **Deck**: \"Anatomy Terms\"\n- **Cards**: Term → Definition + location\n- **Result**: Retain complex terminology long-term\n\n### Programming\n- **Deck**: \"Python Syntax\"\n- **Cards**: Concept → Code example\n- **Result**: Memorize syntax patterns\n\n### General Knowledge\n- **Deck**: \"World Capitals\"\n- **Cards**: Country → Capital city\n- **Result**: Fun trivia learning\n\n## Tips for Effective Learning\n\n### Card Creation\n- ✅ Keep cards **simple** (one concept per card)\n- ✅ Use **clear, concise** language\n- ✅ Add **context** when needed\n- ❌ Avoid long paragraphs\n- ❌ Don't make cards too easy or too hard\n\n### Study Habits\n- ✅ Study **daily** (even just 5-10 minutes)\n- ✅ Be **honest** with ratings\n- ✅ Focus on **understanding**, not just memorization\n- ✅ Take breaks between sessions\n- ❌ Don't cram before tests (start early!)\n\n### Rating Guidelines\n- **Again (1)**: Completely forgot or got it wrong\n- **Hard (2)**: Struggled but eventually remembered\n- **Good (3)**: Recalled with reasonable effort\n- **Easy (4)**: Instant, effortless recall\n\n## Understanding Your Stats\n\n### Total Cards\nNumber of flashcards you've created across all decks.\n\n### Total Reviews\nHow many times you've reviewed cards (each rating counts as 1 review).\n\n### Study Time\nCumulative time spent in study sessions (hours and minutes).\n\n### Accuracy\nPercentage of reviews rated \"Good\" or \"Easy\" (higher = better retention).\n\n### Session History\nDetailed log of each study session:\n- When you studied\n- Which deck\n- How long\n- How many cards\n- Success rate\n\n## Backup & Restore\n\n### Why Backup?\n- Protect against accidental data loss\n- Move data between Val Town accounts\n- Keep version history\n- Share decks with others (JSON format)\n\n### How to Backup\n1. Click **\"Backup\"** in navigation\n2. Click **\"Download Backup\"**\n3. Save the JSON file somewhere safe (e.g., Google Drive, Dropbox)\n\n### How to Restore\n1. Click **\"Backup\"** in navigation\n2. Click **\"Choose File\"** and select your backup JSON\n3. Click **\"Restore Backup\"**\n4. Confirm (⚠️ this replaces current data!)\n\n## Troubleshooting\n\n### Cards aren't showing in study mode\n- Check if cards are due (new cards are due immediately)\n- Make sure the deck has cards\n- Try refreshing the page\n\n### Lost my data\n- Did you use the same username?\n- Check if you have a backup file\n- Contact Val Town support if needed\n\n### Stats seem wrong\n- Stats calculate based on completed sessions\n- Try logging out and back in\n- Check backup file for data integrity\n\n### App not loading\n- Check Val Town status\n- Try clearing browser cache\n- Check browser console for errors\n\n## Next Steps\n\n### Learn More\n- Read [ARCHITECTURE.md](ARCHITECTURE.md) for technical details\n- Read [README.md](README.md) for full feature list\n- Visit [Anki Manual](https://docs.ankiweb.net/) to learn about spaced repetition\n\n### Customize\n- Modify CSS in `frontend/index.html` for styling\n- Adjust SM-2 parameters in `shared/types.ts`\n- Add new features (see README for ideas)\n\n### Share\n- Export decks as JSON\n- Share with friends/classmates\n- Contribute improvements\n\n## Support\n\nThis is an open-source project built for Val Town.\n\nFor Val Town platform issues, see [Val Town Documentation](https://docs.val.town/).\n\nFor spaced repetition questions, research the SuperMemo SM-2 algorithm.\n\n---\n\n**Happy Learning!** 🎓\n\nRemember: Consistent daily practice beats intense cramming. The algorithm works best when you:\n1. Study regularly (even 5-10 min/day)\n2. Rate honestly (don't grade yourself too easily)\n3. Trust the process (cards will come back at the right time)\n\nGood luck with your learning journey! 🚀\n\n",[],[244],"54a49ec4-bef7-11f0-a56e-42dde27851f2","ARCHITECTURE.md","fe671dc0-bef6-11f0-bb0b-42dde27851f2",28,["D",1762862993461],"# Flashcard Learning App - Architecture Documentation\n\n## Overview\n\nThis is a full-featured flashcard learning application built for Val Town, implementing spaced repetition learning (SM-2 algorithm) with comprehensive statistics tracking and backup/restore capabilities.\n\n## System Architecture\n\n### Tech Stack\n\n- **Backend Framework**: Hono 4.0.2\n- **Frontend**: Vanilla JavaScript with TailwindCSS\n- **Storage**: Val Town Blob Storage (per-user isolation)\n- **Runtime**: Deno on Val Town serverless platform\n- **Algorithm**: Simplified SM-2 Spaced Repetition (Anki-style)\n\n### Project Structure\n\n```\nflashcard/\n├── main.ts # Entry point (exports backend/index.ts)\n├── backend/\n│ ├── index.ts # Hono app setup and route mounting\n│ ├── storage.ts # Blob storage utilities\n│ └── routes/\n│ ├── auth.ts # User authentication\n│ ├── decks.ts # Deck CRUD operations\n│ ├── cards.ts # Card CRUD operations\n│ ├── study.ts # Spaced repetition study mode\n│ ├── stats.ts # Statistics and session tracking\n│ └── backup.ts # Data backup/restore\n├── frontend/\n│ ├── index.html # Single-page application UI\n│ └── index.js # Client-side logic and API calls\n└── shared/\n └── types.ts # Shared TypeScript types and SR algorithm\n```\n\n## Data Models\n\n### UserData (Root Storage Object)\n\nStored in blob storage with key: `flashcard_user_{username}`\n\n```typescript\n{\n username: string,\n decks: Deck[],\n cards: Card[],\n sessions: StudySession[],\n stats: UserStats\n}\n```\n\n### Deck\n\n```typescript\n{\n id: string, // Generated unique ID\n name: string, // Deck name\n description: string, // Optional description\n createdAt: string // ISO date string\n}\n```\n\n### Card\n\n```typescript\n{\n id: string, // Generated unique ID\n deckId: string, // Parent deck reference\n front: string, // Question/prompt\n back: string, // Answer\n easeFactor: number, // SM-2 ease factor (default: 2.5)\n interval: number, // Days until next review\n nextReview: string, // ISO date string\n reviewCount: number // Total times reviewed\n}\n```\n\n### StudySession\n\n```typescript\n{\n id: string, // Generated unique ID\n date: string, // ISO date string\n deckId: string, // Deck studied\n deckName: string, // Deck name (denormalized)\n duration: number, // Session duration in seconds\n cardsReviewed: number, // Total cards reviewed\n correctCount: number // Cards rated \"Good\" or \"Easy\"\n}\n```\n\n### UserStats (Calculated)\n\n```typescript\n{\n totalCards: number, // Total cards created\n totalReviews: number, // Total reviews across all sessions\n totalTime: number, // Total study time in seconds\n averageAccuracy: number // Percentage (0-100)\n}\n```\n\n## Spaced Repetition Algorithm\n\n### SM-2 Algorithm Implementation\n\nThe app uses a simplified version of the SuperMemo SM-2 algorithm, which is the foundation of Anki's spaced repetition system.\n\n#### Initial Values\n- **easeFactor**: 2.5\n- **interval**: 0 (new cards are due immediately)\n- **nextReview**: Current date/time\n\n#### Rating System\n\nUsers rate their recall on a 4-point scale:\n\n1. **Again (Failed)**: Didn't remember the answer\n - Reset interval to 1 day\n - Reduce easeFactor by 0.2 (min: 1.3)\n\n2. **Hard (Difficult)**: Remembered with difficulty\n - Multiply interval by 1.2\n - Reduce easeFactor by 0.15 (min: 1.3)\n\n3. **Good (Normal)**: Remembered correctly with some effort\n - First review: 1 day\n - Second review: 6 days\n - Subsequent: interval × easeFactor\n\n4. **Easy (Perfect)**: Remembered instantly\n - First review: 4 days\n - Subsequent: interval × easeFactor × 1.3\n - Increase easeFactor by 0.15\n\n#### Due Card Selection\n\nCards are considered \"due\" when:\n```javascript\nnew Date(card.nextReview) <= new Date()\n```\n\nCards are presented in order of their `nextReview` date (earliest first).\n\n### Algorithm Benefits\n\n- **Optimizes retention**: Reviews cards just before you're likely to forget them\n- **Reduces study time**: Focuses on difficult cards, spaces out easy ones\n- **Long-term retention**: Proven effective for language learning, medical studies, etc.\n\n## API Endpoints\n\n### Authentication\n\n**POST /api/auth/login**\n- Body: `{ username: string }`\n- Returns: Full `UserData` object\n- Creates new user if doesn't exist\n\n### Deck Management\n\n**GET /api/decks**\n- Headers: `X-Username: string`\n- Returns: Array of `Deck` objects\n\n**POST /api/decks**\n- Headers: `X-Username: string`\n- Body: `{ name: string, description?: string }`\n- Returns: Created `Deck`\n\n**PUT /api/decks/:id**\n- Headers: `X-Username: string`\n- Body: `{ name?: string, description?: string }`\n- Returns: Updated `Deck`\n\n**DELETE /api/decks/:id**\n- Headers: `X-Username: string`\n- Returns: `{ success: true }`\n- Cascades: Deletes all cards and sessions for the deck\n\n### Card Management\n\n**GET /api/cards/deck/:deckId**\n- Headers: `X-Username: string`\n- Returns: Array of `Card` objects\n\n**POST /api/cards**\n- Headers: `X-Username: string`\n- Body: `{ deckId: string, front: string, back: string }`\n- Returns: Created `Card`\n\n**PUT /api/cards/:id**\n- Headers: `X-Username: string`\n- Body: `{ front?: string, back?: string }`\n- Returns: Updated `Card`\n\n**DELETE /api/cards/:id**\n- Headers: `X-Username: string`\n- Returns: `{ success: true }`\n\n### Study Mode\n\n**GET /api/study/:deckId**\n- Headers: `X-Username: string`\n- Returns: Array of due `Card` objects (sorted by nextReview)\n\n**POST /api/study/review**\n- Headers: `X-Username: string`\n- Body: `{ cardId: string, rating: number (1-4) }`\n- Returns: `{ card: Card, reviewResult: ReviewResult }`\n- Updates card's SM-2 parameters\n\n### Statistics\n\n**GET /api/stats**\n- Headers: `X-Username: string`\n- Returns: `{ stats: UserStats, sessions: StudySession[] }`\n\n**POST /api/stats/sessions**\n- Headers: `X-Username: string`\n- Body: `{ deckId: string, duration: number, cardsReviewed: number, correctCount: number }`\n- Returns: Created `StudySession`\n\n### Backup & Restore\n\n**GET /api/backup**\n- Headers: `X-Username: string`\n- Returns: Full `UserData` JSON\n- Sets Content-Disposition header for download\n\n**POST /api/backup/restore**\n- Headers: `X-Username: string`\n- Body: Full `UserData` JSON\n- Returns: `{ success: true, message: string }`\n- Replaces all user data\n\n## Frontend Architecture\n\n### Single-Page Application Structure\n\nThe app uses a view-based navigation system where only one view is active at a time:\n\n1. **Login View**: Username entry\n2. **Deck List View**: Dashboard of all decks\n3. **Deck Editor View**: Create/edit deck\n4. **Card Manager View**: List and edit cards in a deck\n5. **Study View**: Spaced repetition study session\n6. **Statistics View**: Performance metrics and session history\n7. **Backup View**: Export/import data\n\n### State Management\n\nGlobal state variables:\n- `currentUser`: Logged-in username\n- `userData`: Full user data object\n- `currentDeckId`: Active deck\n- `studyCards`: Cards in current study session\n- `sessionStartTime`: Study session start timestamp\n\nSession persistence:\n- Username stored in `sessionStorage`\n- Auto-login on page reload\n\n### API Communication\n\nAll API calls:\n- Use `apiCall()` wrapper function\n- Include `X-Username` header for authenticated requests\n- Handle errors with user-friendly messages\n- Return parsed JSON responses\n\n### Study Session Flow\n\n1. Load due cards from `/api/study/:deckId`\n2. Start timer and initialize counters\n3. For each card:\n - Show front (question)\n - User flips card to see back (answer)\n - User rates recall (Again/Hard/Good/Easy)\n - Update card via `/api/study/review`\n - Track correct answers (Good/Easy)\n4. On completion:\n - Calculate duration and accuracy\n - Save session via `/api/stats/sessions`\n - Show results summary\n\n### UI Components\n\n**Card Flip Animation**\n- CSS 3D transform with `perspective` and `rotateY`\n- Front and back faces with `backface-visibility: hidden`\n- Smooth 0.6s transition\n\n**Responsive Design**\n- TailwindCSS utility classes\n- Grid layouts for deck cards\n- Mobile-friendly navigation\n\n## Storage Strategy\n\n### Per-User Isolation\n\nEach user's data is stored in a separate blob:\n- Key pattern: `flashcard_user_{username}`\n- No user can access another user's data\n- Simple username-based authentication (suitable for personal/demo use)\n\n### Data Operations\n\n**Read**: `blob.getJSON(key)` - Loads entire user object\n**Write**: `blob.setJSON(key, data)` - Saves entire user object\n\nAll mutations happen in-memory, then saved atomically.\n\n### Backup/Restore\n\nUsers can export their entire dataset as JSON and restore it later, enabling:\n- Data portability\n- Version control (manual)\n- Migration between Val Town accounts\n- Recovery from mistakes\n\n## Design Decisions & Tradeoffs\n\n### 1. Blob Storage vs SQLite\n\n**Decision**: Use Blob Storage\n\n**Rationale**:\n- Simpler per-user isolation\n- No schema migrations needed\n- Faster reads (single blob fetch vs multiple queries)\n- Suitable for personal flashcard app scale\n\n**Tradeoffs**:\n- No cross-user queries (not needed)\n- Must load entire user dataset\n- No incremental updates (acceptable for this scale)\n\n### 2. Username-Only Authentication\n\n**Decision**: No password, just username\n\n**Rationale**:\n- Simplifies UX for personal/demo use\n- Val Town already provides account-level security\n- Focus on learning features, not auth complexity\n\n**Tradeoffs**:\n- Not suitable for production multi-user app\n- Users should use unique usernames\n- Sufficient for personal use or trusted environments\n\n### 3. Vanilla JavaScript vs React\n\n**Decision**: Vanilla JavaScript\n\n**Rationale**:\n- Lighter bundle size\n- Simpler debugging\n- No build step required\n- Easier to understand for learners\n\n**Tradeoffs**:\n- More manual DOM manipulation\n- No component reusability\n- State management is manual\n\n### 4. Client-Side Routing vs Server-Side\n\n**Decision**: Client-side view switching\n\n**Rationale**:\n- Single-page feel\n- No page reloads\n- Better UX for study sessions\n- Simpler state management\n\n**Tradeoffs**:\n- All views loaded upfront\n- SEO not a concern for this app type\n\n### 5. SM-2 Algorithm Variant\n\n**Decision**: Simplified SM-2 with 4 ratings\n\n**Rationale**:\n- Proven algorithm (used by Anki)\n- Simple to implement\n- Effective for most use cases\n- Users understand 4-point scale\n\n**Tradeoffs**:\n- Not as sophisticated as SM-17+\n- No auto-tuning of parameters\n- Good enough for personal learning\n\n### 6. Denormalized Statistics\n\n**Decision**: Store deckName in StudySession\n\n**Rationale**:\n- Preserve history if deck is renamed/deleted\n- Faster stats display (no joins)\n- Simpler queries\n\n**Tradeoffs**:\n- Data duplication\n- Potential inconsistency (acceptable for historical data)\n\n## Performance Considerations\n\n### Optimization Strategies\n\n1. **Single Blob Fetch**: Load entire user data once on login\n2. **In-Memory Mutations**: Update local state, then save\n3. **Lazy Loading**: Only load cards when viewing/studying a deck\n4. **Session Storage**: Remember username between page loads\n5. **Batch Updates**: Save session data once at completion\n\n### Scalability Limits\n\nSuitable for:\n- Up to ~1000 decks per user\n- Up to ~10,000 cards per user\n- Up to ~1000 sessions per user\n\nBeyond this, consider:\n- Pagination\n- Incremental loading\n- SQLite for relational queries\n- Separate blob per deck\n\n## Future Enhancement Ideas\n\n### Algorithm Improvements\n- Implement Anki's FSRS algorithm\n- Add learning phase (new cards)\n- Configurable ease factor bounds\n- Review history analysis\n\n### Features\n- Deck sharing (export/import specific decks)\n- Image support in cards (Val Town AI image generation)\n- Audio pronunciation\n- Cloze deletions\n- Card tagging/filtering\n- Search functionality\n- Deck templates (languages, medicine, etc.)\n- Heatmap calendar of study activity\n- Review forecast\n\n### UX Improvements\n- Keyboard shortcuts\n- Dark mode\n- Progressive Web App (offline support)\n- Mobile app wrapper\n- Undo card deletion\n- Bulk card import (CSV)\n\n### Analytics\n- Retention graphs\n- Card difficulty distribution\n- Study time by deck\n- Streak tracking\n- Learning velocity\n\n## Development Guidelines\n\n### Adding New Features\n\n1. **Data Model**: Update types in `shared/types.ts`\n2. **Storage**: Update `backend/storage.ts` if needed\n3. **API**: Add routes in `backend/routes/`\n4. **UI**: Add view in `frontend/index.html`\n5. **Logic**: Implement in `frontend/index.js`\n6. **Test**: Manual testing in Val Town preview\n\n### Error Handling\n\n- Backend: Let errors bubble (Hono's `onError` configured)\n- Frontend: User-friendly alert messages\n- API errors: Always include descriptive error messages\n\n### Code Organization\n\n- Keep `shared/` compatible with both browser and Deno\n- Use TypeScript types consistently\n- Comment complex algorithms\n- Maintain separation of concerns (storage/routes/UI)\n\n## Deployment\n\n### Val Town Deployment\n\n1. Upload project files to Val Town\n2. Set main entry point to `main.ts`\n3. Configure as HTTP Val\n4. No environment variables needed (blob storage is built-in)\n\n### Testing\n\n- **Local**: Run with Deno (requires Val Town SDK)\n- **Preview**: Use Val Town's preview feature\n- **Production**: Deploy to Val Town domain\n\n## Conclusion\n\nThis flashcard app demonstrates a complete full-stack application built for Val Town's serverless platform, implementing a proven learning algorithm with a clean, functional UI. The architecture prioritizes simplicity and usability while remaining extensible for future enhancements.\n\nThe use of spaced repetition makes it genuinely useful for learning, while the statistics tracking provides motivation and insight into learning progress. The backup/restore functionality ensures users never lose their hard work.\n\n",[],[252],"69492004-bef5-11f0-8b5a-42dde27851f2","AGENTS.md","69492202-bef5-11f0-8b5a-42dde27851f2",4,["D",1762862169069],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[260],"69434134-bef5-11f0-b262-42dde27851f2",".vtignore","694341de-bef5-11f0-b262-42dde27851f2",["D",1762862169069],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[268],"5d1f70ac-bef6-11f0-a52c-42dde27851f2","types.ts","5d1f717e-bef6-11f0-a52c-42dde27851f2","5d01d60a-bef6-11f0-ab02-42dde27851f2",6,["D",1762862578199],"// Shared types for the flashcard application\n// These types work in both frontend and backend environments\n\nexport interface Deck {\n id: string;\n name: string;\n description: string;\n createdAt: string;\n}\n\nexport interface Card {\n id: string;\n deckId: string;\n front: string;\n back: string;\n easeFactor: number; // SM-2 ease factor (default 2.5)\n interval: number; // Days until next review\n nextReview: string; // ISO date string\n reviewCount: number;\n}\n\nexport interface StudySession {\n id: string;\n date: string; // ISO date string\n deckId: string;\n deckName: string;\n duration: number; // seconds\n cardsReviewed: number;\n correctCount: number; // \"Good\" or \"Easy\" ratings\n}\n\nexport interface UserStats {\n totalCards: number;\n totalReviews: number;\n totalTime: number; // seconds\n averageAccuracy: number; // 0-100 percentage\n}\n\nexport interface UserData {\n username: string;\n decks: Deck[];\n cards: Card[];\n sessions: StudySession[];\n stats: UserStats;\n}\n\n// SM-2 Spaced Repetition Algorithm\n// Based on the SuperMemo SM-2 algorithm used in Anki\n\nexport enum Rating {\n Again = 1,\n Hard = 2,\n Good = 3,\n Easy = 4,\n}\n\nexport interface ReviewResult {\n easeFactor: number;\n interval: number;\n nextReview: string;\n}\n\n/**\n * Calculate the next review parameters based on the SM-2 algorithm\n * @param card - The card being reviewed\n * @param rating - User's rating (1=Again, 2=Hard, 3=Good, 4=Easy)\n * @returns Updated card review parameters\n */\nexport function calculateNextReview(\n card: Card,\n rating: Rating\n): ReviewResult {\n let easeFactor = card.easeFactor;\n let interval = card.interval;\n\n switch (rating) {\n case Rating.Again:\n // Failed recall - reset to beginning\n interval = 1;\n easeFactor = Math.max(1.3, easeFactor - 0.2);\n break;\n\n case Rating.Hard:\n // Difficult recall\n interval = Math.max(1, interval * 1.2);\n easeFactor = Math.max(1.3, easeFactor - 0.15);\n break;\n\n case Rating.Good:\n // Successful recall\n if (card.reviewCount === 0) {\n interval = 1;\n } else if (card.reviewCount === 1) {\n interval = 6;\n } else {\n interval = Math.round(interval * easeFactor);\n }\n break;\n\n case Rating.Easy:\n // Easy recall\n if (card.reviewCount === 0) {\n interval = 4;\n } else {\n interval = Math.round(interval * easeFactor * 1.3);\n }\n easeFactor = easeFactor + 0.15;\n break;\n }\n\n // Calculate next review date\n const nextReview = new Date();\n nextReview.setDate(nextReview.getDate() + interval);\n\n return {\n easeFactor: Math.max(1.3, easeFactor),\n interval,\n nextReview: nextReview.toISOString(),\n };\n}\n\n/**\n * Check if a card is due for review\n */\nexport function isCardDue(card: Card): boolean {\n return new Date(card.nextReview) <= new Date();\n}\n\n/**\n * Generate a unique ID\n */\nexport function generateId(): string {\n return Date.now().toString(36) + Math.random().toString(36).substring(2);\n}\n\n",[],[283,275],"shared","2669db46-bef7-11f0-a5fc-42dde27851f2","2669dbf0-bef7-11f0-a5fc-42dde27851f2",25,["D",1762862915908],"# Shared\n\nThis directory contains code shared between frontend and backend.\n\n## Files\n\n- **types.ts** - TypeScript interfaces and spaced repetition algorithm\n\n## Important Notes\n\nCode in this directory must work in **both** environments:\n- ✅ Standard JavaScript/TypeScript\n- ❌ No Deno-specific APIs (`Deno.*`)\n- ❌ No browser-specific APIs (`window`, `document`)\n- ✅ Use only standard ES modules\n\n## Types\n\n### Data Models\n- `Deck` - Flashcard deck\n- `Card` - Individual flashcard with SR parameters\n- `StudySession` - Completed study session record\n- `UserStats` - Calculated statistics\n- `UserData` - Complete user data structure\n\n### Algorithm\n- `Rating` - Enum for card difficulty ratings (1-4)\n- `ReviewResult` - Result of SR calculation\n\n## Spaced Repetition Functions\n\n### calculateNextReview()\nImplements the SM-2 algorithm to determine:\n- Next review date\n- Updated ease factor\n- Updated interval\n\n### isCardDue()\nChecks if a card should be shown for review.\n\n### generateId()\nCreates unique IDs for new records.\n\n## Algorithm Details\n\nThe SM-2 (SuperMemo 2) algorithm is the foundation of Anki's spaced repetition:\n\n- **easeFactor**: How \"easy\" the card is (higher = longer intervals)\n- **interval**: Days until next review\n- **nextReview**: Specific date/time for next review\n\nSee [ARCHITECTURE.md](../ARCHITECTURE.md) for full algorithm documentation.\n\n",[],[283,177],"5d01d4d4-bef6-11f0-ab02-42dde27851f2",5,["D",1762862578002],[210,211],[283],["D",1762866238515],[],[18,79],["D",1762865764584],[],[18,65],["D",1762862907645],[],[18,177],["D",1762862694272],[206,207,208],[18],"e2d87c22-befe-11f0-8f01-42dde27851f2","storage.ts","60ec6b54-bef6-11f0-8b97-42dde27851f2","60cb1242-bef6-11f0-b262-42dde27851f2",100,["D",1762866238514],"import { blob } from \"https://esm.town/v/std/blob\";\nimport type { UserData, UserStats } from \"../shared/types.ts\";\n\n// Storage version - increment when making breaking changes to data structure\nconst STORAGE_VERSION = \"v1\";\n\n/**\n * Get user data from blob storage\n * Creates new user data if it doesn't exist\n */\nexport async function getUserData(username: string): Promise {\n // Normalize username to lowercase for consistency\n const normalizedUsername = username.toLowerCase().trim();\n const key = `flashcard_user_${normalizedUsername}:${STORAGE_VERSION}`;\n\n try {\n const data = await blob.getJSON(key);\n if (data) {\n return data as UserData;\n }\n } catch (error) {\n // User doesn't exist yet, will create new\n }\n\n // Initialize new user\n const newUser: UserData = {\n username: normalizedUsername,\n decks: [],\n cards: [],\n sessions: [],\n stats: {\n totalCards: 0,\n totalReviews: 0,\n totalTime: 0,\n averageAccuracy: 0,\n },\n };\n\n await saveUserData(normalizedUsername, newUser);\n return newUser;\n}\n\n/**\n * Save user data to blob storage\n */\nexport async function saveUserData(\n username: string,\n data: UserData\n): Promise {\n // Normalize username to lowercase for consistency\n const normalizedUsername = username.toLowerCase().trim();\n const key = `flashcard_user_${normalizedUsername}:${STORAGE_VERSION}`;\n await blob.setJSON(key, data);\n}\n\n/**\n * Update user statistics\n */\nexport function updateUserStats(data: UserData): void {\n const totalCorrect = data.sessions.reduce(\n (sum, session) => sum + session.correctCount,\n 0\n );\n const totalReviewed = data.sessions.reduce(\n (sum, session) => sum + session.cardsReviewed,\n 0\n );\n\n data.stats = {\n totalCards: data.cards.length,\n totalReviews: totalReviewed,\n totalTime: data.sessions.reduce((sum, session) => sum + session.duration, 0),\n averageAccuracy: totalReviewed > 0 ? (totalCorrect / totalReviewed) * 100 : 0,\n };\n}\n\n",[],[317,309],"backend","81af052c-bef6-11f0-9f19-42dde27851f2","index.ts","81af0626-bef6-11f0-9f19-42dde27851f2",16,["D",1762862639537],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { serveFile, readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport auth from \"./routes/auth.ts\";\nimport decks from \"./routes/decks.ts\";\nimport cards from \"./routes/cards.ts\";\nimport study from \"./routes/study.ts\";\nimport stats from \"./routes/stats.ts\";\nimport backup from \"./routes/backup.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Mount API routes\napp.route(\"/api/auth\", auth);\napp.route(\"/api/decks\", decks);\napp.route(\"/api/cards\", cards);\napp.route(\"/api/study\", study);\napp.route(\"/api/stats\", stats);\napp.route(\"/api/backup\", backup);\n\n// Serve static frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve main HTML page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;\n\n",[],[317,319],"1b177af0-bef7-11f0-9a02-42dde27851f2","1b177be0-bef7-11f0-9a02-42dde27851f2",23,["D",1762862896913],"# Backend\n\nThis directory contains the server-side code for the Flashcard Learning App.\n\n## Structure\n\n- **index.ts** - Main Hono app setup, route mounting, and static file serving\n- **storage.ts** - Blob storage utilities for user data persistence\n- **routes/** - API endpoint implementations\n\n## Routes\n\n### auth.ts\n- Handles user login and initialization\n- Creates new user data if doesn't exist\n\n### decks.ts\n- CRUD operations for flashcard decks\n- Cascade deletion of cards when deck is deleted\n\n### cards.ts\n- CRUD operations for flashcards\n- Validates deck existence before card creation\n\n### study.ts\n- Fetches due cards based on spaced repetition\n- Processes card reviews and updates SM-2 parameters\n\n### stats.ts\n- Retrieves user statistics\n- Saves completed study sessions\n\n### backup.ts\n- Exports user data as JSON\n- Imports user data from JSON backup\n\n## Key Patterns\n\n### Authentication\nAll routes (except login) require `X-Username` header for user identification.\n\n### Error Handling\nHono's `onError` is configured to throw errors for full stack traces.\n\n### Data Flow\n1. Load user data from blob storage\n2. Perform in-memory operations\n3. Save back to blob storage\n\n## Adding New Routes\n\n1. Create new file in `routes/`\n2. Export a Hono instance\n3. Mount in `index.ts` with `app.route()`\n4. Add `X-Username` header check if needed\n\n",[],[317,177],"73d386d0-bef6-11f0-a0cd-42dde27851f2","study.ts","73d3878e-bef6-11f0-a0cd-42dde27851f2","65ea71d2-bef6-11f0-bf10-42dde27851f2",13,["D",1762862616288],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData } from \"../storage.ts\";\nimport { calculateNextReview, isCardDue, Rating } from \"../../shared/types.ts\";\n\nconst study = new Hono();\n\n// Get due cards for a deck\nstudy.get(\"/:deckId\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const deckId = c.req.param(\"deckId\");\n const userData = await getUserData(username);\n\n // Get all cards in the deck that are due for review\n const dueCards = userData.cards\n .filter((card) => card.deckId === deckId && isCardDue(card))\n .sort((a, b) => {\n // Sort by next review date (earlier cards first)\n return new Date(a.nextReview).getTime() - new Date(b.nextReview).getTime();\n });\n\n return c.json(dueCards);\n});\n\n// Process a card review\nstudy.post(\"/review\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const { cardId, rating } = await c.req.json();\n\n if (!cardId || rating === undefined) {\n return c.json({ error: \"cardId and rating are required\" }, 400);\n }\n\n if (![Rating.Again, Rating.Hard, Rating.Good, Rating.Easy].includes(rating)) {\n return c.json({ error: \"Invalid rating\" }, 400);\n }\n\n const userData = await getUserData(username);\n const card = userData.cards.find((c) => c.id === cardId);\n\n if (!card) {\n return c.json({ error: \"Card not found\" }, 404);\n }\n\n // Calculate next review using SM-2 algorithm\n const reviewResult = calculateNextReview(card, rating);\n\n // Update card\n card.easeFactor = reviewResult.easeFactor;\n card.interval = reviewResult.interval;\n card.nextReview = reviewResult.nextReview;\n card.reviewCount++;\n\n await saveUserData(username, userData);\n\n return c.json({\n card,\n reviewResult,\n });\n});\n\nexport default study;\n\n",[],[317,342,334],"routes","54bb7928-bef7-11f0-9fe1-42dde27851f2","stats.ts","77340e3a-bef6-11f0-aee4-42dde27851f2",32,["D",1762862993541],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData, updateUserStats } from \"../storage.ts\";\nimport { generateId } from \"../../shared/types.ts\";\nimport type { StudySession } from \"../../shared/types.ts\";\n\nconst stats = new Hono();\n\n// Get user statistics\nstats.get(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const userData = await getUserData(username);\n updateUserStats(userData);\n\n return c.json({\n stats: userData.stats,\n sessions: userData.sessions,\n });\n});\n\n// Save completed study session\nstats.post(\"/sessions\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const { deckId, duration, cardsReviewed, correctCount } = await c.req.json();\n\n if (deckId === undefined || duration === undefined ||\n cardsReviewed === undefined || correctCount === undefined) {\n return c.json(\n { error: \"deckId, duration, cardsReviewed, and correctCount are required\" },\n 400\n );\n }\n\n const userData = await getUserData(username);\n\n // Get deck name\n const deck = userData.decks.find((d) => d.id === deckId);\n const deckName = deck ? deck.name : \"Unknown Deck\";\n\n const newSession: StudySession = {\n id: generateId(),\n date: new Date().toISOString(),\n deckId,\n deckName,\n duration,\n cardsReviewed,\n correctCount,\n };\n\n userData.sessions.push(newSession);\n updateUserStats(userData);\n await saveUserData(username, userData);\n\n return c.json(newSession, 201);\n});\n\nexport default stats;\n\n",[],[317,342,344],"6b04dac2-bef6-11f0-bd0b-42dde27851f2","decks.ts","6b04db94-bef6-11f0-bd0b-42dde27851f2",11,["D",1762862601508],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData } from \"../storage.ts\";\nimport { generateId } from \"../../shared/types.ts\";\nimport type { Deck } from \"../../shared/types.ts\";\n\nconst decks = new Hono();\n\n// Get all decks\ndecks.get(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const userData = await getUserData(username);\n return c.json(userData.decks);\n});\n\n// Create a new deck\ndecks.post(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const { name, description } = await c.req.json();\n\n if (!name || name.trim().length === 0) {\n return c.json({ error: \"Deck name is required\" }, 400);\n }\n\n const userData = await getUserData(username);\n\n const newDeck: Deck = {\n id: generateId(),\n name: name.trim(),\n description: description?.trim() || \"\",\n createdAt: new Date().toISOString(),\n };\n\n userData.decks.push(newDeck);\n await saveUserData(username, userData);\n\n return c.json(newDeck, 201);\n});\n\n// Update a deck\ndecks.put(\"/:id\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const deckId = c.req.param(\"id\");\n const { name, description } = await c.req.json();\n\n const userData = await getUserData(username);\n const deck = userData.decks.find((d) => d.id === deckId);\n\n if (!deck) {\n return c.json({ error: \"Deck not found\" }, 404);\n }\n\n if (name !== undefined) deck.name = name.trim();\n if (description !== undefined) deck.description = description.trim();\n\n await saveUserData(username, userData);\n return c.json(deck);\n});\n\n// Delete a deck and all its cards\ndecks.delete(\"/:id\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const deckId = c.req.param(\"id\");\n const userData = await getUserData(username);\n\n // Remove deck\n const deckIndex = userData.decks.findIndex((d) => d.id === deckId);\n if (deckIndex === -1) {\n return c.json({ error: \"Deck not found\" }, 404);\n }\n\n userData.decks.splice(deckIndex, 1);\n\n // Remove all cards in the deck\n userData.cards = userData.cards.filter((card) => card.deckId !== deckId);\n\n // Remove sessions for this deck\n userData.sessions = userData.sessions.filter(\n (session) => session.deckId !== deckId\n );\n\n await saveUserData(username, userData);\n return c.json({ success: true });\n});\n\nexport default decks;\n\n",[],[317,342,352],"6fb38956-bef6-11f0-bd35-42dde27851f2","cards.ts","6fb38a5a-bef6-11f0-bd35-42dde27851f2",12,["D",1762862609367],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData } from \"../storage.ts\";\nimport { generateId } from \"../../shared/types.ts\";\nimport type { Card } from \"../../shared/types.ts\";\n\nconst cards = new Hono();\n\n// Get all cards in a deck\ncards.get(\"/deck/:deckId\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const deckId = c.req.param(\"deckId\");\n const userData = await getUserData(username);\n const deckCards = userData.cards.filter((card) => card.deckId === deckId);\n\n return c.json(deckCards);\n});\n\n// Create a new card\ncards.post(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const { deckId, front, back } = await c.req.json();\n\n if (!deckId || !front || !back) {\n return c.json(\n { error: \"deckId, front, and back are required\" },\n 400\n );\n }\n\n const userData = await getUserData(username);\n\n // Verify deck exists\n const deck = userData.decks.find((d) => d.id === deckId);\n if (!deck) {\n return c.json({ error: \"Deck not found\" }, 404);\n }\n\n const newCard: Card = {\n id: generateId(),\n deckId,\n front: front.trim(),\n back: back.trim(),\n easeFactor: 2.5,\n interval: 0,\n nextReview: new Date().toISOString(), // Due immediately for new cards\n reviewCount: 0,\n };\n\n userData.cards.push(newCard);\n await saveUserData(username, userData);\n\n return c.json(newCard, 201);\n});\n\n// Update a card\ncards.put(\"/:id\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const cardId = c.req.param(\"id\");\n const { front, back } = await c.req.json();\n\n const userData = await getUserData(username);\n const card = userData.cards.find((c) => c.id === cardId);\n\n if (!card) {\n return c.json({ error: \"Card not found\" }, 404);\n }\n\n if (front !== undefined) card.front = front.trim();\n if (back !== undefined) card.back = back.trim();\n\n await saveUserData(username, userData);\n return c.json(card);\n});\n\n// Delete a card\ncards.delete(\"/:id\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const cardId = c.req.param(\"id\");\n const userData = await getUserData(username);\n\n const cardIndex = userData.cards.findIndex((c) => c.id === cardId);\n if (cardIndex === -1) {\n return c.json({ error: \"Card not found\" }, 404);\n }\n\n userData.cards.splice(cardIndex, 1);\n await saveUserData(username, userData);\n\n return c.json({ success: true });\n});\n\nexport default cards;\n\n",[],[317,342,360],"54c75d92-bef7-11f0-92b2-42dde27851f2","backup.ts","7a21eda6-bef6-11f0-a7da-42dde27851f2",33,["D",1762862993697],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData } from \"../storage.ts\";\nimport type { UserData } from \"../../shared/types.ts\";\n\nconst backup = new Hono();\n\n// Export all user data as JSON\nbackup.get(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const userData = await getUserData(username);\n\n // Return as downloadable JSON\n return c.json(userData, 200, {\n \"Content-Disposition\": `attachment; filename=\"flashcard-backup-${username}-${Date.now()}.json\"`,\n });\n});\n\n// Restore user data from JSON backup\nbackup.post(\"/restore\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const backupData = await c.req.json() as UserData;\n\n // Validate backup data structure\n if (!backupData.username || !Array.isArray(backupData.decks) ||\n !Array.isArray(backupData.cards) || !Array.isArray(backupData.sessions)) {\n return c.json({ error: \"Invalid backup data format\" }, 400);\n }\n\n // Override username with current user\n backupData.username = username;\n\n await saveUserData(username, backupData);\n\n return c.json({ success: true, message: \"Backup restored successfully\" });\n});\n\nexport default backup;\n\n",[],[317,342,368],"d65182d2-befe-11f0-9a0a-42dde27851f2","auth.ts","6605cea0-bef6-11f0-ae62-42dde27851f2",98,["D",1762866217496],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData } from \"../storage.ts\";\n\nconst auth = new Hono();\n\n// Login - Load or initialize user data\nauth.post(\"/login\", async (c) => {\n const { username } = await c.req.json();\n\n if (!username || username.trim().length === 0) {\n return c.json({ error: \"Username is required\" }, 400);\n }\n\n // Normalize username to lowercase\n const normalizedUsername = username.toLowerCase().trim();\n const userData = await getUserData(normalizedUsername);\n return c.json(userData);\n});\n\nexport default auth;\n\n",[],[317,342,376],"65ea710a-bef6-11f0-bf10-42dde27851f2",9,["D",1762862592951],[196,197,198,199,200,201],[317,342],"60cb118e-bef6-11f0-b262-42dde27851f2",7,["D",1762862584356],[195,202,203,204],[317],["D",1762862116973],{"_11":12,"_133":70},{"_11":12,"_129":-5,"_69":70,"_31":68,"_130":131,"_132":30},{"_40":120,"_13":16,"_34":37,"_121":84,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":14,"_128":12},"ctx",{"_53":-5,"_152":430,"_431":432,"_433":434,"_435":30,"_436":30,"_437":30,"_438":24,"_439":-5,"_440":-7,"_441":-7,"_442":100,"_443":30,"_444":30,"_445":-5,"_446":30,"_447":30,"_448":30,"_449":-5},"ENV",{"_401":402,"_403":404,"_405":16,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427,"_428":429},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend