Developer needed to make a simple React-Node-typescript project
Budget: $30 – $60 AUD
I need this to be complete within the next 3-4 days as I need to show it to a prospective client.
## Frontend Version (Make sure Node16 is installed with this starter)
Use the randomly generated test data (code is included) the server returns by default and build the UI for the dashboard
Your dashboard MUST:
* Show the date range the usage summary covers
* Prominently display the total amount of electricity used in the period covered by the usage summary
* Prominently display the average daily amount of electricity used in the period covered by the usage summary
* Include a tabular view of daily usage data embedded in the summary
Other tips
* Use your preferred CSS approach (ie styled-components, inline styles, vanilla asset bundling) but be prepared to discuss alternatives in follow up
* Keep an eye out for the artificial time delay on the server, it's there to encourage you to put loading states in the UI
### Backend Version
Change the server to return a "real" UsageSummary based on smart meter data
* In `server/app.ts` comment/uncomment the relevant code to switch from sample to real data
* You must implement all compulsory fields on `UsageSummary` (totals and averages for varying time horizons)
*Calculate the optional field `UsagePeak`. [What is peak demand](https://www.enertiv.com/resources/faq/what-is-peak-demand) can help you understand the underlying concept there
Other tips
* Add tests
* Information on the CSV file format can be found at [github.com/charliedotau/Smart-Meter-File-Format-Examples-Aus](https://github.com/charliedotau/Smart-Meter-File-Format-Examples-Aus). Short version: ignore the first 3 columns, column 4 is the date, and columns 6+ are the kwH used in each half hour window.
* Keep an eye out for the nominated units on data fields. [kW !== kWh](https://www.solarquotes.com.au/blog/kw-and-kwh-what-is-the-difference/)
## Frontend Version (Make sure Node16 is installed with this starter)
Use the randomly generated test data (code is included) the server returns by default and build the UI for the dashboard
Your dashboard MUST:
* Show the date range the usage summary covers
* Prominently display the total amount of electricity used in the period covered by the usage summary
* Prominently display the average daily amount of electricity used in the period covered by the usage summary
* Include a tabular view of daily usage data embedded in the summary
Other tips
* Use your preferred CSS approach (ie styled-components, inline styles, vanilla asset bundling) but be prepared to discuss alternatives in follow up
* Keep an eye out for the artificial time delay on the server, it's there to encourage you to put loading states in the UI
### Backend Version
Change the server to return a "real" UsageSummary based on smart meter data
* In `server/app.ts` comment/uncomment the relevant code to switch from sample to real data
* You must implement all compulsory fields on `UsageSummary` (totals and averages for varying time horizons)
*Calculate the optional field `UsagePeak`. [What is peak demand](https://www.enertiv.com/resources/faq/what-is-peak-demand) can help you understand the underlying concept there
Other tips
* Add tests
* Information on the CSV file format can be found at [github.com/charliedotau/Smart-Meter-File-Format-Examples-Aus](https://github.com/charliedotau/Smart-Meter-File-Format-Examples-Aus). Short version: ignore the first 3 columns, column 4 is the date, and columns 6+ are the kwH used in each half hour window.
* Keep an eye out for the nominated units on data fields. [kW !== kWh](https://www.solarquotes.com.au/blog/kw-and-kwh-what-is-the-difference/)