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 your API-Key to CARBONINTERFACE_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 needs MuiPickersUtilsProvider which uses DateFnsUtils from @date-io/date-fns package. For compatibility reasons, version 1.3.x is required. Install it with npm install @date-io/[email protected].
• JSS fix for SSR: fixes 'Warning: Prop className did not match.' issue when reloading page during development while running npm 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