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

# Install dependencies
npm install

# Run the development server
npm run dev

Open 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:

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.)

# 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