After having to return to my hometown because of the pandemic, I found myself not only missing my friends back in San Francisco, but the overall lifestyle and culture that exists in the city. Most of all, I missed striking conversations with locals and natives to really wire in on the beat of the street. Not so long ago, my barber on Mission Street used to fill me in on the unimaginable history that lived on the paths we walked and the rapidly changing future ahead of it. Those stories and anecdotes changed the way I saw the Mission District and oriented me like no other platform could.
Recently, Texas was hit with a severe weather storm that left thousands without food or electricity. While it was happening, I couldn’t help but wish I could wire in on the affected areas and get a better understanding of what was happening. Possibly chat with locals and get an honest assessment of the situation. Is everything going to be okay? How can I help? I, unfortunately, don’t have any acquaintances in Texas but from this wish came an idea. What if we were to chat anonymously with anyone in the world based on their geo-location.
Why anonymously? When you talk to a stranger on the corner about the weather, do you know their name, job position, and family tree? Of course not! What if we could recreate that communicative environment where I can chat with someone in my city about the house on fire across the street in real time while also being able to chat with locals in Japan any time of the day.
What it does
Wiredin creates chats based on the geo-locations of the users. Users from around the world can then join in on the conversations. This functionality promotes local, as well as global, connections.
How we built it
The web application is built with JS, html, CSS, handlebars, and Google Maps JS API on the frontend and node.js, Express, and mongodb on the backend. Initially, our team aimed to only use JS, html, CSS, and the google maps js api but breaking the web applications down to components with handlebars was eventually essential for organization.
The team broke up into 4 Teams: The Home Page Team, The Map Api Team, The Chat Team, and The Backend team. The home page team built the home page, faq, contact us, and the about us page and made sure to make them responsive to different sizes. They largely achieved this with bootstrap CSS and JS. The Map API Team created a map UI along with the styling and integrated the google maps api with the database. The Chat Team developed the frontend prototype for chatting with HTML, CSS, and JS for the backend to integrate to the database. The database team connected the database to the application and set up endpoints for the chat, wires, login, sign up, and websockets for real time functionality.
Challenges we ran into
We believe our project was rather ambitious for our team as we had never used the google maps api. Two of our members had never worked with node.js, express, handlebars, or java script. Our Team Leads lead a lot of the development and supported our newer members as much as they could. The front end took too long to make reactive and look nice, we had to sprint to the finish with technologies we were fairly new with. With time ticking away, our biggest challenge was our team constantly running out of coffee.
Accomplishments that we're proud of
Our team is proud of the amount of effort and time we put into this weekend. Our team really wasn't sure if we were going to be able to deliver but thankfully, we made it.
What we learned
Biggest lesson we learned and to avoid using vanilla js. If we could go back, we would start with react.
What's next for WIREDIN
We had to drop some features that weren't high priority, so we will be rolling those out in the next couple weeks.