MobileEyes

Quick Summary

We are living in a crucial point in time, where more people than ever are organizing to overturn old structures and establish new ones that secure social, environmental and economic justice. We need our technology to meet the moment, allowing activists to spread the word and assemble for change while protecting them from surveillance and threats to their privacy. Introducing MobileEyes, a mobile app powered by the Flutter framework. MobileEyes makes it easy to discover upcoming protests, rallies, or activism events—known simply as "Springs" within the app. Users can see where and when nearby Springs will begin and learn about their missions and background. On the day of the event, when users arrive at the listed location, the app will allow them to "Check In", which adds a flower to the Spring's visual garden. As more and more activists assemble, the Spring thrives, which encourages even more people to join in and grow the movement. Those wanting to create events themselves can use MobileEyes to "Seed a Spring" in just a few taps. After filling out information about the Spring, they can plant the seeds for a brand new movement. Users can also view Springs they've shown interest in, attended, or created in the past with a quick calendar view. With options to create, browse, and join grassroots movements and even more features on the horizon, we'll watch activism bloom with MobileEyes.

Inspiration

The United States was founded with the belief that we the people have the right to peacefully assemble. Our country has progressed countless times because of this fundamental principle, with peaceful protests pushing forward the Civil Rights movement, improving working conditions for America’s factory workers, and earning equal rights for women in the workplace. And in the current era, the right to protest is more important than ever. Even in the past few months, nationwide protests occurred in almost every major city to protest police brutality and the countless deaths of unarmed black people by police. America’s youth has protested for the introduction of new gun control measures to help prevent more mass shootings. And the women’s march aimed to help achieve gender equality. As is evidence by all of these current protests, it is clear that protesting is still a major part of American society. However, we believe that organizing protests is too challenging as of right now. Current methods of bringing awareness to your protest include flyers, social media, and word of mouth. However, these are not always enough to draw attention to your cause and connect likeminded individuals passionate about organizing for action. Therefore, we decided to make a mobile application with the purpose of helping people more easily and efficiently organize and find protests they would like to participate in. The right to peacefully assemble is one that is vital for the survival of a democracy, as it enables those previously unheard to get their voices out and cause real change.

Functionality

MobileEyes is an app that is meant to bring eyes to your movement. It wants to get people engaged in the issues that matter to them. It accomplishes this through a mobile app where protest organizers can share their event, with details regarding time, location, purpose, etc… When a protest is made, it is given a virtual “garden”. The garden begins almost entirely empty, except for one flower that represents the protest organizer. Then, other users on the platform are able to see the event and if they are interested in the cause and want to mark that they are going to the protest, they can “Check In” to the protest, which will add flowers to the garden. As more and more users “Check In” to a protest, the protest’s garden will blossom into a garden that is beautiful and full of life. Checking in also adds the protest to the user’s person “Events Calendar”, which is a calendar view of all the protests that the user has “Checked In” to.

Development

We began with a brainstorming session right after the opening ceremonies, beginning with trying to list as many broad social justice themes as we could such as racial justice, LGBTQ+ rights, environmentalism, etc... We then enumerated subproblems that each movement is trying to tackle. For example, environmentalism is an umbrella for people trying to solve problems of clean water, fight climate change, saving endangered species, etc... Third, we then listed ways we believed technology could bring a solution to the problems on our list. The problem we decided to tackle was the unorganized fashion in which protests for many movements are formed. The next morning, the entire team got into a Figma design session and created designs for all the pages we wanted, and we used this throughout the rest of the project as the guide for the user interface. Once the wireframing was done, we started learning how to create mobile apps through Flutter. This included having to learn Dart, which was a new programming language for all of us. After being able to create a functioning Hello World type app, we proceeded development on the project. We split up the coding primarily on the basis of the three main screens in our app: join a protest page, create a protest page, and the protest calendar page. The way we decided to do simultaneous development together was through a feature in the VSCode editor called live share. Live share created a private room for our team where we could all edit the code in a similar fashion to Google Docs. This made it easier to do fast development because we didn't have to wait for one member to push their feature to git and worry about merge conflicts. Using Flutter, we were testing our code in Android Emulators throughout the development process, checking all the changes we made worked correctly and no bugs were introduced. At the end of the night, we pushed our final version to Github. Initially, we started by brainstorming ideas on a live google doc while on a Zoom call. Then, after deciding the general idea of our app and its purpose, we developed a prototype on Figma to plan out the UX...

Challenges

Only a couple members of our team had mobile development experience, and none had experience with Flutter. Having no familiarity with Flutter and it’s associated language, Dart, caused a lot of initial confusion and forced us to spend a lot of time getting used to how the events and classes were structured. Even just installing the necessary packages, code editor plugins, and emulator took up a significant portion of time. On the fly, we had to learn all of the features we wanted to use and implement them for the first time while making the actual app. But, as we got more and more experience with Flutter, the development became faster and faster. We feel that the hackathon was the perfect environment to dip our toes into Flutter for the first time. Another challenge was that we needed a way to code together in a very fast manner. We thought that Github would be too slow and might lead to a lot of merge conflicts. So, we had to come up with another solution that would allow us to rapidly write code together. What we found was VSCode’s LiveShare that let us create a session together and edit the code like Google Doc. However, a challenge with this was that we could only run and test the code on the session’s host device. This meant that during the project, whenever a change needed to be testing, the host would have to screen share their emulator and try out the new features.

Accomplishments

We are proud that our team went from no experience with any of the technologies used for the mobile development (Flutter, Dart) and some having no experience in mobile development, to ending up with a great minimal viable product for our app. There was a lot of learning while working during this hackathon and we are proud of how well we were learning new things on the fly. Also, our team had a range of hackathon experience, ranging from previous winners to first-time hackers. This could have been a challenge because the team might not have been able to adapt to each other’s needs. However, we are extremely proud of how our team handled this, and we actually used the experience of our more experienced hackers to our advantage by following good hackathon practices they had used in past hackathons.

Learnings

We learned how to make a fully functioning cross-platform mobile app from scratch using Flutter. We also learned about geocoding and geolocation with the Google Maps API. We also found out how to more effectively collaborate on a project in which many of us would work on the same files with VS Code’s Live Share plugin. For some of us who had never done a hackathon, we learned about how they work and why they are so much fun.

What's Next

MobileEyes’s current features are that of a minimal viable product. Features that we would add to make the app more complete would include adding a search to the “Join a Protest” page so that users could find the protests they find the most interesting (searching could be done by name, distance from the user, or by tags the protest is under), being able to add a protest to your personal calendars like iCal or Google Calendar, getting a notification a few hours before the protest begins, give users a rough estimate of how many people have checked-in to the protest already, and for users to be able to customize the flower that they add to a protest’s garden. Some extra touches would also be to have buttons on the protest’s details page that give you directions from Google Maps telling you how to get to the protest, allowing users to upload pictures related to their protest when they create new protests on the app. While some protests are mobile, incorporating a way for people to post planned routes would be helpful in letting protesters know what to expect in the protest.

Built With

• dart
• figma
• flutter
• google-maps
• syncfusion