• Summary
• Connect with me
• Projects
  • My Website
  • Fantasy Pay
  • Vue App
  • Foursee
  • Simple GPA Calculator
  • JS AST Visualizer
  • My Website (previous version - v2)
  • My Gitlab Server
    • Dev Ops & CI/CD
    • Other Services I Run On My Server
• Open Source Contributions
• React.js
• Vue.js
• Nest.js
• Feathers.js
• Accounts.js
• Cypress
• Misc

This is a list of some of the awesome stuff that I've done. Okay, not all of it would qualify for a true Awesome List, so maybe this is more of just a list... Oh well. See below for some of the stuff I've done, places to find more info on me and more!

While this document is a good overview of my non-professional experience, my resume and LinkedIn are better overviews of my professional experience. My most up-to-date resume can always be found on my website

Website: www.nickbolles.com

Resume: nickbolles.com/resume

Linked In:

TripleByte: TripleByte Profile - I'm in the top 10% of engineers on TripleByte Certificate here

Github: github.com/nickbolles

Oct 2020

www.nickbolles.com

• Source
• More details in the projects Readme.md

My personal website has a little bit of information about me as well as links to my most up-to-date resume, my Linked In account and links to other places to connect with me.

• built with Sapper (Svelte), Tailwind and CSS
• Full fledged PWA (try loading it up, then turn off your internet and re-load it)
• Lighthouse perf score of 100 across the board
• Hosted on Vercel
• Of course there's a dark mode. It also takes system preference into account.

• Sapper (Svelte)
• Typescript
• Tailwind CSS
• CSS Animations (check out the dark/light mode button animations)
• Custom SVG Edits
• Svelte-Image
• VSCode

Feb 2016 - Oct 2017

• Source
• More details in the projects Readme.md

This app was the start of an entrepreneurial effort by a friend of mine. It was going to be a service for collecting and dispersing Fantasy Football and other contest based payments. Unfortunately we got a ways down the road and realized that the business model had some issues, financially and legally, so we decided to stop the project.

I took this opportunity to dive into Angular 2+ and typescript. I learned a ton and really got into advanced Typescript usage.

• Client
  • Angular 2+ (4.x)
  • Angular Material 2
  • Angular Animate
  • Angular CDK
  • Angular CLI
  • Typescript
  • SASS
  • RXJS
  • NGRX store
  • Animate.css
  • D3
  • Moment.js
  • Stripe (payments)
  • Jasmine
  • Karma
  • Typedoc
• Server
  • Node.js
  • Express.js
  • Passport.js
  • Typescript
  • Nodemailer
  • Mongoose (and Mongodb)
  • Socket.IO

Nov 2018 - Feb 2019

Source: https://gitlab.dev.nickbolles.com/Matt-n-nick/app

Demo: https://develop-matt-n-nick-app.dev.nickbolles.com

(currently login is not working because of a package version issue)

This is an app that I've been working on with a buddy, Matt, to teach him a bit about how to code websites. We are both using it as an opportunity to learn Vue.js more in-depth as well as Feathers.js as the backend.

Originally we went down a route of making this an app for recording and reviewing specific meals at restaurants so that I can actually remember that I don't like the Chicken Parmigiana from Olive garden... Since then we've kinda just been approaching it as a learning experience and will probably use it as a base for something else in the near future.

• Client
  • Nuxt.js (Vue.js)
  • Typescript
  • Vuex
  • Feathers-Vuex
  • Nuxt class component
  • Nuxt property decorators
  • Vuetify
  • SASS
• Server
  • Node.js
  • Feathers-plus/CLI
  • Feathers.js
  • Passport.js
  • Notifme-sdk and notification-catcher
  • Mongoose (and Mongodb)
  • Socket.IO

2015 - Feb 2017

• Source

Foursee is an app to help students (mostly me) see the effects of every point of every assignment on their grade for that course, their semester GPA and their overall GPA. I can't count how many times myself or friends grabbed a calculator and tried our best to calculate this. If we just had an app to keep track of it and show us the minimum and maximum grades we can get and what the bigger effect would be if we got those grades, it would save a bunch of time that we could be spending on studying!

This was the first app that I really dove into. I learned a ton and re-wrote it like 6 times. I just wanted to learn how to do it right. In it's current state it's actually very well organized and has some really cool patterns to keep the code really DRY. It isn't complete, but there is a rendering on the app's readme of what it looks like in action.

• Client
  • Angular 1.x (1.5.9 to be exact)
  • Angular Material
  • Angular Animate (ngAnimate) and custom animation code on top
  • Typescript
  • SASS
  • D3
  • Ui Router
  • Moment.js
  • Gulp
  • Webpack
  • Jasmine
  • Karma
  • Typedoc
  • Cordova
  • @nb/eduItemModel - Private NPM Link
    • This is the model backing the project. it's complex and uses an Observable data model (@nb/nbobservable) based on proxies (MDN Docs - npm module @nb/nbproxy) to notify observers, much like Vue.js V3.0 will do
• Server
  • Node.js
  • Express.js
  • Passport.js
  • Typescript
  • Nodemailer
  • Handlebars
  • Moment.js
  • Mongoose (and Mongodb)
  • Socket.IO
  • Winston.js

April 2018 - March 2019

www.nickbolles.com - replaced with version 3

• Source
• CI/CD
• Docker containers
• More details in the projects Readme.md

My personal website has a little bit of information about me as well as links to my most up-to-date resume, my Linked In account, github account and my Gitlab server that I host on my home server.

• Full fledged PWA (try loading it up, then turn off your internet and re-load it. Everything except for the contact form should work)
• Lighthouse perf score of 88
• CI/CD on every commit
• Hosted on my home server

• Nuxt.js (Vue.js)
• Typescript
• Vuetify - UI Library
• ScrollMagic - Animation Library
• GSAP - Animation Library
• VSCode

Jan 14 2017

• Live Link
• Source

This is a simple calculator that calculates your minimum and maximum attainable GPA given your current credits, GPA and how many credits you have left.

• Angular 2+
• Angular Material 2
• Angular CLI
• Typescript
• SASS
• D3
• RXJS

Mar 2019 - April 2019

• Live Link
• Source

This is a simple abstract symbol tree (AST) parser that prints out a visualization of it the AST. My goal was to understand how transpilers like typescript and babel work, more in depth. I think it would be really cool to do this in a way that helps teach the difference between typescript and javascript. Which parts are TS, which parts are just JS. This could maybe help people learn TS easier.

• React - next.js & react hooks
• Typescript
• Material-ui
• jss - js styles
• code-mirror editor
• babel - for AST parsing/traversal

gitlab.dev.nickbolles.com/explore/projects

I host a Gitlab CE server on my home server (powered by Unraid, Docker, Traefik and Lets Encrypt). Because all of the data is hosted locally, I keep most of my code on my gitlab server. Most of the links in this page link there.

One of the coolest things about running my own gitlab server, and having a docker based home server, is the dev ops and auto review apps. This means that I can setup Gitlab CI/CD to spin up a docker container that will do testing, building, performance testing etc. on every commit, as well as deploy to a docker container and automatically setup the routing with Traefik and set up HTTPS with Let's Encrypt.

For example, when I commit a change to my website it runs through 3 phases

1. Build the app, which will check for any build issues, especially with Typescript (this is separate because Docker hides some build issues sometimes, not quite sure why)
2. Build a docker container for the app
3. Deploy the docker container with Traefik configured to setup Lets Encrypt auto-magically

• Traefik for HTTPS by default
• Gitlab - gitlab.dev.nickbolles.com/explore/projects
• Gitlab dev ops runners
• Private NPM registry - npm.nickbolles.com/
• Jira
• MongoDB
• MariaDB
• Postgresql
• Redis
• InfluxDB
• Elastic Search & Kibana
• Nextcloud
• Multiple code-server instances for development
• Tons of other stuff, Docker is awesome!

• Next.js auth-module

  I submitted the first iteration of Typescript typings for the next-auth module

• Nuxt.js
  • Helped design and test the native Typescript support in Nuxt 2.4. I've also been active in the support chat to receive help and help others.
  • Help add Typescript support to create-nuxt-app - Pull Request
  • Add Typescript generation of components and tests to create-nuxt-app - Pull Request
• nuxt.js/axios
  • Improve typescript instructions - Pull Request
• nuxt.js/auth
  • Use nuxt base url setting - Pull Request
  • Typescript typings - Pull Request

• Fixes for @nestjs/graphql - Pull Request
• Create Accounts.js module for integration into nest.js - Pull Request
• Typings fix for @nestjs/passport - Pull Request

• Feathers core

  I've submitted a few typing enhancements to the Typescript type definitions in DefinitelyTyped. I'm also helping convert the entire codebase to Typescript to make maintaining type definitions a thing of the past and improve multiple internal Feathers issues. I've also been active in the chat to learn and help others.

• Feathers-plus/CLI

  Feathers-plus/CLI is a coding buddy. It's built on top of Yeoman and generates a ton of code for you and is safe to re-run. This is huge because it's not just a copy and paste boilerplate, it's a living breathing upgradable project. I've become one of the several goto people for Typescript in Feathers-plus/CLI and I am in communication with the core maintainer. As of october 2019, this project has become stagnant. I've begun using other server frameworks (primarily nest.js)

• Feathers-Vuex

  Feathers-Vuex makes communicating between feathers and your vue components super simple, and efficient (thanks to state management by Vuex). I've developed the typescript types and a few other fixes for Feathers-Vuex.

  • support SSR and fix serialization of models - Pull Request

• Feathers-hooks-commons

  I've contributed to a few PRs on this, including typescript definitions and submitted a few enhancements

• Create Accounts.js module for integration into nest.js - Pull Request
• Several Misc fixes - to typings - to error handling - to Impersonation API

• Add typescript typings - Pull Request
• Publish Cypress-nuxt
  • repo
  • stats
  • showcased on Cypress.io

• Typescript Typings
  • Mongo-connection-string - Pull Request
• ts-configurable
  • contribute tests for a missing piece of functionality - Pull Request - Issue with link to fix
• Strapi.js Strapi is a CMS that aims to be completely customizable. I started using it in a project and did several PRs before hitting deal-breaker and not simple to fix issues and moved to a Feathers based solution
• Graphql-code-generator - decorator customization - Pull Request