Angular Sugar Tracker

Angular Sugar Tracker

Erick L.'s photo
Erick L.
·

2 min read

🏁 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 and it is here.

🪵 Resources.

you can check this app on my repo and deployed on diabetes.elcordova.dev

📚Stack.

This is a project building with the next stack:

📱 Highlight Angular configurations.

I had to use some UI kit libraries like angular material and google charts. Environment configurations with variables in angular with 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...

  publish = "dist/diabetes"
  command = "npm run build"
HarperDB HackathonAngularNetlifyAuth0