Social media is usually concentrated around specific hotspots in the world, it is very hard to get authentic, local and quality updates on specific places. That's why we made Geochat.

Our primary inspiration in the Maps feature on Snapchat, which allows people to see where their friends are, we took it a step further.

What it does

Allows users to:

  • View messages from other users that were made near them, or within a specific radius.
  • Send messages from where they are, for all other users to see.

All messages are completely anonymous, so there is no safety concerns.

How we built it

We used a serverless architecture to host our project, as it is likely to see massive spikes around certain locations, therefore we needed a very flexible architecture. We did this by using Firebase:

  • Cloud functions for our API endpoints
  • Firestore document database for persistent and real-time storage.
  • Firebase Hosting for static website hosting

For the frontend we used modern web frameworks:

  • React
  • Openstreet Maps
  • TailwindCSS for styling
  • Vite for bundling all the files together.

Challenges we ran into

Rendering maps on a webpage is remarkably not simple. We had to read a lot of documentation on how to not only render a map, but also add icons to inform the user of their location and other messages location. Furthermore, none of use have used Geolocation on a project before, so we had to learn about coordinates and accuracy of location on laptops and phones.

Accomplishments that we're proud of

It works! After many hours of trying and relentless learning, we managed to get the core features working, all hosted online, for anyone to use.

We are also proud of how well we worked as a team, and collaborated as engineers. We all learnt a great deal from each other.

What we learned

Firebase. None of us had used it extensively in a project before, and now that we have, we know much more about serverless hosting and Backend as a Service technologies.

React. This modern framework just keeps on giving, all of us had used it before, but there is always more to learn about managing state in a frontend application.

What's next for Geochat

Further development. We believe this application has a lot potential, and plenty of features still to explore:

  • Images and video sharing on locations.
  • Optional user authentication, to provide a bigger level of trust.
  • Seed round.

Built With

Share this project: