React-based web-application which renders your estimated carbon emissions based on your input for country and electricity usage for a week.
Please visit the application here.
Clone the repo:
git clone [email protected]:HansKre/carb-emissions-est-for-electricity.git
Run development server:
cd carb-emissions-est-for-electricity
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
Tests are implemented using cypress.io
, an End to End Testing Framework.
Run npm test
to receive a test-report or npm run test:open
to run tests interactively.
Since the free-tier of https://www.carboninterface.com
-API is limited to 200 requests per month, following precautions are implemented:
- all non-production-api-calls are mocked
- all api-calls made by tests are mocked
- all production-api-calls are cached server-side
If you want to use your own API-Key
locally, please make sure to:
- rename
.env.example
file to.env
- inside the
.env
, add yourAPI-Key
toCARBONINTERFACE_API_KEY
property - run with
npm run prod
Following curl
command should return a valid API-response:
export CARBONINTERFACE_API_KEY=<yourkeystring>
curl "https://www.carboninterface.com/api/v1/estimates" \
-H "Authorization: Bearer \"${CARBONINTERFACE_API_KEY}\"" \
-H "Content-Type: application/json" \
-X POST \
-d '{"type": "electricity","electricity_unit": "mwh","electricity_value": 17,"country": "us","state": "fl"}' | jq .
{
"data": {
"id": "e940c8a9-7297-4560-8944-66834de107b1",
"type": "estimate",
"attributes": {
"country": "us",
"state": "fl",
"electricity_unit": "mwh",
"electricity_value": 17,
"estimated_at": "2021-08-06T14:27:59.751Z",
"carbon_g": 6763764,
"carbon_lb": 14911.55,
"carbon_kg": 6763.76,
"carbon_mt": 6.76
}
}
}
Netlify is set up to deploy from github
.
On a push to github
, Netlify runs the build script on their servers and deploys the result (if successful).
Highly welcome. Please submit a PR.
KeyboardTimePicker
needsMuiPickersUtilsProvider
which usesDateFnsUtils
from@date-io/date-fns
package. For compatibility reasons, version1.3.x
is required. Install it withnpm install @date-io/[email protected]
.JSS
fix forSSR
: fixes 'Warning: PropclassName
did not match.' issue when reloading page during development while runningnpm run dev
.
- setup project
- sign up at carboninterface for API-Key
- setup hosting at netlify
- add tests
- for desktop
- for mobile
- final review of review
- how to install
- how to test
- how to use
- where to put own API-Key
- Add state-selection for USA & Canada
- For small mobile screens, change sliders orientation to horizontal
- Make Icons-onClick open Select and Datepicker in CountryForm