NoCO2

America has a goal to reach net-zero emission by 2050. Lets help each other to monitories their daily emission and motivate people to help America reach the goal of net-zero emission in 2050.

Comment

Inspiration

The project is inspired by Microsoft's article of "Xbox is the first console platform to release dedicated energy and carbon emissions measurement tools designed for (and with) game creators". Microsoft was able to release tools to help game developers to measure the CO2 emission for their game and help innovation to build more sustainable game.

Source: link

What it does

The NoCO2 is a web platform that allow user to login or signup for accessing their dashboard. User can login/signup only using email and password. There are 2 main sections of the dashboard: line chart, and input form. The dashboard shows the recent 3 day entry of your daily emission. The input form allow user to input their daily emission on different subjects like transportation, food, and laundry cycles.

Desire Experience

We want to provide a platform that user can login/sign up to their dashboard and view their progress on maintaining a daily emission goal. Upon logging in, the user will see a line chart that display their most recent 3 days of CO2 emission and another line that visualize the daily emission goal. This help user to monitor their CO2 emission and be aware about their progress on achieving the daily goal.

User would have a section in the dashboard that allows them to input their daily activities such as transportation in X vehicle with Y mpg runs Z miles. This should send the information to backend and calculate the emission and store it inside the database. Then, visualize the user daily emission in frontend.

How we built it

The frontend is build using React framework and utilize packages such as Tailwind CSS, Firebase SDK, and Recharts to visualize UIs. The backend is written in .NET 6.0 which links to a MySQL database hosted in AWS RDS.

  1. We start building the project on May 5th.
  2. Complete Introduction web page and API design by the end of May 5th.
  3. Integrate Firebase and Rechart for frontend interaction and backend MySQL functions by the end of May 6th.

Challenges we ran into

  1. First time learning Tailwind CSS, unfamiliar with responsive styling.
  2. We are unfamiliar with .NET MVC, which makes the whole deployment of backend very technical. And we are unable to deploy the project to any Azure App Service or AWS EC2.

Accomplishments that we're proud of

  1. Build a React App that allows user login and signup.
  2. Design tables in MySQL and database connection function to retrieve user information.
  3. Host MySQL in AWS RDS.

What we learned

  1. Split the MVC architecture into different repository, makes it easier to deploy individually.
  2. Learn how to develop MySQL database and host it on AWS RDS.
  3. Learn to style React components using Tailwind CSS.

What's next for NoCO2

We want to split the project into two repositories: Frontend and Backend. The frontend should be deploy and host on a static website. The backend should be in an individual repository that can be deploy to Azure App Service. We also want to improve user experience on using the input form for adding daily emission by styling it in a more structural way. Furthermore, adding more information in the line chart to make the graph more understandable.

Share this project:

Updates