📘 English Irregular Verbs Table

An interactive, fast, and user-friendly web app for learning English irregular verbs (V1, V2, V3 forms). Perfect tool for English learners, ESL teachers, and anyone looking to improve their grammar and vocabulary.

🌐 Live Demo: mityaua.github.io/irregular-verbs-table

✨ Features

• 📚 Comprehensive Table: Clean, instantly searchable list of English irregular verbs (Infinitive, Past Simple, Past Participle).
• 🔎 Smart Search: Live search with URL sync and highlighting of matched forms.
• 🎓 Smart "Not Found" State: Shows a random irregular verb to learn when a search query yields no results.
• 🔊 Pronunciation: Click a speaker icon to hear the verb forms spoken via the Web Speech API.
• 🔗 Translation Links: Each verb links to its translation on Reverso Context (language detected from browser locale).
• 🌙 Modern UI/UX: Sticky header, scroll-to-top with reading progress indicator, and light/dark theme that follows the system preference.
• ⚡ Performance Optimized: Built with Vue 3, Vite, and Tailwind CSS for rapid loading.
• 📱 Mobile Responsive: Perfectly adapts to any screen size.

🛠 Tech Stack

Technology	Description
Vue 3	Reactive frontend framework
TypeScript	Type safety
Vite	Fast build tool
Tailwind CSS	Utility-first CSS (v4, CSS-first config)
Oxlint	The JavaScript Oxidation Compiler

📆 Installation

Clone the repository and install dependencies:

git clone https://github.com/mityaua/irregular-verbs-table.git
cd irregular-verbs-table
npm install

🚀 Development

Start the dev server:

npm run dev

Open http://localhost:5173 to view it in your browser.

Note: The dev server uses HTTPS certificates generated by vite-plugin-mkcert.

🔧 Build

Generate a production-ready build:

npm run build

The compiled files will be in the dist/ folder.

🚀 Deploy to GitHub Pages

Deployment is fully automated via a GitHub Actions workflow (.github/workflows/deploy.yml). Every push to the main branch builds the project and publishes the dist/ folder to the gh-pages branch, which GitHub Pages serves automatically.

Note: The base option in vite.config.ts is set for GitHub Pages:

base: "/irregular-verbs-table/";

📁 Project Structure

├── .github/workflows/       # CI/CD (build & deploy to GitHub Pages)
├── public/                  # Static assets (favicon, meta image, robots.txt, verbs.json)
├── src/
│   ├── assets/              # SVG icons and CSS
│   │   ├── css/index.css    # Tailwind CSS entry point
│   │   └── *.svg            # Inline SVG icons
│   ├── components/          # Vue components
│   ├── consts/              # App constants
│   ├── data/                # Verb data (JSON) and language maps
│   ├── enums/               # Enums (table columns)
│   ├── interfaces/          # TypeScript interfaces
│   ├── App.vue              # Root Vue component
│   ├── main.ts              # App entry point
│   └── style.css            # Global styles
├── index.html               # HTML entry point (SEO meta tags)
├── vite.config.ts           # Vite config
├── tsconfig.json            # TypeScript config
├── postcss.config.cjs       # PostCSS config
├── .oxlintrc.json           # Oxlint config
└── package.json

🧪 Scripts

npm run dev          # Start the dev server
npm run host         # Start the dev server on the network
npm run build        # Type-check and build for production
npm run preview      # Preview the production build
npm run lint         # Lint files with Oxlint
npm run type-check   # Run vue-tsc type checking
npm run format       # Format files using Prettier

🤝 Contributing

Contributions, issues and feature requests are welcome!

1. Fork the repository
2. Create your branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -m 'Add feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Create a new Pull Request

📄 License

This project is licensed under the MIT License.