Web Development Services

This fully responsive GatsbyJS-powered eCommerce site was built to replace an outdated/non-responsive WordPress + WooCommerce site, bringing it into 2020 with style.

Features Include:

• Blazing-fast Gatsby front end, with Prismic.io used to handle most of the content. (Everything but the class schedules.)
• Client-side user and admin dashboards, protected with a custom PassportJS authentication system.
• Admin dashboard features a full interface for maintaining schedules, orders, and users.
• Custom Express REST API, using a PostgreSQL database backend with Knex.

This tool features the ability to compare various COVID-19 virus statistics of up to 4 countries or states. It is an advanced version of what I recently built for WorldPopulationReview.com, and it was recently featured on Doctor Steve's (from SiriusXM) COVID-19 Situation Report podcast/show.

The tool currently sources world data from Johns Hopkins University, and US data from both Johns Hopkins and The Covid Project.

Current statistics available:

• Total Cases
• Total Deaths
• New Cases Per Day
• New Deaths Per Day
• Total Cases per 100k Population
• Total Deaths per 100k Population
• Simple Moving Averages (variable day selection from 3 to 20)
• Bollinger Bands
• Various hospitalization and testing stats on the 'US Testing Data' page.

This project is very much a work in progress/incomplete, and will likely improve in appearance and functionality as time permits.

This Next.js-based (now Gatsby-based, see below) website was created for a home warranty service company in Pennsylvania. The project was turned over to me at/near the halfway point, after the design phase was completed and the development phase was around 25% done. (I was basically brought on as a "fixer", in a dev sense! 🔧)

The e-commerce and dashboard portions of this project features forms built using Formik, as well as a custom payment solution that I meticulously coded around Elavon's sub-par merchant services. (By the way, I cannot currently recommend Elavon for anything... my developer experience with them was about a 1/10! I was locked into using them due to choices made prior to my involvement in the project, or I'd have chosen another service provider.)

The warranty purchase process features a complex, real-time contract PDF generator that I built around Handlebars, Node, and PhantomJS. At some point, I may share an example of doing this in a future blog post.

On the backend, this project features extensive use of Node/Express with a PostgreSQL backend. I used Knex + Bookshelf as an ORM, and I think they totally rocked for this purpose!

Other features of note:

• A custom "realtors portal" for real estate agent affiliates to use when ordering plans with their customers. It featuring custom branding and layouts on a per-realtor basis.
• Custom referral tracking/discount code handlers
• Prismic.io-based CMS

Note:

While I do like Next.js, and I really like where they're going... it's currently not my favorite for sites like this, and it's not what I would have chosen had I been involved from the project inception. I am likely going to port this site over to Gatsby in my own time... I've just had to do too many "hacky" work-arounds with the existing codebase I was given, and I feel that I could create a much faster/better performing site by re-doing things the Gatsby way.

Update, 2020/08/20: I converted this site over to Gatsby, and also incorporated a full PostgreSQL-powered backend. It's definitely "snappier", and it's much easier for me to work with. I still think Next.js is incredible, but Gatsby has my 💜.

Update 2022/06/01: This site is no longer in operation, sorry!

This huge website, ranked in the top 10K most-visited sites in the world, is an ongoing project that I've been a major part of since Sept 2018.

So far, I've done hundreds of hours (and over 1M lines of code) of both frontend (Next.js, d3.js) and backend (Node.js) work, including:

• Creation of many of the d3 geomaps throughout the site, including the one pictured in the thumbnail.
• To save bandwidth, I have now custom-coded every single chart on this site using vanilla d3 and React only. (No libraries used!) The previous iteration of charts were also done by me using recharts, but the 140Kb overhead adds up on a site with this sort of traffic!
• Numerous improvements to the UI/UX, from the mobile-friendly navbar to the creation of many re-usable UI components used throughout.
• Tons of hours of aggregating raw population data into thousands of JSON files used throughout the site. This was mostly done using custom scripts I wrote in Node.js, but some data had to be compiled manually.
• Construction of a custom Node.js CLI app for the site owner. This app helps them track the status of pages on the site, and even asynchronously fetches data in batches from the Google Analytics API for several thousand pages, and for multiple date ranges... before exporting it all to a combined CSV file that he imports into Airtable. (It's actually a super neat tool, and I wish I could show it off!) 🤓

I also created two interactive geography quiz games, which I'm quite proud of. Those are found here:

• http://worldpopulationreview.com/states/states-and-capitals-quiz/
• http://worldpopulationreview.com/states/state-quiz/

I could honestly go on and on about this site! It is without question the largest scale project I've ever worked on, and it has been a fantastic experience for me so far. Huge props to the site owner, Shane, for being a great person to work for and for continuously challenging me with interesting stuff. 🏆

I was contracted to create a React-based drag-n-drop "lesson builder" tool as part of a math learning hub for teachers and tutors. (I'm not sure if I'm allowed to mention the company or not, so it will remain unnamed for now.) This tool enables non-technical users to rapidly build and export customized tutorials/lessons, which can then be used as supplementary lesson materials.

Features:

• Allows non-technical users to build custom math lessons, with zero knowledge of HTML or React needed.
• Supports text formatted in Markdown, HTML, and even KaTeX math rendering
• Through the use of MDX (and a CI pipeline), these lessons can be exported and added to a user's account on the hub website... and viewed live in the classroom just moments later.

Notes: I typically build things that help businesses increase profits and/or sales, but I'm always MUCH more happy to work on projects that go beyond that scope. This was one of those projects! I truly feel that this tool could help teachers reach kids who are struggling with basic math concepts... and that makes my heart smile! Helping to change the lives of kids just feels WAY more satisfying and meaningful than just helping a business increase profits. ❤️🤓❤️

Please keep in mind that the actual version is a bit more polished and functional! This demo link is an older stripped-down 'whitelisted' page I made for public display. Once the live version is up, I will add the link if I'm given permission.

As much as I would love to, I cannot provide a link to the source code. Perhaps I will be given permission to open source it at a later date though!

This project was a major rework/update to the aging website of Leta Austin Foster & Associates, Inc. - a well-known interior design firm with locations in Manhattan and Palm Beach, FL. (I also built their previous site!) Most of the look and feel remain the same, but I performed a complete overhaul to the underlying tech, including:

• Moved away from my own (outdated) custom PHP & MySQL CMS, and switched to Prismic.io as a headless CMS service.
• Moved away from PHP entirely, and switched to a full JavaScript stack.
• Removed my custom MooTools interactivity/animations, and implemented custom React-based solutions with CSS transitions. (Will likely add more soon.)
• I couldn't find a pre-existing "thumbnail gallery" component in React that I liked, so I made my own... which was both painful AND fun! (I should probably look into how to offer it as a package. I have a gatsby-image version and a vanilla React/images version made.)
• Rewrote all front end code to use current HTML5/CSS3 tech (flexbox, grid) and created fully responsive, user-friendly layouts for all screen sizes.
• Implemented GatsbyJS with all of the above, and turned the website into a ridiculously fast browsing experience!

Yep, that's this site! I've had some extra time while waiting for the new LetaAustinFoster.com site to go live, so I decided to make my own site in the same manner: with GatsbyJS, Prismic.io as a headless CMS, and Netlify as the host. The amazing speed and efficiency of this trio is truly light years beyond any of my old WordPress and CakePHP stuff... and I'll definitely be using it as often as possible!

I started with the default/vanilla GatsbyJS starter, and loosely based the layout on the design of the "Strata" template from HTML5Up, but with a tongue-in-cheek "cheesy dating website" theme. While I am happy with the quick design I put together, I definitely plan to come back soon and polish/rework things a bit. (I just really wanted to get a new portfolio site up using GatsbyJS.)

Interesting tidbits:

• No CSS framework was used. I really wanted to keep this website SUPER lean and efficient... and I am quite comfortable writing my own styles.
• There's also a blog hiding behind the scenes, but I'm not quite ready to go public with that just yet.
• For now, the animations have been done with custom CSS transitions and a few stateful components. I plan to step that up another notch soon, too!

A custom WordPress website design and development project for a comedy event promotion company here in the Tri-Cities. Their mission is to bring quality stand-up comedy shows to the area, from big-name national acts to local favorites. This site serves as their main information hub, with their Facebook page serving as a secondary/social media outlet.

I designed and then built this site using using Roots.io Sage as the theme backbone, and used a SASS fork of Bootstrap as the SCSS foundation.