America…the Beautiful? Tracking police brutality in the USA
Over the last three weeks, my team and I have been building upon an app that tracks and visualizes reports of police brutality in the United States. The organization behind this is Human Rights First, which was established in 1978 but branched out to cover police brutality in America after George Floyd’s death in May 2020. The driving goal behind the application is to make it easy to view and study trends in police brutality incidents across the United States.
Getting Started
Our biggest accomplishment to date was a complete overhaul of the map that was included in the previous project. The initial functionality included plotted points on the map, basic filtering capabilities (with limitations, for example if an incident had more than one type nothing was viewed except the first in the list), and a link to more information about each incident on the map. After two weeks the map is now locked to the United States, you can toggle zooming in or out with scroll, zoom in to different states and zip codes, and reset the view. We are currently working on being able to filter by type (such as energy devices, chemical, projectiles, etc.) and are being conscious of the fact that many incidents have more than one type.
One fear I had coming into this project was the fact that it was an existing codebase, which is not something I had experience with. It took a few days of really digging deep into the code to get an idea of what they were doing an how they were implementing the different features, and even then I wasn’t sure how it was all coming together. I was also concerned that we would not be able to accomplish the goals set out to us by the stakeholder in the provided time.
The Planning Phase
As a team of 5 web developers we worked on breaking down the MVP into smaller goals. We started by interacting with the existing UI and made a list of upgrades, design features, and fixes we wanted to implement. Then, we tackled the wireframes, user flow, and tech stack necessary to make these updates happen.
A Bump in the Road
When I ran into computer problems halfway through the project, my focus shifted from functionality to styling. Because I couldn’t run the project locally on my very old computer, I worked instead on reimplementing components in Code Sandbox using Ant Design instead of Material UI. This was a great introduction to React UI libraries and also allowed me to keep working despite my technical issues. It also provided us with some great pair programming opportunities as I would push my code up and then navigate someone else through implementing them as I had trouble loading up the project myself.
One feature that highlights much of my UI work on the project is the filter box. This is a pop over that expands and collapses based on a button, and inside you can set parameters for the map such as incident type, start/end date, and location. It was a challenge to figure out how to get the checkboxes to line up nicely — on one hand, flexbox was a great candidate for spacing them out, but then Ant Design added a margin to all but the first box which had them out of sync. If I tried Ant Design instead of flexbox, they wouldn’t wrap the way I needed them to and instead overlapped the source types.
The solution that I ended up finding was to rebuild the checkboxes using Ant Design’s Checkbox.Group component. With this I was able to specify how many columns I wanted and still create a Checkbox for each incident in the list. When I hit a snag with getting the checkboxes to have a default state of checked, my teammates joined me and we worked together to figure out where the issue was. That defaultValue={incidents} in the first row? Turns out it’s not optional!
That’s a Wrap
As we approach the end of our 4 weeks working on the project, we met today to discuss what we accomplished and what tasks we are leaving to the next group. Here is a list of what the front-end built out in the past three weeks:
- Dynamic navigation bar with tabs to toggle between map, graph, and about page views
- Filter form that collapses and pop-ups on click, with checkboxes, a date picker, and dropdown inputs implemented via Ant Design
- Ability to filter points on the map by incident type, state, and zip code
- Control panel on the map to toggle scroll on zoom, toggle fast traveling by clicking on a state (zooms in), and a reset button
- Graph (basic implementation) that will display number of incidents of each time by month for the last year
The Next Steps
There were quite a few things on our to-do list that we were unable to get accomplished during these short four weeks. Here are a few things we think the next group will be able to tackle and bring life to:
- Connection made between data science and the web back-end
- Connection made between front-end and back-end
- Register and log-in functionality
- Ability reset filters when button is clicked
- Ability to filter by source type or date range
- Prevent map refresh/reload upon filter change
- Apply filters to data presented on the graph
I suspect they may run into issues with my implementation of Ant Design in some places, as there were a few components where I was unable to accomplish the design I wanted with AntD and instead just used regular CSS. There is still some Material UI peppered throughout the project as well from the group before us, so the next group will need to clean up the styling quite a bit to improve the code quality.
It is also quite hard to jump into an existing project and learn something like Chart JS or Mapbox if you don’t have prior experience. If their experience is like ours it will take most of the first week just to figure out what is going on, and well into the second week to start making meaningful changes and updates to the codebase. Hopefully the map is fully stable now, though, after what my group updated.
The Takeaways
Labs was the first long-term (well, longer than a week) group project that I participated in at Lambda School. I went into it expecting to build a really awesome project from the ground up, and to walk out with intimate knowledge of how the app works. However, what I am leaving with is a sense of belonging and accomplishment. My team worked quite well together, communicated often, and in the front-end everyone sort of did their own thing. We came together to debug, ask questions, and get feedback, but much of our code was written individually. I have my name on a project with ChartJS and Mapbox, despite knowing very little about either, and my teammates have no experience using Ant Design while I do. I think this is a great example of what working on a team will really be like in the field — this is far from an individual project where I know all the ins-and-outs, yet together we were able to build a really strong application in four weeks.
Much of the positive feedback I received from my peers was centered around my communication and leadership skills, as well as having strong organizational skills and being good at bringing people together. This was nice to hear, but not entirely surprising considering my teaching background. The most valuable piece of feedback I received (and the hardest to hear) was that I wasn’t focusing enough on the big picture and instead kept getting caught up in the details. It was a bad case of “tunnel vision”, as my group put it. After hearing this, I began setting timers for myself while working individually. If I couldn’t figure something out by the end of the timer, I would put it down and move onto a different task or meet up with my group and ask for help. I do feel like it had a positive impact on my productivity during the second half of Labs.
Moving Forward
Now that it’s time to move out of the student role and into the job search, I find myself feeling more and more grateful for this past month of Labs. I got real experience working with a cross-functional team, practiced working in a single role (styling on the front-end), and got to brush up on my communication skills as well. I am eager to see where I’ll be in 6, 12, 18 months and know that this process has helped me build a strong foundation for working in a team.
