Tutorial App - Angular Learning Module

An interactive Angular learning platform with speech synthesis, transcript highlighting, and PDF export capabilities.

🌐 Live Demo

🚀 View Live Application

Experience the full functionality of the learning platform including speech synthesis, interactive transcripts, and PDF export features.

🚀 Features

• Interactive Learning: Navigate through HTML, CSS, JavaScript, and Angular topics
• Speech Synthesis: Text-to-speech functionality with voice customization
• Live Transcript: Real-time word highlighting during speech playback
• Pop-out Transcript: Detachable transcript window for better multitasking
• Audio Controls: Play, pause, mute/unmute with intuitive controls
• PDF Export: Export any lesson content as PDF
• Responsive Design: Modern UI built with PrimeNG components
• Voice Settings: Customizable speech rate, pitch, volume, and voice selection

🛠️ Built With

• Angular 18+ - Standalone components architecture
• PrimeNG - UI component library
• TypeScript - Type-safe development
• RxJS - Reactive programming
• jsPDF - PDF generation
• Web Speech API - Speech synthesis

🏃‍♂️ Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/sksaravanakumar18/tutorial-app.git
cd tutorial-app

2. Install dependencies:

npm install

3. Start the development server:

ng serve

4. Navigate to http://localhost:4200/

📖 Usage

• Navigation: Use the hamburger menu to browse topics
• Speech Controls: Play, pause, or mute audio using the transcript panel controls
• Word Highlighting: Click on any word in the transcript to start playback from that position
• Pop-out Window: Click the external link icon to open transcript in a separate window
• Settings: Configure speech settings (voice, rate, pitch, volume) via the settings modal
• Export: Export lesson content as PDF using the export button

🏗️ Build & Deployment

Development Build

ng build

Production Build

ng build --configuration production

Deploy to GitHub Pages

# Build for production with correct base href
ng build --configuration production --base-href "https://sksaravanakumar18.github.io/tutorial-app/"

# Deploy using angular-cli-ghpages
npx angular-cli-ghpages --dir=dist/angular-learning-module/browser

🧪 Running Tests

Run ng test to execute the unit tests via Karma.

🏛️ Architecture

The application follows Angular's standalone components architecture:

• Components: Modular UI components using PrimeNG
• Services: Business logic for speech synthesis, PDF export, and data management
• Signals: Reactive state management with Angular signals
• Lazy Loading: Optimized bundle loading for better performance

📁 Project Structure

src/
├── app/
│   ├── components/          # UI Components
│   │   ├── flyout-menu/     # Navigation menu
│   │   ├── settings-modal/  # Voice settings
│   │   ├── top-bar/         # Application header
│   │   └── transcript-panel/# Interactive transcript
│   ├── core/
│   │   ├── models/          # TypeScript interfaces
│   │   ├── pipes/           # Custom pipes
│   │   └── services/        # Business logic services
│   └── assets/
│       ├── content/         # HTML content files
│       └── data/            # JSON data files

🌟 Key Features Deep Dive

Speech Synthesis

• Web Speech API integration
• Customizable voice parameters (rate, pitch, volume)
• Real-time word boundary detection
• Cross-browser compatibility

Interactive Transcript

• Word-by-word highlighting during playback
• Click-to-play from any position
• Pop-out window for multitasking
• Synchronized with audio playback

PDF Export

• Dynamic content to PDF conversion
• Preserves formatting and styles
• Uses jsPDF and html2pdf libraries
• Export any lesson content instantly

📝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

🔗 Links

• Live Demo - Experience the app
• Repository - Source code
• Angular CLI Documentation - Angular CLI guide
• PrimeNG Documentation - UI components library

🚀 Deployment Status

• Platform: GitHub Pages
• URL: https://sksaravanakumar18.github.io/tutorial-app/
• Status: ✅ Live and Active
• Last Updated: November 2025

📱 Browser Support

• Chrome 80+
• Firefox 76+
• Safari 13+
• Edge 80+

Note: Speech synthesis features require modern browser support for Web Speech API.

📸 Screenshots

Main Interface

Interactive learning platform with topic navigation and content display

Transcript Panel

Real-time word highlighting during speech playbook

Settings Modal

Comprehensive voice and speech settings customization

🎯 Performance

• Initial Load: ~219 KB (gzipped)
• Lazy Loading: PDF export functionality loaded on demand
• Bundle Analysis: Optimized with tree-shaking
• Lighthouse Score: 90+ performance rating

🤝 Acknowledgments

• Angular team for the amazing framework
• PrimeNG team for the beautiful UI components
• Web Speech API for browser-native speech synthesis
• GitHub Pages for free hosting