BubbleBuy

BubbleBuy leverages microfinance to empower the 98.2% of small businesses struggling by connecting users to local shopping alternatives with better prices, quality and reason to support!

Comment

Link to video: https://youtu.be/YJMMCYb0OJk

Inspiration

Small businesses are struggling due to COVID-19 and technology is the only way to mitigate this widespread issue and bring the community together. We were inspired by creating an innovative solution that tackles financial issues, while also being relevant to the current issues around the world today. Small businesses have undoubtedly taken a hit during COVID-19. As a result, we decided to create a web application that enables users to easily and quickly help support local businesses. We noticed that online shopping has drastically increased in the last few months, so people are clearly purchasing products, despite the pandemic. This led us to decide to create BubbleBuy, to connect users to purchase items they want from local businesses hence empowering the shop local movement.

What it does

Our product allows users to search for items that they need. Then, a map is displayed along with images and descriptions of the nearby small businesses that are selling those products. All the user needs to do is click on a local store and they can support any local business of their choice. Our web application just makes the process for users to support businesses quick and easy.

How we built it

We built BubbleBuy using React, Node, CockRoachDB, and Google API's. After brainstorming various ideas, as a team, we decided on an impactful and meaningful concept that helps businesses in need. We used Materials-UI to design and implement various features ranging from modals, navigation tabs, carousels, and card decks.

The backend was built using ExpressJS and NodeJS. The code was organized in a clear folder structure with modular routing to ensure ease of expandability for the web platform's future growth. The NodeJS server consisted of the endpoints that the front-end could reach out to for creating new business listings, load businesses by location, and process the donation process.

Challenges we ran into

This was one of the most testing hackathon experiences for us- one that provided numerous learning opportunities.

One of the main challenges we ran into was integrating external APIs with our React front-end. Working with the Google APIs for the first time, we initially struggled with the set up and understanding the documentation in detail. We then worked extensively to incorporate the maps API in our website to make it easier to find small businesses in the user's local neighbourhood.

We were also challenged by working with the Cockroach Database. With no prior experience in infrastructure, the backend team had to dive into the CockroachDB documentation to understand how to set up the correct Docker containers and run the right bash commands to get the CockroachDB working. We were proud to install and get the CockroachDB instance working on our local computer in the end.

Lastly, we learnt how to collaborate productively asynchronously due to the virtual nature of the hackathon. Initially, we had to adapt to the online communication methods and learn how to work over voice calls. We also decided to have fixed checkin calls to keep track of progress and help each other out with problems.

Accomplishments that we're proud of

Our team's proudest accomplishment during this entire weekend is having integrated the API into our project successfully, all while keeping one another updated on our tasks asynchronously. After long hours of trying to connect the backend and frontend framework, we successfully got our application working. We are also proud of how hardworking everyone on our team was and how eager we were to communicate and help one another, despite this being some people's first virtual hackathon.

What we learned

Though this project we learned the importance of reading documentation and planning extensively. While competing virtually, there are many unforeseen situations which arise. In order to account for this, the planning should be done well beforehand. Aswell, choosing technologies that all team members are comfortable with would result in the most efficient use of time. Moreover, this hackathon had taught us all about databases and various different API's. We learnt how to properly test APIs and integrate them into fully functional web applications.

What's next for BubbleBuy

BubbleBuy has real potential to scale and develop since it is attacking one of society's biggest problems today. We first plan on implementing the future implementations of the login page and the search bar (refer to Figma designs). Then, we plan to continue working on this project and elevating the technology used in order to gain funding for support.

Built With

Share this project:

Updates