DABubble
Slack-style team chat with channels, DMs, threads, reactions, and real-time presence.
💬 Real-time team chat with channels, DMs, threads, and reactions
DABubble brings a smooth experience to the browser: create channels, send direct messages, reply in threads, react with emojis, and see who's online, all powered by Angular and Firebase.
🔍 What is DABubble?
DABubble is a modern chat application. It offers real-time messaging across public channels, private channels, and direct messages, plus threads, emoji reactions, mentions, and presence indicators. The app uses Firebase (Firestore, RTDB, Auth, Storage) with AngularFire to deliver live updates, secure authentication, and a responsive, accessible UI that feels at home on both desktop and mobile.
🧩 Key Features
📌 Why I Built This
I wanted to deeply understand what it takes to build a modern, real-time messaging app: presence, threads, reactions, and secure multi-user data flows. DABubble became my playground for Angular 17, Firebase, Tailwind, and real-time UX patterns, while recreating the collaboration flow of tools like Slack and Discord.
💡 Use Cases
- Create workspaces for small teams and organize conversations into topic-based channels.
- Use direct messages and group channels to coordinate quickly without email.
- Keep busy channels readable by moving detailed discussions into threads.
- Rely on presence indicators and last-seen times to know who's available.
- Run the app during coding sessions, study groups, or side-project collabs.
🧪 Tech Stack Overview
- Angular 17 - Standalone components, typed routing, and SSR support power the workspace shell, channel layout, and auth-guarded routes.
- TypeScript - Strong typing for users, channels, messages, threads, and presence models keeps chat logic predictable and refactors safe.
- Tailwind CSS - Utility-first styling for the Slack-like layout, responsive sidebar + content area, and accessible focus/hover states.
- Firebase - Auth, Firestore, RTDB, and Storage provide secure login, real-time messages, presence tracking, and avatar/file uploads.
- AngularFire - Bridges Angular and Firebase with typed observables for streams, simplifying real-time listeners and auth state handling.
⚙️ Getting Started
🧠 Challenges & Learnings
- Designing Firestore collections for users, groups, private chats, messages, and threads upfront avoids painful migrations later.
- Combining AngularFire streams with local UI state provides smooth real-time updates without over-complicating global state management.
- Implementing mentions and reactions cleanly requires a clear separation between message content, metadata, and aggregated reaction counts.
- Presence tracking with Firebase RTDB + heartbeats is powerful but needs careful timeouts and cleanup to stay accurate.
- Investing early in accessibility (focus management, ARIA roles, keyboard shortcuts) makes a dense chat UI feel much more polished.
📸 See it in Action
Want to chat about this project? Let’s chat.