https://github.com/dherault/finnish-study-cards
A Finnish learning tool
https://github.com/dherault/finnish-study-cards
Last synced: 5 months ago
JSON representation
A Finnish learning tool
- Host: GitHub
- URL: https://github.com/dherault/finnish-study-cards
- Owner: dherault
- License: mit
- Created: 2026-01-13T12:55:46.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-01-13T13:51:18.000Z (6 months ago)
- Last Synced: 2026-02-08T06:14:31.021Z (6 months ago)
- Language: TypeScript
- Size: 69.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Finnish Study Cards
A Finnish learning tool built with React, TypeScript, Vite, Tailwind CSS, and Firebase Firestore.
## Features
- 📇 Flash cards with Finnish words on one side and English translations on the other
- 🔄 Flip animation on click/touch
- ➕ Add new cards with a modal form
- ✏️ Edit and delete existing cards
- 🏷️ Organize cards by categories
- 🔍 Autocomplete category selection
- 💾 Data persistence with Firebase Firestore
## Setup
1. Clone the repository
2. Install dependencies:
```bash
npm install
```
3. Set up Firebase:
- Create a Firebase project at [Firebase Console](https://console.firebase.google.com/)
- Create a Firestore database
- Copy your Firebase configuration
- Create a `.env` file based on `.env.example` and add your Firebase credentials
4. Run the development server:
```bash
npm run dev
```
## Database Models
### Card
- `id`: string (auto-generated)
- `finnishWord`: string
- `englishWord`: string
- `categoryId`: string
- `categoryName`: string (denormalized)
- `createdAt`: Date
### Category
- `id`: string (auto-generated)
- `name`: string
## Scripts
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
## Technologies
- **React 19** - UI library
- **TypeScript** - Type safety
- **Vite** - Build tool and dev server
- **Tailwind CSS** - Styling
- **Firebase Firestore** - Database