Essential Workers

An interactive map and data tables displaying 2018 demographic data including metrics like median income, GDP, and unemployment rates across Saint Louis, Missouri, and Illinois.

View the application

Table of contents

View the original codebase

• Overview
• Technologies used
• Screenshots
  • Desktop
  • Mobile

Overview

An analysis for essential workers in Saint Louis, Missouri, and Illinois. Results are then displayed on an interactive map (via Mapbox) and various data tables.

This repository is a detached fork, update, and redesign to Saint Louis Regional Data Alliance's essential-workers, which is a webpage illustrating demographic profiles (2018) of essential workers across Saint Louis, Missouri, and Illinois.

I was one of a few developers on the original project back in 2020. It was my first attempt at a professional webpage (React based or otherwise) and responsive design. The intention of this fork was to update the original in the following ways:

• Updated layout (for simplicity, consistency between mobile and desktop, and overall UX)
• Updated typography (improved consistency, contrast, and overall UX)
• Fixed typos
• Streamlined map controls for changing geography and measure (for improved consistency between mobile and desktop)
• Added toggle button for map legend. It defaults the legend to closed state (improves readability for medium to small screens)
• Formatted display of certain numbers (percentages, currencies, large numbers)
• Corrected bugs with data and data tables that resulted in inaccurate values in columns and rows
• Correct bug with MapBox implementation that resulted in needless re-renders
• Streamlined styling logic resulting in less code, improved responsiveness, and better performance
• Updated React from ^16.13.1 to ^18.3.1
• Updated mapbox-gl from ^1.12.0 to ^3.7.0
• Migrated from CRA to Vite for faster build times
• Removed deprecated mdbreact and react-data-table-component libraries and replaced with default HTML table elements
• Table row headers are now suffixed with geography abbreviation (e.g. STL, IL, MO) to aid in distinguishing tables through scrolling
• Removed react-map-gl dependency
• Removed deprecated Material UI components in favor of MUI components
• Removed any layout based uses of Material UI in favor of custom CSS
• Now uses TypeScript
• Refactors to every file for improved DX
• Replaced hero image
• General redesign relating to colors, wording, and removal of branding
• Added favicon
• Implemented prettier auto formatting

Technologies used

• TypeScript
• JavaScript
• React
• HTML
• CSS
• Material UI (MUI)
• MapBox
• Docker
• Vite

Screenshots

Desktop

Default view (hero image)

Default map view (Saint Louis - GDP)

Default map view county tooltip

Measure dropdown

Map view (Measure - Labor Force)

Map view (Measure - Unemployment Rate)

Map view (Measure - Media Income Essential Workers)

Map view (Measure - Frontline Industry Rate)

Geography dropdown

Map view (Missouri - GDP)

Map view (Illinois - GDP)

Top of table (Saint Louis)

Bottom of table (Saint Louis)

Top of table (Missouri)

Bottom of table (Missouri)

Table (Illinois)

Methodology and Footer

Mobile

Default view (hero image)

Scrolled down

Default map view (Saint Louis - GDP)

Measure dropdown

Map view (Saint Louis - Labor Force)

Map view (Saint Louis - Unemployment Rate)

Map view (Saint Louis - Median Income)

Map view (Saint Louis - Unemployment Rate)

Geography dropdown

Map view (Missouri - Unemployment Rate)

Map view (Illinois - Unemployment Rate)

Top of table (Saint Louis)

Top of table (Saint Louis) 2

Bottom of table (Saint Louis)

Top of table (Missouri)

Bottom of table (Missouri)

Top of table (Illinois)

Bottom of table (Illinois)

Top of methodology

Bottom of methodology and Footer