#51: EcoWise

Snap, learn, and earn points for your major! Our website promotes sustainability by revealing energy-saving tips for appliances, cars, and tech. 🌱⚡ #GreenCampus

Comment

Inspiration

Witnessing the environmental challenges our world faces, we are motivated by the conviction that even the smallest individual efforts can yield significant results. As we observed the growing concern for sustainable practices, we envisioned a project that not only educates but also engages and motivates university students.

We draw inspiration from the idea that knowledge, when coupled with a touch of friendly competition, can serve as a catalyst for positive change. Through our project, we aim to inspire a shift in behavior towards more energy-efficient choices, fostering a community that not only understands the importance of sustainability but actively strives towards it.

What it does

Our web encourages energy conservation by allowing students to take photos of appliances, cars, and tech. Upon capturing an image, the app provides information on the energy usage of the item and suggests ways to save energy. Students earn points for their major groups, with additional points awarded for correctly answering energy-saving questions in a game mode. The major group with the highest points after a semester wins a celebration.

  • Photo Insight:

    • Users capture images of appliances, cars, and tech.
    • Instantly receive detailed information on the energy usage of the captured items.

  • Educational Mode:

    • Activate a game mode for a deeper learning experience.
    • Answer energy-saving questions related to the captured items.

  • Points System:

    • Earn one point for the major group by simply taking a photo.
    • Score three points in game mode for correct answers, boosting the major group's overall standing.

  • Competition:

    • Major groups compete for the highest points over a semester.
    • The winning group is recognized for their commitment to sustainability. 25k will be used as prize for the willing major group!

  • Ranking on Web:

    • Track major groups' standings and points on a web-based ranking system.
    • Foster a sense of friendly competition and motivation among participants.

How we built it

The app leverages technologies such as React, Flask, Firebase, Google Maps API, Google Cloud Vision API, and OpenAI ChatGPT API to create an engaging and educational platform promoting sustainable practices on campus:

  • Front End (React Framework)
  • Back End (Flask)
  • Database (Firebase)
  • Google Cloud APIs
    • Google Maps API
    • Google Cloud Vision API
  • OpenAI ChatGPT API

Challenges we ran into

1. Learning Curve with React and Flask:

  • Being beginners with React and Flask posed an initial challenge. Navigating the learning curve while simultaneously developing a feature-rich app required dedication and a commitment to acquiring new skills. 2. Integration Effort:
  • Connecting the frontend, backend, and database proved to be a significant effort. Coordinating the flow of data between React components, Flask endpoints, and Firebase necessitated careful planning and iterative testing. 3. Environmental Configuration for Flask:
  • Overcoming issues related to dependencies, environment variables, and deployment configurations demanded thorough troubleshooting.

Accomplishments that we're proud of

we managed to bring our entire project to fruition within just two days. This rapid development pace allowed us to implement most of the planned functionalities efficiently. Every team member actively contributed to the project's success. Although we encountered numerous bugs during the development process, our team's resilience and problem-solving skills prevailed.

What we learned

  1. Learned the entire workflow, from user interaction in React to server-side processing with Flask and data storage in Firebase, provided us with a comprehensive understanding of how each component contributes to the overall functionality of the project.
  2. Gaining hands-on experience in building front-end interfaces with React and developing efficient server-side applications using Flask.

What's next for

  1. User Feedback and Iteration
  2. Expansion of Educational Content
  3. Obtain Community Engagement and Challenges:

Team Members:

  • Joanna Cheng: developed map display component backed with google cloud map api, worked on flask backend, integrated object localization module into our web
  • Jinhong Lin: worked on flask API with Firebase developed backend GPT 3.5 chatbot & gamebot with prompt tuning
  • Yunjing Yao: worked on frontend with React
  • Haoxuan Xie: Design the overall backend workflow and frontend backend interaction, Design and implemented the entire Firebase database interface and method. Implemented four flask API and connect to route in main page. Wrote frontend js interaction files. Implemented frontend UI coding and web page display.
Share this project:

Updates