CliMATES Home Screen
CliMATES Logo
CliMATES About Screen
CliMATES Water Screen
Our Competitors
CliMATES Background

Welcome to CliMATES

We are MATES fighting CLIMATE CHANGE! This app allows users to track how much water, carbon, and energy they are wasting to help become of the growing community fighting global warming!

Inspiration 💡

With the growing number of floods, heat strokes, ice melting stories, and more climate change stories occurring more and more frequently, we found it imperative that we help users understand how their every day decisions makes an impact large scale. After much research for an existing solution, we found no website or app that addresses water, energy, and carbon saving simply and efficiently in one website. we were determined to make the change!

What it does 💻

CliMATES allows users to track how much water, energy, and carbon they are using on a weekly or monthly basis and uses those numbers to generate a graph that visually represents this trend after 20 years. They are allowed to compare this to the average household to help them become more efficient!

How We built it 🔧

For graphic design and video production, we used

Adobe Illustrator
Adobe Premiere Pro

We built the website using

Typescript
React
SCSS

And deployed the website onto

Netlify

To generate the graphs, we use CanvasJS. These tools combine for a easy to use, dynamic website for users!

Challenges We ran into 🤔

Since we challenged myself to create this application in a day's worth of time, the time limit was a bit pressurizing. However, it also motivated me to find solutions instead of giving up!

Accomplishments that We're proud of 😁

I'm proud that

We could develop a dynamic webpage with an easy user interface
Complete this website in a day's time
Use Typescript and SCSS to its fullest extent
Learn new skills!

What We learned ⭐

We learned how to

Use Typescript features such as UseState and type binding
Use CanvasJS to generate graphs
Design a user-friendly interface

What's next for CliMATES 🎯

We have many goals for CliMATES!

Add more tracking tabs
Implement accounts using Node.js + Express.js + MongoDB + Mongoose: goals, compete with friends, and more!
Track users progress over time (will be helpful with accounts)
Integrate with every day items like computers, apple watch, etc. to help every day users understand the impact they can make

With all these features, CliMATES can truly become a connected platform that takes perserving steps towards ending global warming and saving our planet!