NgChat

A real-time chat application with multiple chat rooms, built with Angular, Firebase, and Angular Material.

🎉 Features

• Real-Time Chat: Multiple chat rooms powered by Firestore database.
• Material Design: Sleek and responsive UI using Angular Material.
• Authentication: Secure login using Firebase Authentication & Sign in with Google or Github.
• File Attachments: Attach files to messages, with a preview for image files.
• Voice Typing: speech-to-text functionality using webkitSpeechRecognition for message input.
• Theme Switcher: Switch between dark and light themes with CSS variables.
• Double-click to Copy: Double-click a message to copy its content to the clipboard.
• Relative Time Display: Messages show timestamps like "just now," "a minute ago," or "yesterday at 14:35".
• Links Display: Detects URLs in text and renders them as clickable, styled links (securely sanitized by Angular).
• Keyboard Shortcuts: Custom shortcuts for quick actions.
• Emoji Reactions: React to messages with emojis using a custom-built emoji keyboard.

🏆 Technologies

• Angular 12 (includes routing, guard, angular-animations, custom Pipe, custom Directive, Unit Tests with Karma & Jasmine etc.)
• Firebase Google-Authentication, Storage, Firestore
• Angular Material

🚀 Getting Started

Follow these steps to set up the project:

1. Clone the repository: git clone https://github.com/shlmt/ng-chat.git
2. Install dependencies: npm install
3. Run the application: ng serve or Run unit-tests: ng test --include='src\app\relative-time.pipe.spec.ts'

🛠️ Firebase Configuration

To connect the app with Firebase, you need to configure the Firebase API keys and other settings. Follow these steps:

1. Go to the Firebase Console.
2. Select your project or create a new one.
3. In the project settings, navigate to the "General" tab and find your Firebase configuration, which will look like this:

firebaseConfig: {
  apiKey: "your-api-key",
  authDomain: "your-project-id.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
  measurementId: "your-measurement-id"
}

📚 Credits

Inspired by this course. Thanks to the instructor for the amazing content!
Note: This project includes personal solutions, modifications and customizations, and many new features beyond the original course content.

📷 Screenshots