Grapevine

Inspiration

We wanted to work on a project that 1) dealt with maps, 2) could benefit any urban environment regardless of how others view it, and 3) had a sense of intimacy. We found many of our initial ideas to be too detached—solutions that lacked a personal connection with the communities they aimed to serve. Then we came up with the idea of an application where users could simply look at a map and see all the areas that are recommended by locals, rather than popular locations that overshadow smaller and underrated areas in a community. From this, we expanded our idea to improve upon inaccurate and sometimes predatory apps claiming to protect users from dangerous incidents, yet only warning users when they are proximity to a "high-crime" area. By simply showing how often crime really happens in a much more realistic area, users have more knowledge and freedom to decide and understand what's going on in the local community around them. This, combined with local recommendations, lets users get the "word on the street" - they would hear it through the grapevine.

What it does

Grapevine is an application designed to make it easier for people to get the inside scoop on an area, based on local reports and recommendations. Locals can anonymously submit incident or recommendation reports, with the corresponding mark showing up on the map. Visitors can then search a location and get a map of their immediate surroundings that shows any reports in the area. They can also specify the radius and filter for certain types of reports. Reports also have an upvote/downvote system.

How we built it

We knew we wanted to build a web application, and so we decided on trying out Node.js and Express.js as our backend framework. Given this, we also decided to use MongoDB to complete the well known ME(no React)N tech stack, and also because of its popularity and reputation for being relatively easy to setup and use (which it was). Our frontend was built very simply with HTML/CSS. For the maps on our frontend, we used Leaflet.js, an interactive map JavaScript library that allowed us to easily display user recommendations and reports.

Challenges we ran into

This was our first time using MongoDB/Express.js/Node.js so there were many difficulties learning these tools on the fly. There were a lot of complications involving missing forward slashes and a good portion of our time was spent trying to figure out how to route pages. Fortunately, we were able to adapt and create a solid code structure that made the rest of our working process easier. We also thought that, given how GitHub is way easier when people aren't making contributions every 30 minutes, it would be better to use VSCode's Live Share feature to work collaboratively at the same time. However, this turned out to be more difficult than expected, especially when only the host can see what their code changes do. Despite this, we were able to push through and develop a good finished product that does exactly what we envisioned it to do.

Accomplishments that we're proud of

We’re very proud of being able to split the work efficiently and being able to stay organized on top of all of our contributions (given that we were using Live Share instead of Git). We are also proud of being able to implement the tech stack and use it in an application. We also successfully used Leaflet, an interactive map library for the first time, which was a new learning experience for us.

What we learned

Since this was a full-stack project that included everything from backend to frontend, there were many aspects that some of us did not know how to do/work with, but learning how to use different resources available to us online, reading documentation, and just using trial and error until we found something that works out helped us a lot as well in learning how to build an application with this tech stack.

What's next for Grapevine

We would like to scale this internationally and find a way to be able to optimize the search function. It would also be good to create a way to verify locals vs non-locals, perhaps through user login and personal information authentication (but still give the option of posting anonymously). We also have ideas of adding routing to the map, so that a user could input a destination and see local reports and recommendations along their route. Finally, we would like to flesh out the upvote system (differentiate between local/visitor feedback).

Built With

• express.js
• leaflet.js
• mongodb
• node.js