https://github.com/shlmt/chatapp
angular+firebase chat app
https://github.com/shlmt/chatapp
angular angular-animations angular-material custom-directive custom-pipe emoji-picker firebase-auth firebase-stroage firestore frontend keyboard-shortcuts signin-with-github signin-with-google switch-theme voice-typing
Last synced: 6 months ago
JSON representation
angular+firebase chat app
- Host: GitHub
- URL: https://github.com/shlmt/chatapp
- Owner: shlmt
- Created: 2024-11-11T17:45:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-13T21:18:45.000Z (over 1 year ago)
- Last Synced: 2025-01-24T07:44:59.116Z (over 1 year ago)
- Topics: angular, angular-animations, angular-material, custom-directive, custom-pipe, emoji-picker, firebase-auth, firebase-stroage, firestore, frontend, keyboard-shortcuts, signin-with-github, signin-with-google, switch-theme, voice-typing
- Language: TypeScript
- Homepage:
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
- **GPT Chat Room:** Room for chatting with GPT via [my GenAI server](https://github.com/shlmt/gpt-integration).
## 🏆 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](https://console.firebase.google.com/).
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:
```javascript
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 [](https://www.youtube.com/playlist?list=PLjMCGG-3Are1OsXa-TTGSZBjT5ij3HAVn)
[this course](https://www.youtube.com/playlist?list=PLjMCGG-3Are1OsXa-TTGSZBjT5ij3HAVn). 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
