BlockHack

Connect with your block community

Comment

Inspiration

It is a daunting task to start a block community club or announce a local public event. Walking from door to door, a spontaneous speech at the bus stop may not be the most effective way to reach the minds of your neighbors. However, everybody feels fine using the phone for.. anything. How about we take this path and use Facebook to raise awareness of our block club in our local community?

What it does

As a community organizer, you create a flyer announcing a block club initiation or a community event using Facebook. A Messenger chatbot and a React form inside a Messenger guide you through a process of collecting information for the flier. Within minutes after completion, you can share it on Facebook, you can download the flyer for printout. You may also request printing services and have it sent by mail to your home address. Then you put it up on walls or friendly storefronts of your block. Neighbors can spot it, scan QR code to join the group, and engage in conversation about what's going on in the neighborhood. To make it more exciting, the Instagram filter created using Spark AR with the logo uploaded by block club starter becomes available in the area of your block. It helps to promote the block club.

How we built it

We iterated with the Facebook Messenger API to create a chat experience where users can be plugged into a block community. The Messenger bot welcomes the user and then interfaces more complex data capture with a form built in ReactJs. To create the fliers, we used JsPDF to generate the printable fliers which will be printed and posted in the block community. We deployed the app to Firebase (React Front End) and Heroku (Messenger Bot). The list of technologies used was - React, Messenger API, Spark AR, Firebase, JsPDF.

Challenges we ran into

We wanted a QR code to instantly add you to a Facebook group chat of the block club, but, due to privacy concerns, we decided to route him to a Block Club Page or Group that was initated by a clock club starter.

Accomplishments that we're proud of

Glad of using ChatBot to support a flier creation. Leveraging messenger bots to connect the block community. Empowering the community to organize and engage in outreach projects like soup kitchen volunteering, holiday decorations, cleaning the streets, etc.

What we learned

This was our first time developing in Messenger. There were some lessons learned by creating the webhook and hosting the application. Also, we faced race conditions due to the asynchronous nature of the API calls. We had to mitigate the risks by creating modular functions that are independent of flow.

By having fun with Spark AR effects we can engage people in building a community around the block.

Testing

The users have 3 apps to chose from - messenger app, web app, and the Spark AR lens. The journey begins by scanning a QR code and utilizing Facebook Messenger to connect to the block club form generator. Once the form is generated, users can scan the QR codes to connect to a Facebook Group. Finally, using Spark AR, users can view their custom block badge in the real world.

What's next for BlockHack

Find funding for printing services. Promoting app among community organizers and offering our app to be enabled on their Facebook pages.

Built With

Share this project:

Updates