rdjWiss/kabyle-learner

# Kabyle Learner A simple web app for studying and revising the Kabyle language (North Africa), built with React, Vite, TypeScript, and Tailwind CSS. 🔗 **Live site**: kabyle-learner on GitHub Pages --- ## 🚀 Features - 📚 Browse lessons with vocabulary and example phrases - ✅ Take interactive quizzes with feedback and score tracking - ⏱ Timer-based questions - 🔁 Retry quizzes with new random questions - ⛔ Stop quiz anytime - 🔊 Sound effects for correct and wrong answers - 🎨 Clean UI using Tailwind CSS with Amazigh theme colors - 📱 Mobile-friendly layout - 🧭 Routing with React Router - 🚫 404 page for unmatched routes - 🧪 Cypress component tests - ⚙️ GitHub Actions CI/CD pipeline --- ## 💪 Tech Stack - Vite - React - TypeScript - Tailwind CSS v4 - React Router DOM - Cypress for component testing - GitHub Actions for CI/CD --- ## 📦 Setup Instructions ### 1. Clone the repo ```bash git clone github.com cd kabyle-learner ``` ### 2. Install dependencies ```bash npm install ``` ### 3. Run the development server ```bash npm run dev ``` The app will be available at: `localhost` --- ## 🧪 Running Tests ### Run Cypress Component Tests ```bash npx cypress open --component ``` You can also run tests headlessly: ```bash npx cypress run --component ``` Test files live in: ``` cypress/component/**/*.cy.tsx ``` --- ## 🔄 CI/CD Workflow This project uses **GitHub Actions** to: - Run Cypress component tests - Build the app with Vite - Deploy to **GitHub Pages** when pushing to `master` Workflow file: `.github/workflows/deploy.yaml` --- ## 🧺 Project Structure ``` src/ ├── assets/ # Static assets (e.g. sound effects) ├── components/ # (optional shared components) ├── data/ # Static lesson data (vocab + examples) │ └── lessons.ts ├── pages/ │ ├── Home.tsx │ ├── Lessons.tsx │ ├── LessonDetail.tsx │ ├── Quiz.tsx │ └── NotFound.tsx ├── App.tsx ├── main.tsx └── index.css …