Project Overview
Carls Chat began with an idea I pitched during our brainstorming phase: a live chat website tailored for Carleton students. Inspired by the gaps in communication across campus, especially between departments and clubs, we designed a platform where users could communicate in real-time across private rooms, public channels, and interest-based groups. We intentionally veered from common game projects to pursue a functional communication system built entirely from scratch.
Timeline
2 months (Fall 2024)
My Role
I led the frontend development and UI/UX design, pitched the original concept, and worked on the backend WebSocket logic, Firebase data routing, and presence management. I ensured visual design and backend functionality were integrated seamlessly across the tech stack.
Technologies Used
- Frontend: React.js, Material UI, Adobe Fresco (hand-drawn elements)
- Backend: Node.js, WebSockets
- Database: Firebase Realtime Database
Design Philosophy
We chose to doodle all graphics, including buttons, avatars, maps, and food items, by hand in Adobe Fresco to give the platform a playful, student-centric identity. This added significant time to the project, especially when iterating on color themes. We started with a black-and-white aesthetic, which later evolved into a colorful palette after receiving usability feedback.
I specifically drew the maps, food icons, and avatars for the Sayles Hill Campus Center page. Balancing visual design and functional UI involved repeated iterations with feedback from users both within and outside our class.
Development & Collaboration
Our group, Daniel, Daniel, Alex, Palmy, and I, split into front-end and back-end subteams. Initially, I worked solo on the UI, then collaborated with Palmy on the Sayles page. I also contributed to backend development, setting up WebSocket events, presence status logic, and Firebase message storage integration. Syncing both ends meant debugging database sync issues and writing socket events that wouldn’t overload our lightweight Firebase backend.
Key Features
- Real-time messaging: Enabled via WebSockets with typing indicators
- Multiple chat rooms: Based on academic departments and student groups
- User presence indicators: Displayed online status with real-time updates
- Live avatars and animations: Hand-drawn for authenticity
- Mobile responsiveness: Clean layout for all devices
Challenges & Design Decisions
- Maintaining consistency in hand-drawn assets across pages
- Choosing and updating color themes late in the project lifecycle
- Omitting the Weitz Center from the map due to layout constraints
- Avoiding third-party images in favor of self-created designs
- Debugging backend crashes when frontend WebSocket code broke message routing
One particularly tough moment was deciding whether to abandon the hand-drawn look in favor of faster solutions. But staying true to our aesthetic vision paid off, users appreciated the charm and cohesion it added.
Results & Impact
85%
Reduction in Email Use
Carls Chat stood out among our peers' projects due to its real-world utility and original aesthetic. It brought together technical functionality and emotional design in a way that felt truly personal and useful.
Conclusion
This project taught me that leadership involves both vision and vulnerability. Pitching an unconventional idea, supporting my team through uncertainty, and sticking with creative decisions all required courage. I’m proud that I led us through that process with empathy and persistence.
As a full-stack contributor, I learned how frontend decisions ripple into backend constraints, and vice versa. From debugging WebSocket crashes to pairing on CSS redesigns, I gained technical fluency and team empathy. I now better understand the importance of co-designing features, not just screens, with engineers, designers, and users alike.
Most importantly, I’m thankful for the collaboration with Daniel, Daniel, Alex, and Palmy. From solving backend bugs to debugging CSS side-by-side, our team showed what it means to build not just software, but trust. Carls Chat isn’t just a product, it’s a story of creative risk, team resilience, and human-centered design.