https://github.com/bkowshik/flashcards
📇 A fast, fully client-side flashcard tool. No login, no server, no analytics.
https://github.com/bkowshik/flashcards
client-side flashcards svelte webapp
Last synced: 17 days ago
JSON representation
📇 A fast, fully client-side flashcard tool. No login, no server, no analytics.
- Host: GitHub
- URL: https://github.com/bkowshik/flashcards
- Owner: bkowshik
- License: mit
- Created: 2026-05-27T05:40:09.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-27T07:08:58.000Z (30 days ago)
- Last Synced: 2026-05-27T08:16:58.933Z (30 days ago)
- Topics: client-side, flashcards, svelte, webapp
- Language: Svelte
- Homepage: https://flashcards.bkowshik.in
- Size: 188 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📇 flashcards
A fast, fully client-side flashcard tool. No login, no server, no analytics. Cards live in your browser; export the whole library to JSON any time.
- **Live:**
- **Source:**
## Quick start
Requires Node 20+ and npm.
```bash
npm install
npm run dev
```
Opens at `http://localhost:5173` with hot module reload.
## Scripts
| Command | What it does |
|---|---|
| `npm run dev` | Vite dev server with HMR |
| `npm run build` | Production build → `dist/` |
| `npm run preview` | Serve the production build locally |
| `npm run check` | `svelte-check` (types + Svelte diagnostics) |
## Stack
- **[Vite](https://vite.dev)** — build tool and dev server with HMR.
- **[Svelte 5](https://svelte.dev)** — UI framework with the runes API.
- **TypeScript** — type safety across the app.
- **[`idb-keyval`](https://github.com/jakearchibald/idb-keyval)** — tiny IndexedDB wrapper for local card storage.
- **[`marked`](https://marked.js.org) + [`DOMPurify`](https://github.com/cure53/DOMPurify)** — markdown rendering, sanitized.
- **[Geist Sans + Geist Mono](https://vercel.com/font)** — self-hosted via [Fontsource](https://fontsource.org).
Builds to **~46 KB gzipped JS** + ~3.5 KB CSS, under the 50 KB target.
## Project layout
```
src/
├── App.svelte ← top-level layout + view switch
├── app.css ← CSS tokens, shared button system, base styles
├── main.ts ← font imports, mount()
├── components/
│ └── Header.svelte ← brand + nav tabs
├── lib/
│ ├── router.ts ← hash-based router
│ ├── storage.ts ← IndexedDB get/save/delete
│ ├── markdown.ts ← marked + DOMPurify
│ ├── theme.ts ← light / dark / system
│ ├── shortcuts.ts ← global g-chord nav handler
│ ├── keyboard-help.ts ← shortcut reference rendered on About
│ ├── export.ts ← JSON backup download
│ ├── import.ts ← JSON merge restore
│ ├── id.ts ← URL-safe 8-char id generator
│ └── types.ts ← Card type
└── views/
├── Add.svelte ← capture / edit a card
├── Browse.svelte ← list, export, import, delete
├── Quiz.svelte ← shuffled queue with flip animation
└── About.svelte ← intro, settings, shortcuts, data location
```
## Routes
- `#/add` — capture a new card (default)
- `#/edit/:id` — edit an existing card
- `#/browse` — list of all cards
- `#/quiz` — flip through a shuffled queue
- `#/about` — intro, theme picker, keyboard shortcuts, data location
## Keyboard
Nav is Gmail-style chord shortcuts: `g a` (Add) · `g b` (Browse) · `g q` (Quiz). Quiz: `Space` to flip, `n`/`p` (or `→`/`←`) to navigate, `e` to edit. Save in Add is `⌘/Ctrl + Enter`; `Esc` clears or cancels.
Full list on the [About page](https://flashcards.bkowshik.in/#/about).
## Data
Cards live in your browser's IndexedDB under the `flashcards` database. Nothing is sent anywhere.
- **Export** (Browse) — download the whole library as JSON.
- **Import** (Browse) — merge a JSON file back in.
- Wipe everything: DevTools → Application → IndexedDB → `flashcards` → Delete database.
## Deploy
Hosted on [Cloudflare Pages](https://pages.cloudflare.com) with Git integration — every push to `main` rebuilds and ships.
| Setting | Value |
|---|---|
| Build command | `npm run build` |
| Build output | `dist/` |
| Node version | `20` (via `NODE_VERSION` env var) |
## License
[MIT](LICENSE) © 2026 Bhargav Kowshik.