AirTranslate

A modern, beautiful translation app built with Next.js, TypeScript, and Tailwind CSS.

Features

• 🌍 Support for 100+ languages
• ⚡ Fast and responsive UI
• 🎨 Modern design with dark mode support
• 📱 Mobile-friendly interface
• 🔄 Easy language swapping
• ✨ Beautiful gradient backgrounds

Getting Started

First, install the dependencies:

npm install
# or
yarn install
# or
pnpm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

🛠 Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript for type safety
• Styling: Tailwind CSS with Apple design system
• UI Components: Custom components with shadcn/ui patterns
• Icons: Lucide React
• PWA: Service Worker, Web App Manifest
• Audio: Web Speech API, Speech Synthesis API
• Storage: LocalStorage with custom hooks
• Fonts: Apple system fonts (-apple-system, SF Pro Display)

📁 Project Structure

air-translate/
├── app/
│   ├── api/translate/   # Translation API endpoint
│   ├── globals.css      # Global styles with Apple design system
│   ├── layout.tsx       # Root layout with PWA metadata
│   └── page.tsx         # Main translation interface
├── components/
│   ├── ui/              # Reusable UI components
│   ├── TranscriptManager.tsx  # Transcript management
│   └── SettingsModal.tsx      # Settings interface
├── hooks/
│   └── useTranscripts.ts      # Transcript state management
├── lib/
│   ├── storage.ts       # Local storage utilities
│   └── utils.ts         # Utility functions
├── public/
│   ├── manifest.json    # PWA manifest
│   ├── sw.js           # Service worker
│   ├── robots.txt      # SEO robots file
│   └── sitemap.xml     # SEO sitemap
├── scripts/
│   └── generate-icons.js # PWA icon generation guide
└── Configuration files

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Modern browser with Web Speech API support
• AirPods or compatible Bluetooth headphones (optional)

Installation

1. Clone and install dependencies:

   git clone <repository-url>
   cd air-translate
   npm install

2. Start development server:

   npm run dev

3. Open in browser:

   http://localhost:3000
   

PWA Installation

1. On iOS Safari:

   • Tap the Share button
   • Select "Add to Home Screen"
   • The app will install as a native-like experience

2. On Android Chrome:

   • Tap the menu (three dots)
   • Select "Add to Home Screen"
   • Confirm installation

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build optimized production bundle
• npm run start - Start production server
• npm run lint - Run ESLint for code quality

🎯 Usage

Basic Translation Flow

1. Select Languages: Choose source and target languages from dropdowns
2. Grant Permissions: Allow microphone and audio access when prompted
3. Start Listening: Tap the microphone button to begin speech recognition
4. Speak: Talk in the source language (e.g., Spanish)
5. Hear Translation: Listen to the translation in your AirPods
6. View History: Check the transcript history for past translations

Advanced Features

• Language Swapping: Use the swap button to quickly reverse language direction
• Export Data: Download your translation history as JSON
• Import Data: Restore previous translation history
• Settings: Configure audio preferences and notifications
• Share: Share individual translations using native sharing

🔧 Configuration

Environment Variables

Create a .env.local file for production:

NEXT_PUBLIC_GOOGLE_TRANSLATE_API_KEY=your_api_key_here
NEXT_PUBLIC_APP_URL=https://your-domain.com

Google Translate API Integration

To enable real translation (currently simulated):

1. Get a Google Cloud Translation API key
2. Add it to your environment variables
3. Update the /app/api/translate/route.ts file

📱 PWA Features

• Offline Support: Basic functionality works without internet
• App-like Experience: Full-screen, no browser UI
• Push Notifications: Ready for future notification features
• Background Sync: Service worker handles data synchronization
• Install Prompts: Automatic installation suggestions

🎨 Design System

Apple Design Principles

• Clarity: Clear visual hierarchy and typography
• Deference: Content is the focus, UI supports it
• Depth: Layered interfaces with proper shadows and blur
• Accessibility: WCAG 2.1 AA compliance
• Responsive: Adapts to all screen sizes

Color Palette

• Primary: Apple Blue (#007AFF)
• Background: System colors with dark mode support
• Text: High contrast for readability
• Accents: Subtle grays and blues

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Follow the existing code style and Apple design guidelines
4. Add tests for new functionality
5. Commit your changes (git commit -m 'Add some amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Apple Human Interface Guidelines
• Google Web Speech API
• Next.js and Vercel team
• Tailwind CSS community
• Lucide icon library