https://github.com/snacksncode/cram
Flash-Card app written in NextJS to help me & my mates to study vocabulary for tests
https://github.com/snacksncode/cram
learning nextjs react
Last synced: 28 days ago
JSON representation
Flash-Card app written in NextJS to help me & my mates to study vocabulary for tests
- Host: GitHub
- URL: https://github.com/snacksncode/cram
- Owner: snacksncode
- Created: 2021-09-21T09:08:42.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-13T23:21:07.000Z (over 3 years ago)
- Last Synced: 2025-04-03T03:32:50.309Z (about 1 year ago)
- Topics: learning, nextjs, react
- Language: TypeScript
- Homepage: https://snc-cards.vercel.app
- Size: 432 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Cram: Study Cards
A flashcard app for drilling vocabulary. Polish to English, Polish to German, geography.
Whatever you throw into the data file.
snc-cards.vercel.app
---
## What is this
I built this to help myself study vocabulary. You see a word, try to recall the translation, flip the card, and mark if you got it right. There's also a spelling mode where you type the answer letter by letter.
Everything runs in the browser. No accounts, no backend, no tracking. Your progress is saved locally in IndexedDB so you can pick up where you left off.
## Features
- **Flashcards** - flip cards with keyboard or tap. Mark correct/wrong. Tracks your streak
- **Spelling mode** - type the answer character by character. Forces you to actually know it
- **List view** - browse all Q&A pairs in a topic at once
- **Topic creator** - built-in JSON generator so anyone can create new topic data without touching code
- **Score history** - charts showing how you've done over time, stored locally
- **Session resume** - close the tab mid-session, come back later, pick up where you stopped
- **Fuzzy search** - `Cmd+K` / `Ctrl+K` to quickly jump between topics
- **Keyboard-first** - Enter to flip, Enter/Backspace for correct/wrong, Ctrl+Z to undo
- **Interactive tutorial** - a "How It Works" section on the home page with playable demo cards
## Running locally
You need [Bun](https://bun.sh) installed.
```bash
bun install
bun run dev
```
Opens at [localhost:3000](http://localhost:3000).
For a production build:
```bash
bun run build
bun run start
```
## Adding your own topics
All the data lives in `data/topics.json`. The format is straightforward:
```json
{
"id": "1",
"title": "Common Greetings",
"slug": "common-greetings",
"class": "en",
"questions": [
{ "id": 1, "question": "Dzień dobry", "answer": "Good morning" },
{ "id": 2, "question": "Do widzenia", "answer": "Goodbye" }
]
}
```
The `class` field controls the color theme: `en` for English (blue), `de` for German (peach/orange), `geo` for geography (green).
You can also use the built-in topic creator (the + card on the home page) to generate this JSON without writing it by hand.
## Tech stack
- **Next.js 16** with App Router and React Server Components
- **React 19** + TypeScript
- **Tailwind CSS v4**
- **motion/react** for animations (card flips, page transitions, spring physics)
- **Dexie** for IndexedDB storage (sessions, score history)
- **Recharts** for score history charts
- **uFuzzy** for typo-tolerant fuzzy search
- **Shiki** for syntax-highlighted JSON output
- **Bun** as the package manager and runtime
Deployed on **Vercel**.
## License
MIT