{"id":21538150,"url":"https://github.com/shlmt/chatapp","last_synced_at":"2025-10-28T10:38:02.273Z","repository":{"id":262792509,"uuid":"886841675","full_name":"shlmt/chatApp","owner":"shlmt","description":"angular+firebase chat app","archived":false,"fork":false,"pushed_at":"2025-01-13T21:18:45.000Z","size":278,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-24T07:44:59.116Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shlmt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-11T17:45:58.000Z","updated_at":"2025-01-13T21:18:48.000Z","dependencies_parsed_at":"2024-12-21T21:32:51.438Z","dependency_job_id":null,"html_url":"https://github.com/shlmt/chatApp","commit_stats":null,"previous_names":["shlmt/chatapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlmt%2FchatApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlmt%2FchatApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlmt%2FchatApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlmt%2FchatApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shlmt","download_url":"https://codeload.github.com/shlmt/chatApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244110086,"owners_count":20399561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-24T04:10:49.172Z","updated_at":"2025-10-28T10:38:02.265Z","avatar_url":"https://github.com/shlmt.png","language":"TypeScript","readme":"# NgChat\n\nA real-time chat application with multiple chat rooms, built with Angular, Firebase, and Angular Material.\n\n## 🎉 Features\n\n- **Real-Time Chat:** Multiple chat rooms powered by Firestore database.\n- **Material Design:** Sleek and responsive UI using Angular Material.\n- **Authentication:** Secure login using Firebase Authentication \u0026 Sign in with Google or Github.\n- **File Attachments:** Attach files to messages, with a preview for image files.\n- **Voice Typing:** speech-to-text functionality using `webkitSpeechRecognition` for message input.\n- **Theme Switcher:** Switch between dark and light themes with CSS variables.\n- **Double-click to Copy:** Double-click a message to copy its content to the clipboard.\n- **Relative Time Display:** Messages show timestamps like \"just now,\" \"a minute ago,\" or \"yesterday at 14:35\".\n- **Links Display:** Detects URLs in text and renders them as clickable, styled links (securely sanitized by Angular).\n- **Keyboard Shortcuts:** Custom shortcuts for quick actions.\n- **Emoji Reactions:** React to messages with emojis using a custom-built emoji keyboard.\n- **GPT Chat Room:** Room for chatting with GPT via [my GenAI server](https://github.com/shlmt/gpt-integration).\n\n## 🏆 Technologies\n\n- ![Angular](https://img.shields.io/badge/Angular-12-brightgreen?style=for-the-badge\u0026logo=angular\u0026logoColor=white) **Angular 12**  (includes routing, guard, angular-animations, custom Pipe, custom Directive, Unit Tests with Karma \u0026 Jasmine etc.)\n- ![Firebase](https://img.shields.io/badge/Firebase-ffca28?style=for-the-badge\u0026logo=firebase\u0026logoColor=black) **Firebase** Google-Authentication, Storage, Firestore\n- **Angular Material**\n\n\n\u003cdetails\u003e\n \u003csummary\u003e\n   🚀 Getting Started\n\u003c/summary\u003e\nFollow these steps to set up the project:\n\n1. Clone the repository: ```git clone https://github.com/shlmt/ng-chat.git```\n2. Install dependencies: ```npm install```\n3. Run the application: ```ng serve``` or Run unit-tests: ```ng test --include='src\\app\\relative-time.pipe.spec.ts'```\n#### 🛠️ Firebase Configuration\nTo connect the app with Firebase, you need to configure the Firebase API keys and other settings. Follow these steps:\n1. Go to the [Firebase Console](https://console.firebase.google.com/).\n2. Select your project or create a new one.\n3. In the project settings, navigate to the \"General\" tab and find your Firebase configuration, which will look like this:\n```javascript\nfirebaseConfig: {\n  apiKey: \"your-api-key\",\n  authDomain: \"your-project-id.firebaseapp.com\",\n  projectId: \"your-project-id\",\n  storageBucket: \"your-project-id.appspot.com\",\n  messagingSenderId: \"your-messaging-sender-id\",\n  appId: \"your-app-id\",\n  measurementId: \"your-measurement-id\"\n}\n```\n\u003c/details\u003e\n\n## 📚 Credits\nInspired by [![YouTube](https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/YouTube_icon_%282013-2017%29.png/20px-YouTube_icon_%282013-2017%29.png)](https://www.youtube.com/playlist?list=PLjMCGG-3Are1OsXa-TTGSZBjT5ij3HAVn)\n[this course](https://www.youtube.com/playlist?list=PLjMCGG-3Are1OsXa-TTGSZBjT5ij3HAVn). Thanks to the instructor for the amazing content! \u003c/br\u003e\n*Note: This project includes personal solutions, modifications and customizations, and **many new features** beyond the original course content.*\n## 📷 Screenshots\n\u003cimg src=\"https://github.com/user-attachments/assets/d9479772-f235-479a-87d0-74dcb11b3d07\" height=\"300px\"/\u003e  \n\u003cimg src=\"https://github.com/user-attachments/assets/b48a7870-baf5-4ef4-b8b4-963b8993d072\" height=\"300px\"/\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/6bea81d4-a299-4241-a11c-6242bba6ec23\" height=\"300px\"/\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshlmt%2Fchatapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshlmt%2Fchatapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshlmt%2Fchatapp/lists"}