DABubble — Real-Time Chat App
DABubble is the capstone of my frontend training — a Discord-inspired real-time chat planned and built by a team of three. It was my first major Angular project and the most complex frontend I had built to that point.
What is DABubble?
A fully-featured chat application with server and channel structure, direct messages and real-time communication — inspired by Discord. Users can create channels, join others, send messages and manage their profile. All data is synchronized live via Firebase.
Features
- Channel System — Create, join and manage channels
- Real-Time Messaging — Messages appear instantly without reloading
- Direct Messages — Private conversations between individual users
- User Authentication — Registration, login and profile management via Firebase
- Profile Pictures — Upload and manage user avatars
- Responsive Design — Optimized for desktop and mobile
Tech Stack
Angular TypeScript Firebase Firestore HTML CSS
Project Structure
DABubble/
├── 📁 src/ # Angular App (Components, Services, Models)
├── 📁 public/ # Static assets & profile pictures
├── 🌐 index.html # Entry point
├── ⚙️ angular.json # Angular configuration
├── ⚙️ firebase.json # Firebase configuration
├── ⚙️ package.json # Dependencies
└── ⚙️ tsconfig.json # TypeScript configuration
What I Learned
DABubble was my leap from Vanilla JavaScript to a proper framework. Managing the complexity of an Angular project in a team was a completely new experience:
- Angular — Components, services, routing, reactive forms and dependency injection
- TypeScript — Typing, interfaces and OOP in a scalable codebase
- Firebase Firestore — Real-time database with live subscriptions via observables
- RxJS — Reactive programming and handling asynchronous data streams
- Team Development in a Framework — Feature branches, clear component boundaries and agreements on shared services