Skip to content

Latest commit

 

History

History
60 lines (51 loc) · 3.42 KB

README.md

File metadata and controls

60 lines (51 loc) · 3.42 KB

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 Angular 12 (includes routing, guard, angular-animations, custom Pipe, custom Directive, Unit Tests with Karma & Jasmine etc.)
  • Firebase 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 YouTube 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