Sustainfulness

Sustainfulness is an app connects you to your inner power and brings your awareness to the sustainability by taking the daily challenge.

Comment

About

Sustainfulness is an app for Android and iOS.

We wanted to combine the words Sustainability + Mindfulness, hence the quirky name "Sustainfulness"!

Inspiration

The inspiration comes from the Chinese philosophy with its fivefold conceptual scheme: metal, wood, water and earth. They represent the dynamic states of the universe’s ongoing existence and development. We also inspired by the meditation process and popular western tarot reading, they all try to teach us to look inwards and connect to ourselves. We want to use the app to bring more awareness to sustainability by challenging each individual with achievable small task in their daily life and eventually lead to a more mindful and sustainable lifestyle one step at a time.

Other background: we also want to bring back the nostalgic game concept in our childhood memories when we all collect, trade and share cards with our friends when social media is not available. The cards visuals are mostly inspired by Zhuyuan's explorations with the nature.

Each element category corresponding to different sets of challenges. For examples, water cards have challenges related to water efficiency and conservation, woods cards are related to recycling and nature preservation, fire cards have energy saving and solar power, metal cards are related to investment in green business, vehicle and transportation efficiency, earth cards are related to soil conservation, composting, waste reducing and recycled products.

What it does

Our App is 2 experiences together

  • A fun quick 3D energy catching game you play as an individual
  • A social game built around the idea of collecting beautiful hand drawn sustainability cards with empowering quotes and fun challenges, sharing the challenge with your friends and building a community around sustainability.

Player will collect their power of the day through a lighthearted catching game, and they will get one of the five elements. Each element also correspond to different sets of cards. Player will get one card from the element with an empowering quote of the day and a small and achievable challenge leading to sustainable lifestyle. All the cards and visuals are hand draw and designed originally.

Player can view all their collected cards in the gallery and share their power cards to their instagram story. They could also add it to the Google Wallet and pass down the message and challenges to more people and build a community of sustainfulness.

3D energy catching game Reward screen Revealed Daily card

How we built it

Our App is a combination of Flutter and Web technologies.

  • Flutter allows us to easily build apps for both android and ios with the same shared codebase, it also provides a great set of Widgets for building responsive views for mobile apps.
  • Web allowed us to use technologies that might not be supported yet on Flutter like three.js, WebGL.

Animations are powered by flutter_animate package. Animations are a big part of makes this app a delight and fun to use!

For making the card fun to interact with, we added touch control where you can tap & hold to tilt the card. As well as gyro controls, if you tilt you phone the card preview tilts as well! Powered by Tilt controls: flutter_titlt.

For our 3D energy catching game, we utilized three.js and web. webview_flutter integrate Flutter App and Web together, as well as handle the communications between them.

For logic, we separated business logic from UI by utilizing the Bloc pattern. This makes it easier to do separate of concerns and refactor UI without needing to ensure business logic doesn't get broke in the process. For persisting data to the devices, hydrated_bloc allowed use to easily persistent our Bloc (business logic data) by swapping the class to HydratedBloc class!

Key flutter packages:

Here's a medium article describing the process of building this Flutter app!

Challenges we ran into

  • Flutter doesn't much support built in for 3D yet.
    • We came up with a solution to write our 3D game portion as web site using three.js. And have the webview communicate with Flutter to trigger actions.
  • websites on mobile need additional work to make them work well (our three.js game was no exception)
    • Needed make it look great even when playing on a small portrait screen on the phone.
      • Wrote CSS media queries and three.js camera perspective
    • Prevent being able to drag and overscroll the webview (this displays an unwanted grey area)
    • Need to implement touch controls and ensure they work well

Accomplishments that we're proud of

Making an App that's delightful and beautiful to use!

  • Cards and onboarding UI are all hand draw and designed originally.
  • Animations add a ton of character to the UX
  • Mixing 3D experiences with 2D experiences is a fun novel way to add User delight!

What we learned

  1. How to integrate Webview and Flutter together! This greatly expands the possibility of apps we can now make being able to take advantage of different techologies
  2. How to animate with Flutter! This was our first time working with animations on Flutter, we were impressed by the options offered and definitely feel Flutter values making Animations easy to build

What's next for Sustainfulness

We want to share with more people, launch in the app store and see people share their challenges with others!

We manually used gpt4 for inspiration for some of the empowering quotes or fun sustainability challenge. An interesting next step could be to make use of LLMs to generate more variety of dynamic quotes/challenges and keep users more engaged after they collected most of the existing cards already.

Built With

Share this project:

Updates