GeoChattr

Inspiration

After spending two years in quarantine, making connections with others became a lot harder. Since there wasn't a way to discover, meet with and chat with others in your area, we made GeoChattr! GeoChattr represents a way to doodle the future of connections and meeting others -- by sharing drawings and doodles you can form meaningful connections with people even if you aren't able to meet them in real life. GeoChattr is also somewhat inspired by PictoChat and Pokemon Go.

What it does

GeoChattr is a webapp that allows you to chat with people in your city through doodles and drawings. It features an array of drawing utensils, colors, and brush sizes. When you chat with others in your area in real time, you're able to see their drawings and respond with your own.

How we built it

GeoChattr was built by a 3 person team, each working on either frontend or backend. We used socket.io with multiple rooms as well. For the UI, we used TailwindCSS and NextJS (the greatest React framework). On the backend, we used NodeJS, ExpressJS, and the Socket.IO server implementation.

Challenges we ran into

Hosting: We found it really costly to host a PostgreSQL database, and since we had minimal time when we realized this, we decided to store all of the previous locations in localStorage.
Location information: IP lookups were mostly inaccurate and reverse geolocation lookups (get the city from coordinates) required some form of Google API billing account. We solved this by finding an accurate API (the website is really sketchy though)
Auth: The client and server couldn't connect to properly authenticate (CORS errors). This slowed us down a lot. For the auth, we tried using PassportJS, but the aforementioned error prevented us from using it. The problem itself was with React's Context API. This UserContext that we were using didn't get any information from our API and it was just really annoying. We didn't have much time so we just decided to use localStorage and a username for authentication.

Accomplishments that we're proud of

Good UI
Works really well
Learned Socket.IO for the first time and had ZERO issues with it
Effectively structuring our NextJS/React project to handle state management
Exploring the intricacies and quirks of React (especially since useState didn't actually update in our useEffect, we found out that we had to send the state variables as a dependency to useEffect)

What we learned

We learned Socket.IO, as none of us had used it before. Socket.IO is really cool and its documentation makes developing really easy!
Learned how to effectively work in groups of people simultaneously. This includes fixing git conflicts (we had those a lot) and communicating on what we're working on.
Pre-plan your tech stack so you don't waste time getting started and trying out what works and what doesn't
We also learned not to strive for complete perfection in these short time spans. We tried making every aspect of our app perfect, but we didn't choose the quickest solutions (eg Firebase Auth instead of PassportJS auth).