Loading Project Media
(Overview)
Mostpeoplehavenofeelforhowtheirdailyhabitsaddup.EcoTrackeraskssimplequestionsabouthowyoutravel,whatyoueatandhowmuchenergyandwateryouuseathome,thenshowsyourestimatedemissionsastheychange,comparesthemwithworldaverages,andsuggestschangeswiththebiggesteffect.
(Architecture)
AReact19andTypeScriptsingle-pageappbuiltwithVite.Inputsfeedacalculationhookthatappliesemissionfactorsperkilometre,perservingandperkilowatt-hour,andreturnsdailyandannualtotalsbycategory.Everythingissavedinthebrowser’slocalstorage,sonoaccountisneededandnodataleavesthedevice.
(Engineering)
Slidersupdatealivepreviewasyoumovethem.TheresultsdashboardshowsannualtonnesofCO2e,adailyaverage,anecoscoreoutof100,abreakdownchartbycategoryandacomparisonwithworld,EUandUSaveragesandthe2-tonnetargetlinkedtotheParisAgreement,builtwithRecharts.Tipsarepersonalisedtothecategoriesthatmattermostforeachuser,andthefullreportcanbedownloadedasaPDF.Theemissionfactorsaresimplifiedaverages,soresultsareestimatesforawarenessratherthanaformalaudit.
- 01
Designedtheinterfaceandthecalculatorflow.
- 02
Builttheemissioncalculation,livepreviewandlocalpersistence.
- 03
Builttheresultsdashboard,chartsandPDFreport.
Gallery
Built with
React 19TypeScriptViteTailwind CSSshadcn/uiFramer MotionRechartsjsPDF
Explore this project
Inspect the live deployment or browse the repository code.
Haveaprojectinmind?
freddykojuru@gmail.com