Brad Garner

Let's build something great!

I am a full-stack web developer.

I like solving problems, organizing things, and the challenge of making the complex appear simple. I like getting stuff done! I’m drawn to the web’s infinite scalability and interconnectedness that fits in your pocket.

I enjoy the client communication and team coordination the come with full-stack development. The exposure to all aspects of an application allow me to assess user feedback and determine whether the appropriate adjustment is in the UI, the API, the database, or some function along the way.

My background

My core stack is

Philosphy

PROJECTS

Current Projects

Each of the "thumbnail" projects immediately below is best viewed live. Click the links!

Website for Purple-Roof. React.js with Next.js for server-side rendering. This was my first project using Next.js, and I love it! I particularly like the modularity of components using of Next's styled-jsx.

While building this site I started reading Sarah Drasner's book on SVG animations. SVGs are fun, fast, and powerful, and I expect to continue to study these and try new things.

Beta version of green roof modeler. Though a very small area of the Purple-Roof site, this project will likely be my major area of focus for the near future.

User selects a location, Node server fetches weather data for that location, analyzes hydrologic and horticultural performance of 40 different green roof profiles over that time period, and sends the front end all 40 models. UI allows toggling between the models.

This project is nascent. What is built is solid, but needs to grow. I am eager to grow it!

A major feature of the Purple-Roof site is its blog. I chose Butter CMS for ease of integration with a React app. Butter also eases management of SEO metadata.

I wanted the primary navigation to be graphic, not text-based, and the team had recently developed the quadrant diagram. This project was one of my first attempts at splitting an SVG into multiple React components, then activating those components.

Website for Green Roof Diagnostics. Same technologies as Purple-Roof site (React and Next.js).

We originally designed this site as a static single-page site using almost no JS. Then Vanilla JS for repetitive elements. Then Next.js. Clean code and modularity is important for flexibility since sometimes you never know what you'll build when you start!

This page shows the public-facing portion of Green Roof Diagnostic's environmental monitoring (the full monitoring application is StormWatch, below).

This project was my first attempt at create React components as Node modules published on NPM. This allows me to maintain only one monitoring application, and deploy it with variable configurations to multiple apps.

The monitoring project (above) requires graphing and data visualization of a wide range of tests and experiments. We at Green Roof Diagnostics never know what we'll need to graph.

I like chart.js and react-chart-js, but they require more configuration than is reasonable for a dynamic project. So I built a preprocessor to manage this for me.

The preprocessor requires the data to be formatted as an array of objects, and each object key should be pre-defined. This aligns perfectly with a normal SQL database setup, so that's no problem.

The preprocessor creates selectors for the data, manages Y-axes, allows X-axis shifts, allows users to save pre-set configurations, and more.

This NPM module is not publicly documented yet, but it could be a great asset for similarly complex projects.

Use this here or watch it here.

My work in environmental monitoring led to the need for a wide variety of functions that I could not find elsewhere on NPM. So I started this Node module to begin collecting functions that I use all the time.

Initially this focused on date/time handling, later multiple complex object handling functions, and now unit conversions, including some odd and stormwater-specific conversions.

I have not had time to publicly document (anyone want to help?) so I assume no-one else is using it. I use this library in at least 8 different repos that I work on daily.

Photo by Wikipedia user Slambo on en.wikipedia (same as Slambo here) - Photo by Sean Lamb (Slambo), CC BY-SA 2.0, Link. Edits limited to cropping.

Environmental Monitoring

Overview

StormWatch: Internal application for collecting, managing, and analyzing data from an IoT sensor network, and R&D trials. Data sources include outdoor green roof platforms, a weather station, and a rain simulator.

Application allows for fast, consistent, accurate testing and monitoring of multiple trials.

One of the core requirements of this application is data integrity. We've got nearly 100 sensors, most of which need to have near 100% up-time. The app includes extensive monitoring of data consistency, varying alarm levels, and the ability to patch inconsistent data when redundant data sources are available.

JavaScript / ES6

ES6 features used include default parameters, template literals, destructuring, arrow functions, promises, let & const for clean, stable code.

Node

Node was used for rapid deployment and extremely fast run-time.

Express

Server-side MVC organization and API endpoint management.

SwaggerHub

I am a big fan of clear, accurate API documentation even for the smallest application.

JavaScript Web Tokens

Upon login, the user's JWT is saved in the Redux store and in the browser's local storage for access to all protected endpoints, and authenticated via custom middleware.

PostgresQL

I chose SQL for primary data persistence to allow for easy and extensive joins between tables, which is important in our analyses. I prefer Postgres due to quality documentation, specification extemely close to SQL standard, and open-source portability.

Mongo noSQL Database

Though PostgresQL is the main database, I also used a Mongo noSQL database for miscellaneous data that does not require frequent searching or joins.

logDNA

Easy, customizable, searchable logging software.

Chart JS

Easy tool for creating compelling - and animated - graphs. Critical for understanding our data.

Mocha

Server-side test suite uses the Mocha framework and Chai assertion library.

Chai

Server-side test suite uses the Mocha framework and Chai assertion library.

HTLM5

New HTML5 features used include semantic elements, new form features, and placeholder text.

Firebase

Secure file storage and file access authentication.

React

The client-side framework is React, used for its grace and speed of DOM manipulation.

Redux

This started as React without Redux, but with growth, I added Redux to simplify state manipulation.

Jest

Testing assertion library used with Enzyme.

Enzyme

Client-side (React) testing.

CSS3

New CSS3 features used include Flexbox, border-radius, and box-shadow. LOTS of Flexbox!!!

CauseWay (Academic Project)

Overview

This app connects charitable organizations and volunteers.

Organizations and individuals can post opportunities to volunteer, or even post offers to help others. The application handles opportunity signup, and allows the opportunity's host to accept or reject volunteers.

Process

Challenges

Upcoming

JavaScript / ES6

ES6 features used include default parameters, template literals, destructuring, arrow functions, promises, let & const for clean, stable code.

Node

Node was used for rapid deployment and extremely fast run-time.

Express

Server-side MVC organization and API endpoint management.

RESTful API

All endpoints are restul. Visit the API documentation on Swaggerhub.

SwaggerHub

Clear, accurate API documentation was essential for our development team. CauseWay's API documentation is here.

JavaScript Web Tokens

Upon login, the user's JWT is saved in the Redux store and in the browser's local storage for access to all protected endpoints.

Passport Authentication

All protected endpoints utilize Passport middleware.

Heroku Postgres Database

We chose a SQL database due to the many join tables needed between our two primary tables: users and opportunities. Heroku Postgres is used for easy integration and command line tools.

Knex

Knex is used for SQL queries within Javascript.

Mocha

Server-side test suite uses the Mocha framework and Chai assertion library.

Chai

Server-side test suite uses the Mocha framework and Chai assertion library.

Travis CI

Travis CI was used to allow continuous testing during development.

HTLM5

New HTML5 features used include semantic elements, new form features, and placeholder text.

React

The client-side framework is React, used for its grace and speed of DOM manipulation.

Redux

Redux organizes our front end. Redux's one-way data binding helps ensure stailbity in this multi-dimensional application.

Jest

Testing assertion library used with Enzyme.

Enzyme

Client-side (React) testing.

CSS3

New CSS3 features used include Flexbox, border-radius, and box-shadow.

Github

The project's client-side repo and server-side repo are here and here.

Heroku

View the app live here.

Code To Go (Academic Project)

Overview

This is a MVP for an app to facilitate improving code skills on the go.

People check Facebook or Twitter on their phone, if only to fill a few idle minutes. Why not convert that time into mastering a language or framework!?

Say you have 10 minutes to spare waiting for a bus, between meetings, etc. You could answer a few questions, get immediate feedback, and leave with at least 1 or 2 concepts in your head that can soak in while you do other things.

Key Features

Challenges

Upcoming

JavaScript / ES6

ES6 features used include default parameters, template literals, destructuring, arrow functions, promises, let & const for clean, stable code.

Node

Lightweight, scalable server-side language ideal for an application that requires fast processing but minimal computation.

Express

Server-side MVC organization and API endpoint management.

RESTful API

All endpoints use RESTful principles. Endpoints include authentication, users, quizzes, questions and answers.

Passport Authentication

All protected endpoints utilize Passport middleware.

JavaScript Web Tokens

Upon login, the user's JWT is saved in the Redux store and in the browser's local storage for access to all protected endpoints.

Mongo noSQL Database

This app has a simple data model with minimal relational needs, so MongoDB fit the bill for ease of use.

mLab

All data is hosted at mLab. There are 4 collections: quizzes, questions, users, and choices (users' answers to questions).

Mocha

Server-side test suite uses the Mocha framework and Chai assertion library.

Chai

Server-side test suite uses the Mocha framework and Chai assertion library.

Travis CI

Travis CI was used to allow continuous testing during development.

HTLM5

New HTML5 features used include semantic elements, new form features, and placeholder text.

React

The client-side framework is React, used for its grace and speed of DOM manipulation.

Redux

This simple app relies heavily on state, so I used Redux for superior state management. Redux-form and Redux-thunk are used.

Enzyme

Client-side (React) testing.

Jest

Testing assertion library used with Enzyme.

CSS3

The entire app uses CSS3's wonderful feature Flexbox. I use a few other new CSS3 featues on this page (my portfolio page).

SASS

I wrote the CSS for this app in SASS for speed of evaluating color schemes (using variables) and overall code organization.

Github

The project's client-side repo and server-side repo are here and here.

Heroku

View the app live here.

BioWall Design Guide

Overview

JavaScript

Most scripts simply toggled 'display: none' and 'display: block'. Scripts for displaying and filtering plant images was challenging at the time.

jQuery

I used jQuery for all DOM manipulation.

HTLM4

This was simple HTML within a Wordpress environment.

CSS

I laugh at my CSS from this project. But it helps me appreciate what I know now.

Wordpress

This is written as a simple Wordpress plugin, customizing a theme and with a custom menu.

Yet Another Great Project

This is not my project... I just like those colors! I'll fill this slot soon!

Rationale

Python

JavaScript / ES6

Node

Express

RESTful API

Postman

JavaScript Web Tokens

Passport Authentication

Mongo noSQL Database

mLab

RoboMongo

PostgresQL Database

Knex

Faker

Mocha

Chai

Travis CI

HTLM5

jQuery

React

Redux

Jest

Enzyme

CSS3

SASS

Github

Heroku

MORE SOON!

This was last updated in February 2019. I'll try to keep this site updated with my latest work.