# Morse Code Master - Next.js Version

Project homepage: https://morsecodemaster.com/
Source repository: https://github.com/SinanWang/Road-of-Develop

## Features

- 🌐 **Multi-language Support**: 10 languages (English, Chinese, Spanish, French, German, Japanese, Korean, Portuguese, Russian, Arabic)
- 🔄 **Text ↔ Morse Translator**: Convert text to Morse code and vice versa
- 🔊 **Audio Playback**: Listen to Morse code with adjustable speed, frequency, and volume
- 💡 **Visual Flashes**: See Morse code as visual light signals
- 📚 **8 Structured Lessons**: Learn from basics to advanced
- 📊 **Complete Alphabet Chart**: Reference for all letters, numbers, and punctuation

## Getting Started

### Prerequisites

- Node.js 18+ 
- npm or yarn

### Installation

```bash
# Install dependencies
npm install

# Run the development server
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Project Structure

```
src/
├── app/
│   ├── [locale]/           # Locale-based routing
│   │   ├── page.tsx        # Home page
│   │   ├── translator/     # Translator page
│   │   ├── lessons/        # Lessons pages
│   │   ├── alphabet/       # Alphabet chart
│   │   ├── privacy/        # Privacy policy
│   │   └── terms/          # Terms of service
│   ├── globals.css         # Global styles
│   └── layout.tsx          # Root layout
├── components/
│   ├── Navigation.tsx      # Navigation component
│   └── Footer.tsx          # Footer component
├── lib/
│   ├── morse.ts            # Morse code utilities
│   └── audio.ts            # Audio playback utilities
├── messages/               # i18n translation files
│   ├── en.json            # English
│   ├── zh.json            # Chinese
│   ├── es.json            # Spanish
│   ├── fr.json            # French
│   ├── de.json            # German
│   ├── ja.json            # Japanese
│   └── ko.json            # Korean
└── i18n.ts                 # i18n configuration
```

## Adding a New Language

1. Create a new JSON file in `src/messages/` (e.g., `it.json` for Italian)
2. Copy the structure from `en.json` and translate all strings
3. Add the locale to `src/i18n.ts`:

```typescript
export const locales = ['en', 'zh', 'es', 'fr', 'de', 'ja', 'ko', 'it'] as const;

export const localeNames: Record<Locale, string> = {
  // ...existing locales
  it: 'Italiano',
};
```

4. Update `middleware.ts` matcher pattern

## Deployment

### Static Export (for GitHub Pages, etc.)

```bash
# Build for static export
npm run build

# The static files will be in the 'out' directory
```

Uncomment the `output: 'export'` line in `next.config.mjs` for static export.

### Vercel (Recommended)

Deploy directly to Vercel for best performance with Server Components and ISR.

## Tech Stack

- **Framework**: Next.js 14 (App Router)
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **i18n**: next-intl
- **Audio**: Web Audio API

## License

MIT
