BigoTracker was inspired by apps like Waze, where users input their own data for others to see and utilize. With all of the social turmoil in today's society, I wanted to create an app that would allow people to spread awareness of injustices without spreading toxicity.

What it does

BigoTracker uses Google-Maps API and a small server to keep track of user submissions. Users can submit a Report form where they fill out simple information about incidents such as racism, homophobia, gender discrimination, or general harassment. These reports are displayed on the map as anonymous Markers, color-coded based on category.

How I built it

I built BigoTracker using a Google Maps API wrapper, as the API itself isn't very React-friendly. After getting the Maps API working, I worked on creating a backend server using json-server to receive requests and store the reports. Finally, I worked on linking the two using an Express server.

Challenges I ran into

My first challenge was getting the Google Maps API to successfully render as React components, as the API was built to be used as just plain Javascript. I used a wrapper to help with sending the actual API requests, but I implemented separate Map, Marker, and InfoWindow components to deal with my particular project. The second challenge was doing everything by myself, as my partner ran into some computer hardware issues and had to leave very early in the development stage.

Accomplishments that I'm proud of

I'm most proud of my perseverance. Even after a team setback, I was able to successfully implement most of the original features that I had planned on creating on the front-end React side, as well as dealing with the backend database server.

What I learned

I learned a lot about the importance of planning development tools before starting to dive into code. One of the biggest setbacks I had was after I spent a fair amount of time trying to learn one wrapper for the Google Maps API only to realize that it was too difficult to use and very buggy. I also learned a lot about how React passes props up and down the component tree as I had to work with sharing Maps props between three different components.

What's next for BigoTracker

In addition to cleaning up some of the bugs, I'd like to expand on BigoTracker by making the UI nicer and more clean-looking. I didn't have as much time as I would have liked to pretty up the Report an Incident form or really customize the Map and Markers more than basic functionality. I'd also like to add more features to viewing Reports, such as "I witnessed this!" features to foster a sense of community support, possibly a time-out for reports as the user base grows, and more options for report categories/choosing locations rather than just using current location. I would like to create a mobile app version using React Native as well.

Built With

Share this project: