🎤 Multilingual Speech-to-Text Note Taker

A complete full-stack application that converts speech to text in multiple languages with real-time updates and persistent storage.

✨ Features

• 🎙️ Real-time Speech Recognition - Convert speech to text using Web Speech API
• 🌍 Multilingual Support - Support for 12+ languages including English, Spanish, French, German, Chinese, Hindi, and more
• 💾 Persistent Storage - Notes saved to database with full CRUD operations
• 🔄 Real-time Updates - WebSocket integration for live collaboration
• 📊 Analytics - Statistics and insights about your notes
• 🎨 Modern UI - Beautiful, responsive design with animations
• 📱 Mobile Friendly - Works on desktop, tablet, and mobile devices
• ⚡ Offline Support - Continue working even when backend is unavailable

🏗️ Architecture

Backend (Spring Boot)

• REST API - Full CRUD operations for speech notes
• WebSocket - Real-time updates and live transcription sharing
• H2 Database - Embedded database for development
• JPA/Hibernate - Object-relational mapping
• Validation - Input validation and error handling

Frontend (React)

• Modern React - Hooks-based functional components
• Real-time Speech - Web Speech API integration
• WebSocket Client - Live updates and collaboration
• Responsive Design - Mobile-first CSS with animations
• Error Handling - Graceful degradation and offline support

🚀 Quick Start

Prerequisites

• Java 17 or higher
• Node.js 14 or higher
• Maven 3.6 or higher

Option 1: Using Batch Scripts (Windows)

1. Start Backend:

   double-click start-backend.bat

2. Start Frontend:

   double-click start-frontend.bat

Option 2: Manual Setup

1. Backend Setup:

   cd backend
   mvn clean package
   java -jar target/speech-to-text-backend-1.0.0.jar

2. Frontend Setup:

   cd frontend
   npm install
   npm start

Access the Application

• Frontend: http://localhost:3000
• Backend API: http://localhost:8080
• H2 Database Console: http://localhost:8080/h2-console

🎯 How to Use

1. Open the app in Chrome or Edge (required for speech recognition)
2. Select your language from the dropdown
3. Click "Start Listening" and allow microphone access
4. Speak clearly - you'll see live transcription
5. Pause briefly - a note will be automatically created
6. Edit or delete notes using the buttons
7. Search notes using the search box

🌍 Supported Languages

• 🇺🇸 English (US)
• 🇪🇸 Spanish
• 🇫🇷 French
• 🇩🇪 German
• 🇮🇹 Italian
• 🇧🇷 Portuguese
• 🇷🇺 Russian
• 🇯🇵 Japanese
• 🇰🇷 Korean
• 🇨🇳 Chinese
• 🇮🇳 Hindi
• 🇸🇦 Arabic

📡 API Endpoints

Notes

• GET /api/notes - Get all notes
• POST /api/notes - Create new note
• GET /api/notes/{id} - Get specific note
• PUT /api/notes/{id} - Update note
• DELETE /api/notes/{id} - Delete note
• GET /api/notes/search?q={query} - Search notes
• GET /api/notes/stats - Get statistics

WebSocket

• ws://localhost:8080/ws - WebSocket endpoint for real-time updates

🛠️ Development

Project Structure

speech-to-text-app/
├── backend/                 # Spring Boot backend
│   ├── src/main/java/      # Java source code
│   ├── src/main/resources/ # Configuration files
│   └── pom.xml            # Maven dependencies
├── frontend/               # React frontend
│   ├── src/               # React source code
│   ├── public/            # Static assets
│   └── package.json       # npm dependencies
├── start-backend.bat      # Backend startup script
├── start-frontend.bat     # Frontend startup script
└── README.md             # This file

Key Technologies

• Backend: Spring Boot, Spring Data JPA, WebSocket, H2 Database
• Frontend: React, Web Speech API, WebSocket, CSS3 Animations
• Build Tools: Maven, npm

🔧 Configuration

Backend Configuration (backend/src/main/resources/application.yml)

• Server port, database settings, CORS configuration
• WebSocket settings and supported languages

Frontend Configuration

• API base URL in frontend/src/services/apiService.js
• Language settings in frontend/src/components/LanguageSelector.js

🐛 Troubleshooting

Common Issues

1. Speech recognition not working:

   • Use Chrome or Edge browser
   • Allow microphone permissions
   • Check if HTTPS is required (some browsers)

2. Backend connection failed:

   • Ensure Java 17+ is installed
   • Check if port 8080 is available
   • Verify Maven is installed correctly

3. Frontend won't start:

   • Ensure Node.js 14+ is installed
   • Run npm install in frontend directory
   • Check if port 3000 is available

Enjoy building with speech! 🎤✨