OnlyChats

Login
Signup
Chatroom
Dashboard
Figma Design Process #1
Figma Design Process #2
Figma Design Process #3

Inspiration

We recognised a gap between how people want to engage online and the way current social platforms are designed. Forums like Reddit encourage deep discussions across countless topics, but often feel anonymous and overwhelming. Messenger apps strengthen connections among friends, but lack a framework for topic-centered conversation. Instagram Notes allow users to share fleeting thoughts, but doesn’t spark multi-person discussion. OnlyChats creates a space where users can spontaneously start conversations, share reflections, ask for advice, and build authentic connections. Our goal was to build upon Reddit’s chatroom-style foundations, as the self-proclaimed “heart of the internet” — while creating a more personal, community-driven experience. We draw from the convenience of Instagram, combined with the self-expression and individuality of Twitter, to design a platform that feels natural and inviting. OnlyChats reimagines online interaction as lightweight, dynamic, and spontaneous, encouraging conversation without the pressure of curation or performance.

What it does

OnlyChats is a messenger-style web app where users can drop short, spontaneous prompts and spark temporary group discussions. Users post thought-starters ranging from "What song gives you main character energy?" to "What’s a good place for dinner?", creating lightweight threads that expire after a set time unless saved. A minimal feed of floating chat bubbles — with larger bubbles indicating higher engagement — lets users browse trending discussions or interact with friends' prompts. Whether posting a prompt or replying to others, OnlyChats fosters a dynamic, personal, and community-driven space for authentic conversation.

App features

User Authentication: Sign up and log in securely with Firebase authentication.
Dashboard/Feed: View and browse your current active group chats in a simple, mobile-first feed.
Low-Pressure Chatrooms: Enter easygoing, conversation-driven chatrooms built for spontaneous discussion.
Prompt-Based Discussions: Ask for advice, share opinions, post weekly favourites, or choose from suggested AI-generated prompts if you're unsure.
Instagram Notes Meets Reddit: Inspired by Instagram Notes — if they evolved into full discussions — and Reddit — if it were more casual, personal, and low-stress.
Lightweight Group Chats: Participate in small, topic-driven group chats designed for interaction, community, and fun.
Topic-Based Discovery: Meet new people and join public chatrooms based on interests, not just existing social connections.

How we built it

Firstly, we wrote our application using TypeScript. For the frontend, we used React with Next.js App Router for navigation and routing. We implemented a component-based architecture with Tailwind CSS for styling. The UI features interactive elements like the bubble-like topics on the home page and intuitive chat interfaces. On the backend, we integrated Firebase for authentication, real-time database functionality, and cloud functions. We used Firebase Authentication for user management, Firestore for storing chat data, and Firebase Cloud Functions for automated tasks like archiving inactive chats. For state management, we implemented Zustand to handle user data and authentication state throughout the application. This lightweight state management solution helped us maintain a clean architecture while efficiently sharing state between components.

Challenges we ran into

Database Issues:
We initially used MongoDB but faced frequent connectivity problems. Debugging connection strings and setting up authentication was too time-consuming. Hence, we decided on migrating to firebase.
Mid-Development Stack Changes:
Migrating to Firebase required a full redesign of our code functionalities. We also switched from React with custom routing to Next.js, leading to significant code refactoring around routing and state management.
Most of the team members were new to git and didn’t have much knowledge about version control. This caused a lot of version control issues early on which took a lot of time to address. With too many unstable main branches we had to make an entirely new github halfway.
UI Challenges:
Building our “Bubble” interface was quite challenging. We brainstormed the idea in our design as we wanted an interactive interface. So the visibility of your prompt is maximised, as in, everyone should see the same things. However, implementing it was a lot more difficult than we expected. We had to address issues such as the positions and shapes new bubbles would be added in, offsetting bubbles when one is expanded creating a ripple effect, creating a working boundary around our bubbles, finding the right spacing and size to make it look unclustered.
Consistency: because we delegated pages to work on individually then merge we struggled with consistency between pages. This caused our footer and header to look inconsistent across the different pages, different icons across pages, font, etc.

Accomplishments that we're proud of

To be honest, we are just proud of building something that actually works. But to dive deeper into each part, let’s start with the database. The database has been, to put it bluntly, a pain in the ass to integrate. So we are extremely proud of integrating it properly. Secondly, we wanted our UI to stand out, and we believe that we have achieved that. Mainly, developing the logic for the bubble interface was something we are proud of, as there wasn't a lot of help online. Finally, another feature we are proud of is the real-time chatrooms feature. We’ve definitely lost a few years of our lives trying to get it to work. But, I guess it was worth it?

What we learned

Through this hackathon, we learnt a lot about using React and Next.js as well as building databases with FireBase. This also taught us a lot about working as a team and how to coordinate our tasks effectively. Also, this was the first hackathon for a lot of our members, so we learnt a lot about the structure of building an application from the ground-up, which will be really valuable to us in the future.