Category Archives: Project Log

A collection of web development projects I’ve done for the organizations I’ve worked with.

Puff Finder

Utilizing previous techniques on creating a VueJS embeddable web app, I decided to propose the same for the Cannabis industry.

Meet Puff Finder – a web tool for filtering standardized data of cannabis seed companies, strains, brands, products, batches, retailers, and studies.

Core Technologies

  • Vue CLI
  • Vuidget – Vue.js embeddable widget
  • Bootstrap 4, Bootstrap Vue
  • RapidAPI

SleepScore Article Generator

Considering REST API calls for WordPress were available since version 4.7, to me this was an opportunity to make a new experience. I wanted to consume blog posts and reuse them.

My approach was to consume those posts into an interface which could be cut and pasted to any web page. The empowering feature would be that the user could customize the colors of the widget with just a few clicks. So I created an Angular 6 proof of concept in 2018 which I positioned to be an affiliate marketing tool for SleepScore Labs. Do note, this app never went into production.

However, because of its ability to promote the brand from as easy as a copy/paste, it inspired business development to think about integrating SleepScore offerings in other ways.

In 2019, the creation of B2B sleep programs for companies promoting health and wellness to their employees was realized and a new revenue stream for SleepScore Labs was established.

Core Technologies

Article Generator

  • Angular 6
  • Angular PWA
  • Bootstrap 4
  • Gulp
  • Font Awesome
  • ngx color picker

Widget Embed

The code used via cut/paste also had to be built. The widget itself is a JavaScript embed. The logic is primarily DOM creation with jQuery alongside the Module Pattern as described by Addy Osmani.

SleepScore Animated Aura

A reusable JavaScript animation I developed for web and mobile platforms. This is currently the visual centerpiece of the SleepScore App available for FREE on iOS and Android.

The fundamentals for this were based on Addy Osmani’s explanation of The Module Pattern. A developer would call the object Aura and pass in an object literal of key-values to kickstart the animation. I used gulp for build tasks such as minifying code. Then each platform could host the final build artifacts on their respective app.

Core Technologies

  • jQuery v3
  • Sass
  • Gulp

SleepScore Cluster Analysis

A video walkthrough of a previously built Data Visualization Python Web App – enhanced with company branding, responsive layouts and shipped into Microsoft Azure Cloud. This tool was primarily intended for CES but feel free to view the Cluster Analysis Tool here!

Core Technologies

  • Bootstrap 4
  • jQuery
  • D3.js
  • Chart.js
  • Microsoft Azure
  • Python, Flask

SleepScore Sleep In America

A video walkthrough of a VueJS Data Visualization Web App I developed for SleepScore.com. This app acts as an embeddable widget so the codebase can be hosted on any domain or mobile app. The end user is able to compare and contrast sleep data based on region and gender. This was optimized mainly for iPad/tablet use cases for CES.

Core Technologies

  • Vue CLI
  • Vuidget – Vue.js embeddable widget
  • Vue Circle Progress
  • Bootstrap 4, Bootstrap Vue
  • jQuery
  • Google Charts

SleepScore Web Portal

A video walkthrough of an Angular Data Visualization Web App I developed for SleepScore’s App & Max Sleep Improvement Systems. The end user is able to look at additional data sets pertinent to their previously recorded sleep sessions.

The original write-up was written in Angular 2. Feel free to review it here.

Core Technologies

  • Angular 4
  • TypeScript
  • Twitter Bootstrap 3
  • jQuery
  • Moment.js
  • Highcharts
  • Microsoft Azure

SleepScore Product Finder

A video walkthrough of a VueJS Web App I developed for SleepScore.com. This app acts as an embeddable widget so the codebase can be hosted on any domain or mobile app. The end user is able to fill out a dynamic questionnaire with the final results ending in a series of matched products based on previous questions asked. Try the Product Finder out today!

Core Technologies

  • Vue CLI
  • Vuidget – Vue.js embeddable widget
  • Bootstrap 4, Bootstrap Vue

Upgrade from Angular 2 to Angular 4

In an effort to create an upgrade path from an Angular 2 app to Angular 4, this is what I changed to accomplish just that.

Do note:

  • This web app predates Angular CLI and is loaded via SystemJS and not webpack.
  • This effort is an instant 60% reduction in bundled Angular library code.
  • Is backwards compatible with Angular 2.

tsconfig.json – BEFORE

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types" : []
  },
  "exclude": [
    "node_modules"
  ]
}

tsconfig.json – AFTER

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "removeComments": true,
    "sourceMap": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "types" : []
  },
  "exclude": [
    "node_modules/*"
  ]
}

package.json – BEFORE

{
  "dependencies": {
    "@angular/common": "2.4.6",
    "@angular/compiler": "2.4.6",
    "@angular/compiler-cli": "2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/forms": "2.4.6",
    "@angular/http": "2.4.6",
    "@angular/platform-browser": "2.4.6",
    "@angular/platform-browser-dynamic": "2.4.6",
    "@angular/router": "3.0.0"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.0",
    "typescript": "^2.0.2",
    "typings": "^1.0.4"
  }
}

package.json – AFTER

{
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0"
  },
  "devDependencies": {
    "@types/node": "^6.0.60",
    "concurrently": "^3.1.0",
    "lite-server": "^2.3.0",
    "typescript": "^2.2.2"
  }
}

Chatbot with Microsoft Azure

In lieu of SleepScore Labs newest sleep solution, SleepScore App, our Customer Service team wanted to create a chat alternative to support this product launch.

Over the course of three furious weeks (one to vet out the needs, and two to build), I worked one-on-one with our Customer Service Manager on outlining the bare minimum of what we’d really want in this type of feature.

It’s safe to say, that you can get trapped inside of a rabbit hole fairly quickly with ideas but after easing in a bit our solution was to design an FAQ (Frequently Asked Questions) Chatbot.

We took as much existing data we could from previous customer service engagements, organized them a bit and indexed them within a Web Service called QnA Maker. I connected that dot to a Microsoft Azure Bot Service as a NodeJS Web App and published it to a channel called Live Assist.

A NodeJS chatbot powered by QnA Maker, Microsoft Azure and channel, Live Assist.

Housed entirely inside of Microsoft products, I was for the most part impressed on how straightforward it was to put all three together to build out something real customers could actually engage with. There was no additional coding on my part and getting to the finish line on time was in itself a win.

If you ever wanted to try building this out yourself here’s the bare minimum you’d need:

  • QnA Maker: which will index your questions and answers and open an end-point for your web app (chatbot) to consume.
  • Azure Bot Service: which is actually how you create the chatbot.

The optional requirement here is the channel. Building out a chatbot requires you to point your chatbot to a channel. In our case it was Live Assist because that was the requirement. But this could easily ship to other channels like Facebook, SLACK, etc.

I’ll be making a follow-up post to this for the most part as a retrospective to outline the journey and its gaps to this implementation in hopes that one day I have the opportunity to make more improvements at this first pass on building out a chatbot.

Thanks to, Microsoft Developer US for getting me started.

SleepScore Labs Data Dashboard in Angular 2

In April of 2017, I was tasked with design and development of a data visualization dashboard for new customers of SleepScore Max, a non-contact sleep improvement system. Designed for both iOS and Android users, my role was to build a web application which would compliment this sleep solution experience by connecting the dots between sleep data and pragmatic advice in a more robust fashion.

I took it upon myself to go head first into Angular (granted my previous experience with AngularJS) but I got a first-hand view of how different both JavaScript frameworks were.

SleepScore Max login page written in Angular.

SleepScore Max login page written in Angular.

I kickstarted this project prior to the full standardization of Angular CLI so I was pretty much left to my own devices on how to properly build and deploy this application into a cloud instance.

I credit PluralSight author Deborah Kurata as the initial key to making this project work. Specifically, her course in Angular: Getting Started was a jaw-dropping course on Angular’s moving parts. Needless to say, now that I have both AngularJS and Angular perspectives, my best assessment on distinguishing between AngularJS and Angular is that while AngularJS thinks of drafting features from controllers and scope, with Angular you need to abstract those things via components.

To dumb it down for me, I’ve come to think of a component as simply a web page (the overall object), while the super powers you write inside of that web page act as the methods and properties of that web page. Coming to that conclusion wasn’t linear. I needed to dive into TypeScript since it is the driving force in authoring modern Angular apps.

I’m still tinkering with TypeScript and have a long way to go to understand its full value but I definitely became a fan simply because it makes a JavaScript author a bit less error prone. Let’s face it, web browsers are still running JavaScript in ES5 and not ES6. Having that superset above JavaScript to reinforce little things like the data-type of an object is awesome and learning how to write a component in TypeScript helped reinforce how I’ve dumbed down the difference between AngularJS and Angular.

A splash of jQuery animation for the sleep score petals, CSS styling to chart out the breakdown all inside of an Angular dashboard.

A splash of jQuery animation for the sleep score petals, CSS styling to chart out the breakdown all inside of an Angular dashboard.

Yes, this dashboard is also responsive.

Yes, this dashboard is also responsive.

What’s next? I’m already thinking about the upgrade path into Angular version 5, smoothening out continuous integration and making Angular CLI the gold standard for facilitating all portions of this project.