[{"_1":2,"_194":-5,"_195":-5},"loaderData",{"_3":4,"_20":21},"root",{"_5":6,"_7":8},"canonical","https://mattscholta.com/portfolio","env",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":10,"_18":19},"APP_ENV","production","APP_NAME","mattscholta","APP_URL","https://mattscholta.com","APP_VERSION","vercel","NODE_ENV","ROLLBAR_TOKEN","4de8a8b8162d4b238c49e2dae12e36c0","routes/portfolio",{"_22":23},"items",[24,51,64,76,89,102,115,128,141,154,168,181],{"_25":26,"_27":28,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_42":43,"_44":45,"_46":47,"_48":-5,"_49":50},"company","Shiftsmart","content",{"_29":30},"html","

Paying down the sins of our past, we've pushed hard to modernize our stack and development workflow. We've not only introduced TypeScript but have fully adopted it across the organization. From monolith to microservices, we're on a journey to deliver the best possible experience for our partners and customers alike.

Prototype and delivery Remix + TailwindCSS applications
Architected NX Monorepo for shared code and tooling
- 11+ NestJS applications
- 5+ Remix applications
- 20+ packages
Re-architected our NodeJS monolith to a microservice architecture built on NestJS
Introduced GraphQL API's and strongly typed services across the organization
Adoption of BullMQ to replace AgendaJS for job scheduling

","current",true,"date","2025-06-22","description","Connecting companies with skilled workers to increase fulfillment, reduce turnover, and improve quality.","id","cldiimid9adlt0blhny2g24wq","images",[41],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/XgppqslPQZSRm3QUb0oH","intro","","overview","Modernized our stack with TypeScript, Remix, TailwindCSS, and NestJS. Transitioned from monolith to microservices, delivering 14+ NestJS API's and 9+ React Router apps, 35+ packages, and GraphQL APIs. Replaced AgendaJS with BullMQ for job scheduling.","slug","shiftsmart","thumbnailTemp","title","Powering the Modern Workforce",{"_25":52,"_27":53,"_31":32,"_33":55,"_35":56,"_37":57,"_39":58,"_42":-5,"_44":56,"_46":60,"_48":-5,"_49":61,"_62":63},"Personal",{"_29":54},"

RocketCMS is a modern content management system where the models are determined by the UI components rendered. Think of it as Server Driven UI. It provides a robust API and admin interface for managing content through Supabase.

Features:

- 🚀 Fast development with React Router + Vite
- 🔐 Secure authentication via Supabase
- 🗄️ PostgreSQL database
- 📦 S3-compatible storage
- 🎨 Customizable admin interface

Tech Stack:

- Backend: Express.js, Node.js
- Database: PostgreSQL (via Supabase)
- Storage: S3-compatible storage
- API: Rest and GraphQL (via Supabase)
- Build Tools: Vite, Docker
- Authentication: JWT

","2025-06-21","RocketCMS lets anyone manage your website using the components you've designed.","cl3mis0mq2kqp0cn1p8z05idf",[59],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/2SdD6bFvQySqUzYTZD5x","rocketcms","RocketCMS","url","https://rocketcms.org",{"_25":52,"_27":65,"_31":32,"_33":55,"_35":67,"_37":68,"_39":69,"_42":43,"_44":71,"_46":72,"_48":73,"_49":74,"_62":75},{"_29":66},"

Living in San Francisco for 20+ years I've had my fair share of long nights out. As tiny as 7x7 square miles may sound, there are well over 700 locations you can go to enjoy a pint or other "adult beverage". As you might imagine this can leave you a bit overwhelmed when it comes to deciding where to go.

Say hello to BarGuide.io. We've focused on the details and you can decide the rest on your own. Search using an incredibly robust feature set that includes all the nuanced details. Good for families, outdoor area, pool table(s), near the water... We've done the work so you can filter through the noise and enjoy your beverage, your way.

Slowly being (re)deveoped 🍺

","BarGuide.io: Your go-to guide for over 700 bars in San Francisco. Find the perfect spot with our robust search features, from family-friendly to outdoor areas. Let us help you enjoy your drink, your way.","ckwbh72kgtnvz0a700g6esb57",[70],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/cmc8tgtovwx8807n24bxekf39","BarGuide.io: Your go-to guide for over 700 bars in San Francisco. Find the perfect spot with our robust search features, from family-friendly to outdoor areas. Let us help you enjoy your drink, your way. 🍺","barguide","https://res.cloudinary.com/mattscholta/image/upload/v1614502421/mattscholta/thumbnails/webp/barguide.webp","BarGuide.io","https://barguide.io",{"_25":77,"_27":78,"_31":80,"_33":81,"_35":82,"_37":83,"_39":84,"_42":-5,"_44":86,"_46":87,"_48":-5,"_49":88},"Haldi",{"_29":79},"

Well, there is only so much I can say as we're a startup and we've gotta keep our magic brewing 🧙‍♀️. We've got a lot planned for our users in 2022 and as we knock features out I'll be sure to let you know.

Survey Framework: A high-level abstraction to enable fast iteration (in progress)
Micro Service Containerization: 0% - 80% Containerized stack and development workflow
Delivered a full rebuild & rebrand of the Python + Django website to NextJS
CSS Style Guide, GraphQL, Codegens, TypeScript, Lerna Monorepo, and more...

",false,"2022-05-26","Haldi Skincare: A modern skincare platform with survey framework, microservice containerization, and full rebuild from Python/Django to NextJS.","cl3o14k38020g0bmy1q4v8jv1",[85],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/ypdHnSBOS9GHGgKTHUfF","We've got a lot planned for our users in 2022 and be writing about the larger efforts here.","haldi-skincare","Haldi Skincare",{"_25":90,"_27":91,"_31":80,"_33":93,"_35":94,"_37":95,"_39":96,"_42":43,"_44":98,"_46":99,"_48":100,"_49":101},"thredUP",{"_29":92},"

In my final performance at thredUP all the previous works came together to create a visually-driven CMS authoring system. The monorepo abstraction allows us to iterate on components quickly. The PWA consumes these components to create a consistent user interface which is based on the Style Guide abstraction.

We can now use these small UI Packages as building blocks to create more complex pages and layouts. This is done via a highly visual and interactive UI with live updates, drag and drop, and custom input widgets.

Technical Overview

Obviously, there is a LOT more to the actual implementation but conceptually it's really simple. We read the TypeScript interface of the component we'd like to make available within the CMS. From this, we generate a JSON Schema which we can use to generate a form and validate the form data. Using comments we're also able to annotate default values and additional validation rules, it's really slick!

For more details take a look at the excellent writeup done by my former colleague Pierre on Medium.

","2021-04-01","A visually-driven CMS authoring system built with React, GraphQL, and a monorepo of NPM packages. Enables content editors to create complex pages using drag-and-drop components.","ckwa7yk0wwhy10a1706l88scb",[97],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/1BzCqLvFR3G5kjXxpfce","React, GraphQL and a Monorepo of NPM packages working across multiple applications and microservices.","content-management-system","https://res.cloudinary.com/mattscholta/image/upload/v1614502421/mattscholta/thumbnails/webp/thredup-cms.webp","Content Management System",{"_25":90,"_27":103,"_31":80,"_33":105,"_35":106,"_37":107,"_39":108,"_42":110,"_44":111,"_46":112,"_48":113,"_49":114},{"_29":104},"

As a team of 3 Engineers we rebuilt the core web experience. Starting with a Mobile Web Progressive Web Application (PWA). Focused on the core user experience and purchase funnel from sign-up to checkout. A process that took 6 months and made fundamental changes to how we write front-end code at thredUP. Making use of Apollo Client, GraphQL, Express and React on the front end, in addition to fully adopting TypeScript!

User Experience

Providing the user with a faster and more consistent application, optimized based on user agent. This allows us to build and serve a optimized bundles and a more appropriate UI while maintaining a single code base.

70% performance increase
Dedicated mobile & desktop builds
Improved SEO & accessibility
Visual consistency, UI/UX
Localization support

Developer Experience

Hot Module Reloading
Ever Green Dependencies
NPM Monorepo
Unit & E2E Test Suites
90% Test Coverage out of the gate

As the tools we use update and change, we need to be willing and ready to consume those changes. Allowing our packages to become "stale" often has a significant cost associated with it.

","2020-06-01","A Progressive Web Application built for performance, reliability, and enhanced developer productivity. Achieved 70% performance increase with dedicated mobile and desktop builds.","ckwa82ucgwd350c78k8jol8t4",[109],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/3L3nKfpQt2ZEG0jc2nTw","Evergreen Progressive Web Application \"PWA\"","A Progressive Web Application built performance, reliability, enhanced developer productivity, and long term maintainability.","progressive-web-app","https://res.cloudinary.com/mattscholta/image/upload/v1614502421/mattscholta/thumbnails/webp/thredup-pwa.webp","Progressive Web Application",{"_25":52,"_27":116,"_31":80,"_33":118,"_35":119,"_37":120,"_39":121,"_42":123,"_44":124,"_46":125,"_48":126,"_49":127},{"_29":117},"

Monorepos are an increasingly common pattern for organizations that create and manage a large number of NPM packages. They allow for a high-level of code reuse, consolidated linting, testing, and versioning. The only real downside is investment the time to create and keep it running. It is a rather complex challenge to solve. Using, TypeScript, and Rollup I am able to create, modify, and publish versioned packages using a Jenkins pipeline.

","2019-06-01","Implementation of LernaJS monorepo for managing JavaScript projects with multiple packages. Built with TypeScript and Rollup for versioned package publishing via Jenkins pipeline.","ckwbh5ri06g7q0c78jucth1a0",[122],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/pvBeYAKcQkAxhqx5dIgQ","Monorepo: Built with Lerna, TypeScript, and Rollup","Implementation of LernaJS, \"A tool for managing JavaScript projects with multiple packages\".","monorepo","https://res.cloudinary.com/mattscholta/image/upload/v1614502421/mattscholta/thumbnails/webp/monorepo.webp","Monorepo",{"_25":90,"_27":129,"_31":80,"_33":131,"_35":132,"_37":133,"_39":134,"_42":136,"_44":137,"_46":138,"_48":139,"_49":140},{"_29":130},"

As an application matures the codebase grows... grows... and grows. As a result, the pieces become more tightly coupled and increasingly complex to work on and tune. Our CSS had fallen victim to this before I had joined the company and this was one immediate area I'd identified to tackle.

Research

The first thing I did was some research and aggregate some basic information. We were loading around 100kb of CSS, 2 libraries, and variables were fragmented at best. Additionally, the selector's developers we were writing required specificity that we didn't want.

With these pain points in mind, I then set off exploring the bleeding edge. You see, paying debt down is one thing but having a path with the next 3 years in mind will continue to pay off. It's here that I found PostCSS and CSSNext which laid a strong foundation to build on, over time.

With these tools in place, the last piece of the puzzle was getting around the specificity requirements. CSS modules solve exactly this, at that point, it simply became a process of integration, although in 2017 supporting server-side-rendering is easier said than done.

Planning

Now, this is all great, but in the world of front-end development it's often too easy to update things that we might not need to, or simply should not. With this in mind, I collaborated with our lead designer to begin formalizing a style guide. Together we created the 1.0 Style Guide which was abstracted to an NPM package for use across multiple consumer applications.

In addition to formalizing this style guide, I wanted to ensure we learned from our mistakes and put in place automated safeguards. This resulted in adding in StyleLint and tightening things down by limiting the selector specificity, applying auto-prefixer, and enforcing consistency.

Result

A branded, scalable, and customizable base CSS package coming in at around 7kb. This package has since been adapted over the last 3 years and one full re-brand. Unfortunately, this package is not public, however much of the implementation was inspired by my own abstraction @visormatt/style-guide.

","2018-06-01","A code-level abstraction to the Style Guide that enforces consistent UI/UX and reduces code, improving performance. Reduced CSS from 100kb to 7kb with StyleLint and CSS modules.","ckwbh4jio6o520a179lxe6fua",[135],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/NJAKqBCQxqw011sZvQcY","CSS Style Guide overhaul and abstraction","A code level abstraction to the Style Guide that enforces a more consistent UI/UX, and reduces code thus improving performance.","css-style-guide","https://res.cloudinary.com/mattscholta/image/upload/v1614502421/mattscholta/thumbnails/webp/thredup-style-guide.webp","CSS Style Guide",{"_25":52,"_27":142,"_31":80,"_33":144,"_35":145,"_37":146,"_39":147,"_42":149,"_44":150,"_46":151,"_48":152,"_49":153},{"_29":143},"

A NodeJS CLI package built on EJS templating that allows individuals or organizations to quickly generate consistent boiler-plate code. Shipping with reasonable default templates that are easily customized and updatable. Or roll your own templates from scratch, commit them with your source code and iterate.

1.0 - Yeoman Generator

The first iteration of this package made use of Yeoman for these templates, a powerful code scaffolding tool. Overall I was happy with the limited effort required to get something up and running. I'd recommend you check out the documentation on creating a generator.

generator-react-up

2.0 - Built for purpose

Sometimes you just feel like tackling a problem your own way. I wanted to update the package, add tests and adopt TypeScript and the updating Yeoman generator would have been slower so I created this tool to solve a problem.

@visormatt/generator

","2017-02-01","A Command Line code generator wrapped in an NPM package. Generate consistent and customizable boilerplate code/templates for teams and projects using EJS templating.","ckwbh7yz46s1b0d69mgzn4zeb",[148],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/TX4WY5pCRBywT5deMrSZ","A customizable CLI tool for code scaffolding","A Command Line code generator, wrapped up in a NPM package. Generate consistent and customizable boilerplate code/templates for teams & projects.","npm-generator","https://res.cloudinary.com/mattscholta/image/upload/v1614502421/mattscholta/thumbnails/webp/generator.webp","NPM Generator",{"_25":155,"_27":156,"_31":80,"_33":158,"_35":159,"_37":160,"_39":161,"_42":163,"_44":164,"_46":165,"_48":166,"_49":167},"Beyond",{"_29":157},"

Google has a wide range of devices that are sold at a number of partner locations. Best-Buy, Target, really the list goes on and on. When compared to Apple stores which have highly knowledgeable and trained employees, these other retailers don't have that same process so the knowledge varies greatly between sales-person.

Using an online portal, these retail associates could learn the details of the Google products and the larger ecosystem. Through gamification of the material and a points & reward system we were able to incentivize continued growth and knowledge, making it easier to finalize the sale of these products.

","2015-04-01","Online training platform for retail employees to learn about Google products and the broader Google ecosystem. Features gamification and a points & reward system.","ckwbh96yg6sct0d69p7wwlqnm",[162],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/bkFBpM2cQIiNH6Q2iTdj","Learn the latest and greatest about Google Hardware.","Online training platform for \"big box\" retail employees to learn about Google products and the broader Google ecosystem.","google-train-up","https://res.cloudinary.com/mattscholta/image/upload/v1614502421/mattscholta/thumbnails/webp/google-trainup.webp","Google Train UP",{"_25":155,"_27":169,"_31":80,"_33":171,"_35":172,"_37":173,"_39":174,"_42":176,"_44":177,"_46":178,"_48":179,"_49":180},{"_29":170},"

Be preparred in the event of an emergency, have plans set in place for various disaster scenarios. Leveraging Facebooks Graph API to set emergency contacts, meeting points, and notifiactions to keep loved ones informed when it counts.

","2014-04-01","The Disaster Relief prototype we designed and developed became Facebook Crisis Response & Safety Check. Leverages Facebook's Graph API for emergency contacts and notifications.","cl3o200we0l7t0bn2k78yn41m",[175],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/yB0fZYspRgC9EYKCFr9s","People across the world use Facebook to connect and support each other in a crisis.","The Disaster Relief prototype we designed and developed became Facebook Crisis Response & Safety Check.","facebook-disaster-relief","https://assets.website-files.com/5a3030d25ab0fd0001b784a7/5a40a2357b791a000197fa7a_facebook-disaster-relief-5.gif","Facebook Disaster Relief",{"_25":155,"_27":182,"_31":80,"_33":184,"_35":185,"_37":186,"_39":187,"_42":189,"_44":190,"_46":191,"_48":192,"_49":193},{"_29":183},"

Sadly, this project is no longer available on the Web but it was a fun and very challenging project to build. The application made use of animated graphs to visualize a large number of reports generated by Google. The difficult part was the browser support across a large device matrix of varying quality devices.

Backed by a custom Django CMS it enabled Google to add new reports and data as necessary. These reports where then visualized using a variety of available graph types. The end user was able to create their own unique reports with select data points and share with others.

","2013-06-01","An online and mobile tool for visualizing Google research data and creating custom data sets for sharing across social networks. Features animated graphs and custom Django CMS backend.","ckwbh8jt46s6e0d695m9lvith",[188],"https://us-west-2.graphassets.com/A8O4hAsR7QOmAlk6hfcLhz/moaYOC4aRDCSiY6kNyDv","Google Databoard helps you explore Google research studies","An online and mobile tool for visualizing data and creating custom data sets for sharing across social networks.","google-databoard","https://res.cloudinary.com/mattscholta/image/upload/v1614502421/mattscholta/thumbnails/webp/google-databoard.webp","Google Databoard","actionData","errors"]

What I'm building

Powering the Modern Workforce

RocketCMS

BarGuide.io

What I've built

Haldi Skincare

Content Management System

Progressive Web Application

Monorepo

CSS Style Guide

NPM Generator

Google Train UP

Facebook Disaster Relief

Google Databoard