# Angular Sugar Tracker

# 🏁 Introduction.

this app allows saving your blood sugar level measured in morning and night and show your records in a bar chart type, this is my first approximation to auth0 and Harperdb, but it's ok, specially Harperdb, Finally, I got the opportunity to build the application because of  [#harperdbhackathon](https://hashnode.com/n/harperdbhackathon)  and it is here.

# 🪵 Resources.
you can check this app on my  [repo](https://gitlab.com/elcordova-dev/diabetes/diabetes-tracker) and deployed on  [diabetes.elcordova.dev](https://diabetes.elcordova.dev/) 

# 📚Stack.
This is a project building with the next stack:

-  [Angular 11](https://angular.io/)  (SINGLE PAGE APPLICATION)
-  [Harperdb](https://harperdb.io/)  (DATASOURCE)
-  [Netlify](https://app.netlify.com/)  (HOSTING)
-  [Auth0](https://auth0.com/)  (AUTHENTICATION)

## 📱 Highlight Angular configurations.
I had to use some UI kit libraries like [angular material](https://material.angular.io/) and  [google charts](https://www.npmjs.com/package/angular-google-charts).
Environment configurations with variables in angular with  [dotenv](https://www.npmjs.com/package/dotenv)  library and pre config script on package.json.

```
  "scripts": {
    "ng": "ng",
    "config": "ts-node ./src/config-env.ts",
    "start": "npm run config -- --environment=dev && ng serve",
    "build": "npm run config -- --environment=prod && ng build --prod",
    "test": "npm run config -- --environment=dev && ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
``` 

## 💾Highlight HarperDB Configurations.

With a pre-config script, we can set up harperDB.

```
async function create_resources(){
  await fetch_node(process.env.HARPERDB_INSTANCE, requestSchema)
  .then((response:any) => response.text())
  .then((result:any) => console.log(result))
  .catch((error:any) => console.log('error', error));

  await fetch_node(process.env.HARPERDB_INSTANCE, requestTable)
  .then((response:any) => response.text())
  .then((result:any) => console.log(result))
  .catch((error:any) => console.log('error', error));
}
``` 

## 🌎 Highlight Netlify Configurations.

Netlify has an easy deploy config to angular apps (SPA), just...


```[build]
  publish = "dist/diabetes"
  command = "npm run build"
```