Academic project | 2025
Angular Chat App with Spring Boot & Firebase
Real-time chat app with secure cookie-based JWT auth, live presence updates, and Firebase-backed message/image persistence.
Role
Full-stack developer in a 2-person team (Angular frontend, Spring Boot APIs, Firebase integration, deployment)
Stack
AngularSpring BootREST APIsJWTFirebase FirestoreGoogle Cloud StorageWebSocketCloud Run
Problem
Deliver a production-style chat product where users can authenticate, exchange text/image messages, and see live user presence (ONLINE/AWAY/OFFLINE) without polling.
Local source folder: chatApp
Architecture / System Design
- - Angular frontend with login/chat routes, route guards, and signal-based state for messages and user statuses.
- - Spring Boot REST API for auth (`/auth/login`, `/auth/logout`), messages (`/messages`), and presence (`/user-status`).
- - Firebase Firestore stores user accounts, messages, and statuses; Firebase Storage handles optional image uploads in chat messages.
- - WebSocket endpoint (`/notifications`) broadcasts lightweight events; clients refetch messages/status after each notification.
Engineering Choices
- - Stored JWT in an HttpOnly, Secure `__session` cookie and validated sessions on protected endpoints before processing requests.
- - Used BCrypt for password hashing and created accounts on first login to simplify onboarding in an academic setting.
- - Implemented cursor-style pagination with `fromId` and a 20-message cap to keep chat history fetches predictable.
- - Used localStorage/sessionStorage heartbeat logic to keep multi-tab presence states consistent (ONLINE/AWAY/OFFLINE).
- - Deployed with Firebase Hosting rewrites for API routes and a Cloud Run backend service for runtime workloads.
Challenges
- - Keeping presence status correct when a user opens multiple tabs and closes them in different orders.
- - Balancing real-time responsiveness with simple infrastructure by using WebSocket notifications plus targeted refetches.
- - Handling cross-origin cookies and environment configuration across local development and cloud deployment.
Results / Lessons Learned
- - Delivered an end-to-end chat app with authentication, text/image messaging, and live presence indicators.
- - Added backend integration tests for auth protection, message ordering, pagination cursor behavior, and result-size limits.
- - Established a deployable full-stack baseline (Angular + Spring Boot + Firebase + Cloud Run) that can be extended with group chat and richer moderation features.
Screenshots
