Energy Consumption Cost Estimation Portal

An Energy Supplier platform receives readings from metering points for all of its customers every day. For this assignment, we will assume that such metering points are measuring electricity usage and report a new reading value every 15 minutes. We can convert these readings to usage intervals for every 15 minutes by using the formula:

usage = reading(i+1) - reading(i)

Assignment Task

Your task in this assignment is to create a small self-service portal for customers to help estimate the cost of energy consumption. This should be a simple frontend application (no backend is required), where the user can input the following three pieces of information:

• Start time and date of the consumption (with 15-minute accuracy)
• Expected consumption (in kW)
• Duration (with 15-minute accuracy) !IMPORTANT! Note that it will be 15 minutes, 30 minutes etc. This data comes from a backend API that is mocked using apollo

There are different prices for electricity based on the time. The application should use these prices to make an estimate of the cost for the user and show this. Based on the cost schema described in the table below:

Type	23:00 - 07:00	07:00 - 23:00
Elec Mo t/m Fr	0.18/kWh	0.20/kWh
Elec Weekend	0.18/kWh	0.18/kWh

DoD

• Setup netlify PoC pipeline
• Setup Github Actions to run the following on PR's

1. • npm i
2. • Eslint
3. • Typescript check
4. • run unit tests
5. • npm build
6. • publish to test env
7. • github action to add test link to PR

• Setup Github Actions to run the following on merges for Develop

1. • npm i
2. • Eslint
3. • Typescript check
4. • run unit tests
5. • npm build
6. • execute Cypress test
7. • Make new tag for version management
8. • publish to dev env

DoD

• Written in React
• Typescript configured
• SCSS configured
• Vite configured
• Eslint configured
• #7 (out-of-scope)
• Prettier configured
• Rule set from template included

DoD

As part of the development experience I want to make sure that my scss is linted and following BEM conventions.

• Add Stylelint
• Add stylelint config
• Add BEM stylelint ruling

DoD

• Setup material ui
• Include icon set

Instructions can be found here: https://mui.com/material-ui/getting-started/installation/

Some events are using any, the rules are disabled for now as I am not familiar with the type interfaces used for React events. In Vue and Svelte they are often included in the typescript dist.

Any's that need to be removed are marked with a TODO

DoD

• Remove any usage
• Add strict typing on events for MouseEvent and HTMLInputEvents

DoD

• Change peak hours end time to 23:00 instead of 21:00
• Remove Debug code

DoD

To explain to a user how to use the application, you will be guided using Joyride.

1. It should explain the idea of the app first
2. It should explain the Date first
3. It should explain the start time
4. It should explain the duration
5. It should explain the expected consumption in kW
6. It should explain the timeout (every 15 minutes new data comes in)
7. It should show the result
8. It should explain the calculate button

DoD

• Init GraphQL Apollo
• Init mock query for login
• Init mock subscription to update the data for calculating the cost

As a user I want to pick a time with an intuitive UI. Currently a text input is not intuitive enough

DoD

• Implement https://mui.com/x/react-date-pickers/time-picker/#available-components
• Add DayJS library as part of the MUI system