Ordbank

A lightweight, mobile-first vocabulary learning app built with Next.js 15 & React 19, Neon PostgreSQL and Drizzle ORM. Install it as a PWA for a native app experience.

Create custom word lists for any language pair, then test yourself on the go. The app focuses on words you find challenging, making practice sessions more effective. Designed for learners who want control over what they study — no pre-made decks, just your vocabulary.

Contents

• ✨ Features
• 🖼️ Screenshots
• 🛠 Tech stack
• ⚙️ Installation for development
• 📂 Project structure
• 🚀 Future development
• 🧩 Contributing
• 📜 Licence

✨ Features

• Custom vocabulary lists - Add your own words and translations for any language pair
• Multi-language support - Manage multiple language pairs (e.g., Swedish-English, Italian-French) with easy switching
• Smart testing - Adaptive question selection that prioritizes words you struggle with
• Flexible test options
  • Choose translation direction (source-to-target, target-to-source, or random)
  • Multiple choice (3 options) or typed answers
  • Optional question and time limits
• Progressive Web App (PWA) - Install on your device for a native app experience with offline support

🖼️ Screenshots

Landing page	Vocabulary page with open language select
Test settings	Example test question

🛠 Tech stack

Core Framework & Language

• Next.js 15 (App Router) - React framework for server-side rendering, routing, and modern app architecture
• TypeScript - Type-safe JavaScript for improved developer experience and code reliability

Database & ORM

• PostgresSQL - Powerful, open-source relational database
• Neon - Serverless PostgreSQL platform with branching and autoscaling
• Drizzle ORM - TypeScript-first ORM for type-safe database queries and migrations

Styling & UI

• Tailwind CSS - Utility-first CSS framework for responsive design
• shadcn/ui - Composable UI component library built on Radix UI
• Radix UI - Unstyled, accessible component primitives
• Lucide React - Modern icon library

Features & Functionality

• Clerk - Authentication and protected routes
• Zod - Runtime type validation for forms and data schemas
• React Hot Toast - Toast notification system for user feedback

Development Tools

• ESLint & Prettier - Code linting and formatting for consistent code style
• Husky - Git hooks for automated pre-commit quality checks

⚙️ Installation for development

Pre-requisites

• Node.js (version 20 or higher recommended)
• Node package manager (e.g. npm or yarn)
• Neon PostgreSQL database
• Clerk project

Steps

1. Clone the repository:

   git clone https://github.com/jplimmer/ordbank.git
   cd ordbank

2. Install dependencies:

   npm install

3. Add your neon database connection and clerk keys to your .env file, and copy the below clerk sign-in redirects (see .env.example):

   # Neon database connection
   DATABASE_URL=your_neon_connection_string
   
   # Clerk project keys
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_your_clerk_public_key
   CLERK_SECRET_KEY=sk_your_clerk_secret_key
   
   # Clerk sign-in redirects
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
   NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

4. Start the development server:

   npm run dev

5. Open http://localhost:3000 with your browser to see the application.

📂 Project structure

ordbank/
├── src/
│   ├── app/               # Next.js App Router pages and routes
│   │   ├── @modal/        # Parallel slot for intercepting modal routes
│   │   ├── languages/
│   │   ├── sign-in/
│   │   ├── test/
│   │   ├── user-guide/
│   │   ├── vocabulary/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/        # Reusable React components organised by feature
│   ├── contexts/          # React contexts for global UI state
│   ├── hooks/
│   ├── lib/
│   |   ├── actions/       # Server actions organised by feature
│   |   ├── constants/
│   |   ├── db/            # Database schema and configuration
│   |   ├── services/      # Database and authentication operations
│   |   ├── types/
│   |   ├── validation/    # Zod validation schemas
│   |   ├── logger.ts
│   |   └── utils.ts
│   └── middleware.ts      # Clerk configuration
├── public/                # Static assets
├── package.json
└── README.md

🚀 Future development

Potential features and improvements include:

• Automatic word forms - Integration with language APIs to automatically generate conjugations, declensions, and grammatical variations (plural forms, verb tenses, etc.) from a single word entry
• Import/export - allow users to backup and share word lists
• Audio pronunciation - speech-to-text and vice-versa for vocabulary practice

🧩 Contributing

This is currently a personal project, but suggestions and contributions are welcome!

For feature requests or bug reports: Please open an issue first to discuss your ideas.

For code contributions:

1. Fork the repository.

2. Create a feature branch:

   git checkout -b feature/my-new-feature

3. Make your changes and commit them:

   git add .
   git commit -m "Add my new feature"

4. Push your changes to your forked repository:

   git push origin feature/my-new-feature

5. Open a pull request from your fork to the main repository.

Please note that as a personal project, I may be selective about which contributions to merge.

📜 Licence

This project is private and not currently licensed for public use.