A Water Tracker App to Measure Water Consumption with Vue

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 }
        }
    }
]

Download details:

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

License: 

#vue #vuejs