This full stack application checks a Postgres database of NHL games to determine which teams have the most games in a selected timespan.

It utilizes React Server Components to keep as much logic and rendering on the backend as possible, ensuring a fast and responsive user experience.

Busy Teams

NextJS

React

Drizzle

PostgreSQL

Tailwind

Typescript

I built this application while following the 

 course on Frontend Masters to explore concepts including Vue's component model, Options and Composition APIs, as well as how data fetching, routing, state management, and styling work when using Vue.

C'est La Vue

Vue.js

Pinia

This full stack application includes user authentication and calls a facial recognition API to draw a box around faces in a submitted image, while adding to a user's score for each image submitted.

Detective Face

Node.js

Knex.js

Javascript

HTML

This NextJS app was built to only update dynamic content when the site is rebuilt or incrementally regenerated by calling an API endpoint.  Assuming the active Voices only change once per hour, this strikes an ideal balance between performance and data accuracy.

The project is deployed on Vercel, and a 

 workflow calls the regeneration endpoint hourly to keep the site updated.

Voice of Seren Tracker

This React app uses APIs to create imaginary robotic friends with pictures, names and email addresses. The list can be searched and the search bar stays on the screen as the user scrolls through the list.  This began as a simple project and has been updated over time to use a service worker and handle state with Redux.

Robofriends

Redux

This site generates a gradient background when loaded and allows the user to either choose specific colors for the gradient or to randomly choose two new colors. The site uses media queries to look good on both desktop and mobile devices.

Projects I've built

Busy Teams

C'est La Vue

Detective Face

Voice of Seren Tracker

Robofriends

Background Generator