Hidrosaver: Track Your Water Consumption with This Easy-to-Use App

Hidrosaver

About

The Hidrosaver web app is a water tracker. Hidrosaver's purpose is to help people to organize, track and measure their current water consumption.

Authors

Live site

https://hidrosaver.vercel.app/

What a user can do

The user can add new metrics to his homepage, based on the action. After adding his action, the user can access metrics, and graphs about his consumption.

How to run

Clone the repository and inside project folder, you must run npm i && npm run serve on the terminal and access the Hidrosaver, by default, on http://localhost:8080/

Technologies used

Front-end

Data description

All data about the user and his metrics are saved in the localStorage inside the web browser. The data structure looks like this:

[
    {
        "day": "05/06/23",
        "metrics": {
            "banho": { "quantity": 48, "liters": 336 },
            "torneira": { "quantity": 220, "liters": 4400 },
            "descarga": { "quantity": 0, "liters": 0 }
        }
    },
    {
        "day": "03/06/23",
        "metrics": {
            "banho": { "quantity": 100, "liters": 336 },
            "torneira": { "quantity": 220, "liters": 4400 },
            "descarga": { "quantity": 340, "liters": 100 }
        }
    },
    {
        "day": "02/06/23",
        "metrics": {
            "banho": { "quantity": 10, "liters": 10 },
            "torneira": { "quantity": 200, "liters": 200 },
            "descarga": { "quantity": 340, "liters": 400 }
        }
    },
    {
        "day": "01/06/23",
        "metrics": {
            "banho": { "quantity": 3, "liters": 3 },
            "torneira": { "quantity": 123, "liters": 12 },
            "descarga": { "quantity": 323, "liters": 32 }
        }
    }
]

.gitignore

node_modules
dist/

.prettierrc

{
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
  }

Download details:

Author: nathborges
Source: https://github.com/nathborges/hidrosaver

#vue #vuejs