project

0

Last Updated:

Birdhaus

A social-media, geolocation based, anonymous group chat app.

Post image

The Tech Stack

  • Typescript
  • React (Pretty much the entire app)
  • React Native (For easy porting to native mobile apps)
  • Redux (App-wide state management)
  • Firebase (Backend and NoSQL database)
  • Expo (Bridge the gap between the web and native apps)
  • Nx (Monorepository architechture to house all the code sharing)

The Situation

During our undergraduate university years, me and Yulian created our own separate projects which differed in concept, execution and technologies. This particular project we started after a semester into our graduate studies at NYU and it was meant to be a culmination of our separate ideas, experiences and projects in our past into a modern and refined project that carried the best points of our existing works.

For me personally, this is a continuation of my Rally iOS project. However, this project was meant for a more global audience while also being more refined and narrower in scope. While Rally was primarily a project I used to learn iOS development, where I implemented tons of features and functionality no-one would ever use, this site was meant to have a more spearheaded plan that would allow us to solve a very specific niche.

Birdhaus' Pitch

Brainstorming

We wanted to allow users from all over the world to talk with one another about anything that interests them in the moment. We wanted to put likeminded individuals in the same mood together into the same rooms. The whole experience was meant to be engaging, interactive and dynamic. We wanted the application to feel alive, thus we also knew we had to get rid of those pesky zombie group chats where the conversation died out a long time ago. The primary purpose was to discover new people and perhaps make a friend or two. In order to succeed in this, we decided to make group chats temporary and live only as long as someone in it was contributing something meaningful to the conversation. Should there be no activity for several hours, the chat and all of its contents would disappear into the wind encouraging you to find other active discourse. Think of it more like an icebreaker, or maybe musical chairs.

A Walkthrough of Birdhaus

We knew from the beginning we wanted to hit three different markets: web, iOS and Android. And for each, we wanted the experience to be seamless from one platform to the next. We did not want users to visit our site and then have to download a separate app onto their devices. We wanted the site to be the app itself. This was tied in with our plan to allow users to create anonymous burner accounts. We preferred to have users who just jumped in for a while but contributed to the conversation over isolating people entirely behind a registration page. The entire application is one SPA (single-page application). Profiles, chatrooms, discover features, etc. all reside as panes on the home page. The layout is meant to feel more like a HUD where the center of attention is on the globe and it's activity, and around the user's peripherals are the details of the action. We felt it gave a more immersive feeling to the app that made it more alive than a standard chat application focused on dull scrolling text.

The entire application's backend is tied to Google Firebase. We use it to handle the storage of data, host the web app component, perform markeing, authentication and more. This allows us to focus more strongly on the front-end, where we can tailor the user experience and make for a more engaging experience.

We started out building the project with React Native exclusively, as our plan was to make the app mobile-first and then simply create a web landing page where users can learn more about it. I personally did not want to have this barrier to entry and as someone who hates being forced to download apps from app stores, I opted that we too make the web component an app in itself.

This lead to us briefly splitting our priorities as Yulian built up the mobile variant and I began work on the web aspect. Once we saw the potential of both and the many similarities of the two repositories, we set out to find a way to merge the two codespaces together and share as much of the code and components as possible. This led to us finding Nx, a monorepository package that allowed us to created different applications inside one repository with platform specific code inside those apps, while also creating shared components in separate libraries we could link to from any app. With the monorepo architechture we were able to share approximately 85% of the app logic and components.

I later optimized the performance of the application from a Lighthouse rating of 32% to 96%, decreasing time-to-interactive from 7.3 seconds to 1.8 seconds. An improvement of 75.3%.

Beta Signup Page

Closing Thoughts

This project has been in the works for a little over a year due in large part to our graduate studies. It has been a deep dive for us into what it takes to build a modern web application. We also learned about collaboration on a production level scale, working as a team on one monorepository, posting issues, fixes and merges throughout our various branches. The journey is far from over, but the final piece of development is coming to a close. We intend to launch it Summer 2023. We will be happy if at the very least it touches some individuals across the globe and builds a small yet honest community. When I was a teen, an app like this was all I had wished for to exist out there in the world. And as an adult post-pandemic, I feel that it is even more necessary than before. To build connections and bridges between people and communities, not isolated echo chambers full of hatred for one another. But only time will tell if it becomes the vision we strive for.

Launching Fall 2025

Signup for the Beta!

How was this article?

If you want to send me specific feedback, please do so on the Contact Page. Thank you!