CliMate

Empowering our future, fact by fact and task by task!

Comment

Inspiration

When talking about the environment, there is a noticeable lack of environmental education for elementary schoolers. Often, people are afraid that introducing them to such an overwhelming topic will become unbearable or too burdening. However, educating them about current matters of the environment and the role they can play in mitigating the damage our planet faces can make all the difference for generations to come. Our team aims to equip younger students with the knowledge and action they need to advocate for the environment, especially as matters become more pressing. We aim to do this in an understandable and simplified way to promote localized advocacy in our younger generation. We believe that anyone of any age should be educated on climate change and what they can do to contribute to the fight for our planet’s livelihood. Our name embodies the idea that we serve as a buddy for kids as they learn and take action on the environment. CliMate was inspired by two platforms, Quizlet and Khan Academy! Quizlet served as our inspiration in the knowledge aspect of the website. It incorporates features such as falling asteroids to make learning the notecard material more attention-grabbing. Khan Academy inspired our engaging UI/UX with badges and levels. Part of its rise as such a globally used education platform is the engaging rewards system it uses to incentivize students to continue learning. The action aspect of CliMate is inspired by the concept of bucket lists to accomplish long-term goals.

What it does

CliMate is separated into two pillars, Knowledge and Action. We believe those are the two essentials needed by kids to become more educated on the climate and contribute to their communities. CliMate starts off with a login/sign-up page where users can register for an account. This enables users to save their progress across a variety of devices. From here, the user is taken to a home page. The home page will display their badge and current point count. It will also give them an option to go to the Knowledge page or the Action page. The Knowledge page will quiz the user on a variety of topics related to the climate, everything from rainforests to factories. This won’t just be simple quizzes, however, as our team recognizes that younger students process more information when it is coupled with engaging visuals. The Action page lets the student track what they’ve done to make eco-friendly improvements in their personal lives and communities. It is done through a weekly bucket list that the user checks off items from. Some sample tasks would be: Planting a plant in your backyard, take a 5 minute shower, switch to a reusable water bottle for school, reuse a mask (to mitigate how Covid has increased environmental pollution in the form of disposable masks), get a classmate to switch to a reusable water bottle. The tasks will also have links next to them for users to click on in case they need further assistance completing the item. The point/badge system is relatively simple. A student gains points for things such as completing all the bucket list items in a week, scoring high on several Knowledge quizzes, or having done Knowledge and Action items for a sustained amount of time. When they hit a certain point count, they will level up to a new badge. Each badge is a new environmental character based upon a career involved in environmental science. For instance, there is Clara the Climatologist, Lauren the Environmental Lawyer, Betty the Botanist, Enzo the Environmental Engineer, etc. Each time a new badge is unlocked, the character pops up and a description of the profession comes with it. The characters will have lots of variety in appearance to reflect the diversity of those entering careers fighting climate change.

How we built it

To come up with the idea, we called on Discord and wrote out all our thoughts on a doc. Once we’d decided we were interested in addressing the lack of environmental education, we formulated a list of features by pulling inspiration from current productivity platforms. After this, we focused on each of our roles and set action items to complete before our next meeting. We wanted a very professional solution to user authentication and we did not want to handle user passwords. At first we attempted to use Google Firebase to handle the user authentication, but the docs were terrible for implementing our vanilla JS use case. After hours of integration difficulties, we decided to switch to Supabase. Supabase handles everything to do with user authentication, it can even send out password reset emails to our users. Furthermore, it also gives us an easy-to-use RESTful api that we utilize for storing our articles, user’s points, and user tasks. We protyped our designs first in Google Drawings and then refactored them in Adobe XD. Then, we converted our wire frames to a responsive CSS design. This project was built almost entirely with HTML/CSS/JavaScript.

Challenges we ran into

As a team of mostly beginners, there was definitely a learning curve with this hackathon.
We faced a couple of changes in developing CliMate, for example. In our initial development, we struggled to come up with an idea. We wanted to address an often overlooked gap, especially regarding the environment and Covid. However, we consistently called and eventually settled on our current idea. We were eager to flesh out all the features we could include, but ran into trouble in narrowing down our idea. We knew we were limited on time, so our first prototype couldn’t have everything we’d hoped. Despite this, across team discussion, we decided to focus on getting our Knowledge and Action pages done because those were the pillars of our initial idea. On a more technical note, we had a few errors, but managed to troubleshoot through them together. For instance, Firebase would only work with compiled front-end libraries, so we had to switch to Supabase for our user authentication and postgres database in our login page feature. This was my first time building an entire project only using HTML/CSS/JavaScript. I have experience making games with Processing so we decided that I should build something with p5.js, which is basically Processing in JavaScript. Because I was also doing quizzes and had to brush up on my JavaScript to get that done too, I wasn’t able to finish one of the mini games I was planning in time to submit. CSS was another issue that came up as we were putting together the project. Many of us were not experienced with the language and since we were short on time, we weren’t able to have the layout looking as clean as we’d hoped for certain pages. The general structure for how we wanted the website to look are there, and we know with more time we can fix up the various kinks like having to scroll to see certain buttons or the responsive layout breaking for certain sizes on the browser.

Accomplishments that we're proud of

Though we faced several challenges and very limited time, we were able to successfully complete a prototype that reflected the core of our idea. Furthermore, our group truly worked well together as we had constant communication and helped each other with any difficulties. Our teamwork also brought us closer as we exchanged lots of ideas. Overall, we are proud of ourselves for being able to identify an addressable gap and working together to mitigate this issue!

What we learned

Our team learned a lot about our own strengths and weaknesses across developing CliMate, but, most importantly, we shared our skills to each come away with something. One of our members learned how to use replit, another gained proficiency in developing wireframes, another tried out a new method of back-end development, and another learned about web development. By attending the wonderful workshops provided and helping each other out, we ended up finishing our first prototype. For instance, in working on our idea, we gained more insight into the research process of identifying a gap and finding existing approaches. In doing our presentation, we got better in our pitching abilities and worked on articulating our ideas. In the development and pitching process, we all came away with new soft and hard skills

What's next for CliMate

From the very start, we had a lot of ideas for where CliMate could go and see immense potential for it in the future. A few of the ideas we have are:

  • Outreach to local elementary schools to pilot test CliMate and receive feedback
  • Add a level for middle schoolers to complete
  • Add more topics to the Knowledge section, maybe even feature videos from real professionals talking about the topic
  • For badges, do real heroes in the fight to end climate changes
  • Add new game modes to the Knowledge portion using different graphics
  • Add a community feature to share points and progress with friends

Built With

Share this project:

Updates