Web Development and UI Demos

Setlist Manager App

git repo | demo page

Firebase DB Firebase Auth React Responsive UI

This is an app I created with React and Firebase. It helps my band to manage setlists and songs.

Setlist Manager allows the user to highlight setlists by what instrument each member is playing or who is singing. This assists in creating setlists minimizing the number of instrument switches between songs. Its also useful to assemble practice lists and organize shows by what members are available.

This was created with React and Firebase. It registers in the user as a guest on pageload. Admin users can login to view additional functionality.

Life Tracker App

git repo | typescript conversion | demo page

CSS React Vite Layout TypeScript

Use case for using both grid and flex display together. The life total section layout is handled with grid display while alignment on button rows and text is flex.

This is a good codebase to showcase how I build small React web apps.

I also converted this from vanilla React + JS to TypeScript as an excercise in learning TypeScript.

Responsive UI Tables

git repo | demo page

CSS Responsive UI

Demonstrates a way to display large tables in mobile browsers without hiding columns while re-using the same HTML.

Javascript Async Presentation


Javascript Async Patterns

This is a presentation I gave. The subject was to demonstrate the ways async client programming has evolved in javascript.

I used the slides as way to demonstrate the js stack visually. Flipping slides shows how js tasks move through the execution stack.

Older Demos

fiddle | codepen

These are pre-2014 codepen and fiddle examples I created while experimenting early on with jQuery, JavaScript, Responsive CSS, flex layout and more.