Braden Kelley

House So Green is a tool for finding green-certified homes. The site has information about homes as well as the suppliers, products, certifications, and awards associated with them.

I wrote the front-end for this site using React. The data is managed using Apollo GraphQL. A designer had provided mockups of the design in Sketch, which I then incorporated into the site using a combination of SCSS, Styled Components, and Bootstrap.

DataWorker is a joint effort mainly between me and one other coworker. We were interested in displaying tabular data on our internal website at work, but we were not satisfied with any pre-existing solution we could find. We had large amounts of data to receive and sort through, but we wanted to have the tables all rendered on the client-side.

We came up with DataWorker and open-sourced it. It let us stream data in using web workers so that the main thread doesn't get blocked when large amounts of data are coming in. We could then also sort the data in that separate thread and only request the small chunks we wanted to render a bit at a time. It allows you to stream through WebSockets or Ajax, and we kept the documentation up to date.

I recently updated the documentation's UI from Bootstrap 2 to Material Design.

I worked on this project at Rentrak for over four years. When we updated the site, I converted our customized CSS to Less by integrating it closely with Bootstrap for a consistent look. I also handled large amounts of data, created quick, responsive tables, and found ways to visually represent the data using graphs and charts. The site requires a membership, but you can get a feel for the responsive design just from the login page without needing an account.

As the final project for an online course on Angular, I created a mock storefront with RxJS, Redux, Firebase (for data management), and Angular Material (as a UI framework). Changes to products, orders, and users are all updated in real-time.

Logins are managed through Firebase using Google accounts for authentication. The store has the concept of three distinct roles for accounts, with varying permissions: users, managers, and admins.

Users can view products and add them to their shopping cart. The shopping cart allows users to edit the items and quantities of their order before checking out. Stripe's test mode is used during checkout to mock payments. Users can view their past orders and their status, and can also edit their profile picture, name, billing, and shipping addresses. All accounts are considered to be a user.

Managers have the ability to add new products and edit existing products, as well as view orders and update their status.

Admins can also add or edit products, as well as delete existing products. They may also view or delete existing orders. Admins also have the ability to view and edit other users.

For the final project of a course on React, I created a fake auto repair shop. This was bootstrapped with a Create React app, Material UI as a design framework, and Firebase for data storage.

In the repair shop, users can view repairs assigned to them and can comment on repairs. They also have the ability to mark a repair as completed which then needs to be approved by a manager. By default, all repairs are shown on screen, but there is a set of filters to find repairs by a date range, a time range, and whether the repair is completed or not. All filters are optional.

Only a manager may create, edit, or delete repairs, and assign them to other users or mark them as approved. They may also add and delete users, or add or revoke manager permissions for another user. Managers also have a special filter to view repairs assigned to a specific user.

All of the data is updated in real time. For example, if a manager is viewing completed tickets, then a user marks one of their tickets as complete and that ticket will immediately show up on the manager's screen.