Reefocus

Inspiration

It can be hard to focus on how our choices impact the environment, and campaigns that remind us are often so disheartening they make us want to forget altogether. Reefocus changes this by positively rewarding environmentally-friendly behaviors in a colorful game environment where players foster the health of their own coral reef. Reefocus also makes sure that no-one has to conquer environmental issues alone, as it connects players to events at local organizations where they can learn more and support ongoing conservation efforts.

What It Does

Players access the reefocus web app using a Google account and then start logging actions such as bringing their own bag or carpooling to earn points. As a player's point total rises, their reef flourishes, gaining biodiversity in both coral and fish. Players can also earn points by attending environmental events, which they can discover on the events page. The events page is populated with existing events put on by local organizations and brings a variety of options together in one place.

How We Built It

The web app is written in React.js and is hosted by Google Cloud Platforms. User accounts are managed through Google authentication. Graphics are SVG files created in Inkscape and Illustrator. Domain registered with Domain.com.

Challenges We Ran Into

One of our main challenges was identifying a feasible scope given the time constraint. In response, we paired down our scope to the key logging and event capabilities and saved our other ideas for the future (check out "what's next"). On a technical level, we struggled with dataflow, but found that implementing a global state with movx allowed us to connect all of our components. We also had to update the ReactGeoMaps module to display the location of events.

Accomplishments that We're Proud of

Reefocus is the product of a diverse team, and we are proud of creating an efficient workflow that combined all of our skillsets. We are also proud of the app's strong security through effective use of the Google Cloud Platform.

What We Learned

Graphics Team: Rapid Ideation, Vector Art, Integrating Graphics Formats, Designing a Cohesive Environment Development Team: Integrating React and CSS for Efficient Styling, Setting up FireBase