We wanted to build something to help people overcome social anxiety. ChatBud was our solution by easing users into social situations with easy virtual chats by matching people with common interests. We gamified the idea of steady social interactions which are proven to help people overcome their anxiety.

What it does

ChatBud is a social platform that gamifies chats with strangers to motivate socially anxious people to step out of their comfort zone with support. Every day you can be matched with a different stranger (aka bud!) to chat with who has similar interests. Each day you talk with someone, your plant (or bud) will grow taller. This encourages you to keep coming back and gives you a cute indicator of progress.

How we built it

We used TypeScript, React, and Next.js to build our frontend. For styling and design, we used Tailwind CSS combined with Styled Components. We used this awesome template developed by one of our members here.

For our backend server, we used JavaScript, Node.js, Express.js, Twilio's SMS API, and Socket.IO to facilitate real-time communication between users. We also used Microsoft Azure to create a LUIS (Language Understanding) model that processes user's interests and classifies them into categories. We match users searching for connections based on those categories.

Challenges we ran into

Our initial websocket implementation did not work with our server setup so we had to pivot quickly to ensure messaging could be set up sooner rather than later. Being remote was difficult for collaboration, but we made it work with screensharing and GitHub. Because of time constraints we decided to prioritize the matchmaking and chat system over the plant gamification system, since the css animation was taking so long. We did end up with a good framework that could be easily extended to add in the plant growth in the future.

Most of our team was not familiar with styling using Tailwind CSS. This slowed down frontend development significantly since we had to learn it along the way.

Accomplishments that we're proud of

We're proud of getting Next.js and Socket.IO to communicate with our backend server. The implementation was difficult to work out and required a lot of time spent by our backend developer.

What we learned

We learnt how to use Next.js, Tailwind CSS, Styled Components, Twilio's API, and Microsoft Azure and integrate them together in a web application.

What's next for ChatBud

A few of the next features we plan on bringing include dynamic plant height based on personal progress, different plant types, more tailored suggestions and matches, and more accessibility.

Share this project: