Witness blue witness

Jean Luciano
3 min readMay 27, 2021

During my the last month of my experience at lambda school we worked with the non-profit called Human rights first. Human rights first are an “independent advocacy and action organization that challenges America to live up to its ideals.”. During recent marches for humans rights there has been a lot of police presence and our mission was to gather data on reports of incidents where police showed up to a march and display this data. This is what Blue witness aims to do. By scraping twitter we gather data about reports of police presence. We then use ML models to categorize this data and present it to the public in a way that is more easily researchable. Coming into this I worried that with the project being so mature I would have nothing to do, but I quickly found out that wasn’t true.

What we started with.

We when we started the project it had already been worked on by 7 past labs team. This meant that we were going in into a mature codebase which was a challenge in of itself. To make this easier for my team I took some time to read the code base and understand it. As we were going through it, we became slightly overwhelmed with how many files there were! Turns out by using SCSS, they had a lot of duplicate code throughout the project, and so that was my first task. I entirely got rid of SCSS in the project since we were using none of the features that CSS3 didn’t have, this let me delete about 22 files!

After setting my team for success I started working on the mocks of the front end as was the design lead. I designed the mock on Figma and then collaborated with my team and basically turned my mock into different Trello tasks. My task after that was to make the incidents page have better filtering. When I started users were only able to filter their data by time range and state but not by the tag description. This was more challenging that perceive it as since there isn’t a set of tags that is being used by our data science model. Since out frontend was looping over all incidents in the initial fetch to add location fields to the data, I piggybacked that ride to make a list of all the tags and which incidents were associated with it which is how we get our list of tags.

initialFetchh function

Where we got

As it stands Blue witness, at least in the front end, is almost finished. We update the styling to be more in line with Ant design guidelines, the map has more filtering options, the incidents page now gives you options to search by tag and by police use of force, to display the incidents we use panels instead of cards for a better user experience, and the about page now better informs the user where our data is coming from and more about the organization

As Blue Witness gets its finishing touches I see a few features being added to improve user experience. One might be a way to let the user choose how to sort the tags themselves since as of right now they are in random order. Another would be better ways to display the info inside the map. These pose sort of the same challenges in that you have to be real careful not to come off as biased in either erection when we are displaying our data.

Overall, working with Blue witness was an amazing experience. I have received a lot of feedback from my peers on communication and organizational skills and I have improved leaps and bounds. I have gained a lot of experience not only designing but relaying the specs of the design to my team, and in working with techs that I never worked before such AWS and fastAPI. All this full stack experience will be invaluable to reach my goal of becoming the best full-stack developer I can be.

--

--