# Development Guidelines
- Write clean and consistent code following the linting rules.
- Follow React best practices for component-based development.
- Commit frequently with meaningful messages.
# WDAudioLex Frontend
A tool for matching audio files from Wikimedia Commons with lexemes on Wikidata and adding pronunciation statements.
## Table of Contents
1. Project Overview
2. Features
3. Project Structure
4. Dependencies
5. Setup and Installation
6. Development
7. Contributing
---
## Project Overview
The Audio Lexeme Matching Tool is a frontend application that helps Wikimedia contributors match audio files from Commons with lexemes on Wikidata, facilitating the addition of pronunciation statements. The tool provides a user-friendly interface for searching, matching, and contributing pronunciation data.
## Features
- **Category Selection**: Search for audio files within specific Commons categories
- **Pattern Matching**: Enter patterns to find matching lexemes
- **Audio Playback**: Advanced audio player with format fallbacks and waveform visualization
- **Pronunciation Addition**: Interface for adding pronunciation data to lexemes
- **Multi-format Support**: Support for .ogg, .mp3, and .wav audio formats
- **Error Recovery**: Comprehensive error handling with fallback options
## Project Structure
```tree
src/
├── assets/ # Static assets (images, icons)
├── components/ # Reusable UI components
│ ├── audio/ # Audio-related components
│ │ └── AudioPlayer.tsx
│ ├── common/ # Shared components
│ ├── lexeme/ # Lexeme-related components
│ │ ├── AddPronunciationButton.tsx
│ │ ├── AddPronunciationForm.tsx
│ │ ├── AudioPronunciationExample.tsx
│ │ ├── CategorySelector.tsx
│ │ ├── PatternInput.tsx
│ │ └── ResultsDisplay.tsx
│ ├── Pagination/ # Pagination components
│ └── wikimedia/ # Wikimedia-styled components
├── pages/ # Page components
│ ├── Contributions …