---
title: Business Center CRM Template
summary: A customizable CRM template for bootstrapping client projects quickly
type: website
hero: /images/projects/business-center/home-page.gif
active: true
stack: [Node, Express, MSSQL, Bootstrap, jQuery]
links: [
    {
        src: 'https://www.ibidata.net/greatfoods',
        title: "Although this is just a demo site, it is mostly behind a login wall and I can't let you in. Sorry!",
        icon: ['fas', 'globe']
    }
]
---

<Image
    alt="Home page"
    src="/images/projects/business-center/home-page.gif"
    full="/images/projects/business-center/home-page.full.gif"
    height={338}
    width={600}
/>

## Problem

One of our company's biggest web products is a custom ordering site with an included CRM. These are usually very laborious to set up due to the custom requirements set by each client.

## Solution

I created a customizable template for bootstrapping these projects that uses a configuration table in the database to toggle features on or off. This gives us the ability to initialize a new project in an afternoon rather than 2-3 weeks. It's not perfect, but is actively developed and improved every day.

## Features

I built a custom, dynamic, MSSQL-based faceted filter system for the items. It uses an [EAV](https://en.wikipedia.org/wiki/Entity%E2%80%93attribute%E2%80%93value_model)-type system, which some consider to be an anti-pattern, but our clients generally don't have a high quantity of items. The performance really doesn't begin to suffer until there are tens of thousands of items in the database.

<Image
    alt="Items page"
    src="/images/projects/business-center/items-page.gif"
    full="/images/projects/business-center/items-page.full.gif"
    caption="I built a custom, dynamic, MSSQL-based faceted filter system for the items. It uses an EAV-type system, which some consider to be an anti-pattern, but our clients generally don't have a high quantity of items. The performance really doesn't begin to suffer until there are tens of thousands of items in the database."
    height={338}
    width={600}
/>

The item details page has many features - a slideshow will appear when multiple images or videos are added, attached documents and external links, child items or item variants will show when present, etc.

<Image
    alt="Item details page"
    src="/images/projects/business-center/item-details-page.gif"
    full="/images/projects/business-center/item-details-page.full.gif"
    caption="The item details page has many features - a slideshow will appear when multiple images or videos are added, attached documents and external links, child items or item variants will show when present, etc."
    height={338}
    width={600}
/>

Different payment and shipping options can be configured easily in the database. There is also an option to customize shipping rates based on items, quantities, shipping locations, etc. Sales tax is handled by Taxjar.

<Image
    alt="Checkout page"
    src="/images/projects/business-center/checkout.gif"
    full="/images/projects/business-center/checkout.full.gif"
    caption="Different payment and shipping options can be configured easily in the database. There is also an option to customize shipping rates based on items, quantities, shipping locations, etc. Sales tax is handled by Taxjar."
    height={338}
    width={600}
/>

The back-end of the CRM, or *Business Center*, as we call it, has a lot going on: user/item/filter setup, customer search and management, lead entry/follow-up, Tableau report access, among many other features.

<Image
    alt="Business Center"
    src="/images/projects/business-center/business-center.gif"
    full="/images/projects/business-center/business-center.full.gif"
    caption="The back-end of the CRM, or *Business Center*, as we call it, has a lot going on: user/item/filter setup, customer search and management, lead entry/follow-up, Tableau report access, among many other features."
    height={338}
    width={600}
/>

I built a user impersonation system that allows administrative users to log in as other users. This is helpful for debugging issues and placing orders for customers.

<Image
    alt="Impersonation"
    src="/images/projects/business-center/impersonation.gif"
    full="/images/projects/business-center/impersonation.full.gif"
    caption="I built a user impersonation system that allows administrative users to log in as other users. This is helpful for debugging issues and placing orders for customers."
    height={338}
    width={600}
/>

I added a convenience page for configuring each site. The highlight here is the build-a-bear style rights system. The template has many pre-configured *abilities* that can be grouped together into *rights* and then assigned to users. This solves a big problem we had with each site having such unique user right requirements.

<Image
    alt="Config page"
    src="/images/projects/business-center/config.png"
    caption="I added a convenience page for configuring each site. The highlight here is the build-a-bear style rights system. The template has many pre-configured *abilities* that can be grouped together into *rights* and then assigned to users. This solves a big problem we had with each site having such unique user right requirements."
    height={890}
    width={1223}
/>

## Stack

- Node
- MSSQL
- Express
- Handlebars
- jQuery
- SCSS

## Links
- [Website Link](https://www.ibidata.net/greatfoods) - Although this is just a demo site, it is mostly behind a login wall and I can't let you in. Sorry!


---
title: IBI Analytics
summary: An analytical dashboard for viewing Google Analytics and Mailchimp email campaign data
type: website
hero: /images/projects/ibi-analytics/web-dashboard.png
active: true
stack: [Node, Express, MSSQL, Bootstrap, jQuery, Socket.io]
links: [
    {
        src: 'https://analytics.ibidata.com',
        title: 'Unfortunately, this site is behind a login wall and I cannot let you in. Sorry!',
        icon: ['fas', 'globe']
    }
]
---

An analytical dashboard for viewing Google Analytics and Mailchimp email campaign data.

<Image
    alt="Web analytics dashboard"
    src="/images/projects/ibi-analytics/web-dashboard.png"
    caption="The web dashboard pulls in data from Google Analytics via a back-end service account that talks to the GA API"
    height={925}
    width={1923}
/>

## Problem

Our company needed a web interface for displaying client website analytics and email campaign results.

## Solution

I built this site that displays that information and creates custom reports. This gives us the opportunity to display customized, company-branded reports that suit their needs.

## Notes

The email campaign dashboard pulls in Mailchimp data from our database to display some custom metrics. I wrote an hourly, incremental import script that pulls from the Mailchimp API into our SQL database. This allows us to merge together the email metrics with customer information that we already have, making for some very interesting data.

<Image
    alt="Email campaign dashboard"
    src="/images/projects/ibi-analytics/email-dashboard.png"
    caption="The email campaign dashboard pulls in Mailchimp data from our database to display some custom metrics. I wrote an hourly, incremental import script that pulls from the Mailchimp API into our SQL database. This allows us to merge together the email metrics with customer information that we already have, making for some very interesting data."
    height={921}
    width={1905}
/>

## Stack

- Node
- Express
- MSSQL
- Bootstrap
- jQuery
- Socket.io

## Links

- [Website Link](https://analytics.ibidata.com) - Unfortunately, this site is behind a login wall and I can't let you in. Sorry!


---
title: Name Explorer
summary: A web tool to analyze historical first name statistics in the US
type: website
hero: /images/projects/name-explorer/home.gif
active: true
stack: [Next.js, MariaDB, Bootstrap]
links: [
    {
        src: 'https://name-explorer.jjwilly.com',
        title: 'Website link',
        icon: ['fas', 'globe']
    },
    {
        src: 'https://github.com/jjwilly16/name-explorer',
        title: 'Github Repository',
        icon: ['fab', 'github']
    }
]
---

A web tool to analyze historical first name statistics in the US

<Image
    alt="Name Explorer"
    src="/images/projects/name-explorer/home.gif"
    full="/images/projects/name-explorer/home.full.gif"
    caption="A web tool to analyze historical first name statistics in the US"
    height={450}
    width={800}
/>

## Problem

Coming up for a name for your child can be difficult. I tried some existing tools out there to get ideas but I ultimately wanted to see the statistics behind each name

## Solution

I downloaded a raw copy of the US Census Bureau's name statistics and wrote a [script to import it into a MariaDB database](https://github.com/jjwilly16/name-explorer/blob/main/scripts/loadNames.js). I then decided to play around with next.js to build a little page where I can inspect the results. I'm not sure how useful this is to anyone but me, but I had a blast building it!

## Notes

- This was my first project using [Next.js](https://nextjs.org) and it was a great experience.
- This was also my first time using any type of ORM, which was [Sequelize](https://sequelize.org). I still have mixed feelings about these, as I prefer to work directly with the database...but it was pretty cool to model my tables in my project and sync directly to the database.

## Stack

- Next.js
- MariaDB
- Sequelize

## Links

- [Website Link](https://name-explorer.jjwilly.com)
- [Github Repository](https://github.com/jjwilly16/name-explorer)


---
title: node-pdftk
summary: A Node.js wrapper for PDF Toolkit
type: tool
hero: /images/projects/node-pdftk/npm.png
active: true
stack: [Node]
links: [
    {
        src: 'https://npmjs.com/package/node-pdftk',
        title: 'NPM Package',
        icon: ['fab', 'npm']
    },
    {
        src: 'https://github.com/jjwilly16/node-pdftk',
        title: 'Github Repository',
        icon: ['fab', 'github']
    }
]
---

A Node.js wrapper for [PDF Toolkit](https://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/)

<Image
    alt="node-pdftk on npm"
    src="/images/projects/node-pdftk/npm.png"
    caption="A Node.js wrapper for PDF Toolkit"
    height={665}
    width={1186}
/>

## Problem

Our team does a lot of work with PDFs, including filling and stamping, and there were no decent options for interfacing with our tool of choice: [PDF Toolkit](https://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/).

## Solution

I created a wrapper for the tool using Node.js. I started with the intention of only writing the methods that we needed, which were only a few, but before I knew it I had written them all. We enjoyed using it and decided to publish to [npm](https://www.npmjs.com/package/node-pdftk).

## Stack

- Node

## Links

- [NPM Package](https://npmjs.com/package/node-pdftk)
- [Github Repository](https://github.com/jjwilly16/node-pdftk)

