palekouran

Palekouran is a modern language learning tool that combines traditional flashcards with interactive audio features. Record your pronunciation, get AI-powered translations, and track your progress, all in one place.

Table of Contents

1. Features
2. Demo
3. Tech Stack
4. Requirements
5. Getting Started
   1. Setting up the Database
   2. Environment Variables
   3. Installing Dependencies
   4. Running the Application
6. Deployment
7. License
8. Additional Resources
   1. Documentation
   2. Privacy Note

Features

• Audio Recording - Record and save pronunciations for each flashcard
• Multi-Language Support - Practice vocabulary across multiple language pairs
• Custom Decks - Organize vocabulary by topic or category
• Interactive Study Mode - Flip cards to test your knowledge
• Progress Tracking - Monitor your learning journey over time

Demo

Live Demo: palekouran.mauworks.com

Test Account:

• Email: [email protected]
• Password: password

Tech Stack

Frontend:

• React - UI library
• React Router - Client-side routing
• Vite - Build tool and dev server
• TypeScript - Type safety
• Styled Components - CSS-in-JS styling
• Font Awesome - all icons

Backend / Infrastructure:

• Node.js - Runtime environment
• Hono - Lightweight, TypeScript-first web framework
• Supabase - Postgres database, authentication, and storage
• Drizzle ORM - Type-safe database queries
• Railway - Hosting platform
• ElevenLabs - AI Text to Speech

Requirements

• Node v24.11.0
• pnpm v11.6.0

Getting Started

Setting up the Database

1. Create an account on Supabase
2. Navigate to your dashboard and create a new project called palekouran
3. For more details, see the Supabase quickstart guide

Database Migrations:

If you need to apply changes to the database, generate and run migrations using Drizzle:

# Generate a migration
npx drizzle-kit generate --name=add_some_column_to_some_table

# Apply migrations
npx drizzle-kit migrate

Environment Variables

Copy the example environment files in both frontend and backend directories:

cp .env.example .env

Then add your values to each .env file.

Frontend Variables:

Variable	Description
VITE_API_URL	Backend API URL (default: http://localhost:3000)

Backend Variables:

Variable	Description
PORT	Port number (default: 3000)
DATABASE_URL	PostgreSQL connection string (format: postgresql://postgres:[password]@db.[project].supabase.co:5432/)
SUPABASE_URL	Your Supabase project URL
SUPABASE_PUBLISHABLE_KEY	Supabase public API key (find here)
SUPABASE_SECRET_KEY	Supabase secret API key (find here)
FRONTEND_URL	Frontend URL (default: http://localhost:5173)
ELEVENLABS_API_KEY	ElevenLabs API keys (find here)

Installing Dependencies

nvm use
pnpm install

Running the Application

Start both the frontend and backend development servers:

Frontend:

cd frontend
pnpm dev

Backend:

cd backend
pnpm dev

The application will be available at http://localhost:5173

Deployment

The application is deployed on Railway.

Live Demo: palekouran.mauworks.com

Test Account:

• Email: [email protected]
• Password: password

License

This project is licensed under the PolyForm Noncommercial License - see the LICENSE file for details.

Additional Resources

Documentation

Drizzle + Supabase:

• Drizzle with Supabase Tutorial
• Supabase Database Guide
• Row Level Security (RLS)
• Indexes and Constraints
• Database Transactions

Supabase Storage:

• Storage Quickstart

React:

• Context API
• React Router

Privacy Note

By default, Supabase enables telemetry data sharing. From Supabase:

By opting in to sharing telemetry data, Supabase can analyze usage patterns to enhance user experience and use it for marketing and advertising purposes.

You can disable this in your account settings under Analytics and Marketing.

---

Created by @mau11