Patrick T.N. Gannon - Portfolio Site

Work Samples

These are independent projects I have been working on since completing the Full Stack Web Development Program at Career Foundry, as well as some projects that were created as part of the program. I continue to take courses and participate in independent projects to update and develop my web development skills. View a complete list of my certifications.

Or Filter By:
Language:
Libraries:
Other Technologies:

Weather App (React + Open-Meteo API)

Screenshot of Open-Meteo React Weather App
Project Summary:

Date of Completion: March 2026

Production-style weather application built with React 19 and Vite. Users can search any location and view current conditions, hourly trends, and 7-day forecasts with unit switching and responsive layouts.

Developed from one of the Frontend Mentor Challenge Projects.

Technologies Used:

React (version 19), Vite, Node.js, Figma (implementing designs from Figma)

Project Links:

View the live demo version of the app hosted on GitHub Pages.

Link to project source files on hosted GitHub.

A Memoji Generating App Created With a Google AI Prompt

Screenshot of Google AI Studio generated Memoji App
Project Summary:

Date of Completion: August 2025

This project was my first experiment with AI "vibe" programming and inspired DEV community's "Build Apps with Google AI Studio" Education Track.

The assignment: Use the Build feature in Google AI Studio to build an app that incorporates image generation with the Imagen API.

For the app concept, I thought it would be fun to build an app that was able to create a Memoji based on a photograph of your choosing.

Other than a few minor CSS corrections, all of the code for this app was generated byGoogle AI Studio's Build Feature from a single initiating prompt I provided.

Technologies Used:

Google AI Studio, Google Gemini API, React (version 19), TailwindCSS, Vite, Typescript

Project Links:

View the live demo version of the app hosted on GitHub Pages.

Link to project source files on hosted GitHub.

Link to my post on DEV website regarding the creation of this app

React 19 - Tailwind CSS - Testimony Card Component

Screenshot of Testimony Card Blue Theme in Light and Dark Mode
Project Summary:

Date of Completion: August 2025

This project was based on a GreatFrontEnd project to develop a single Testimony Card based on the Figma Design specifications .

I created this component, which builds on that concept by adding the ability to generate multiple cards at once, with three choices for color theme, because I wanted to try out the new Form features in React 19 and to practice using Tailwind CSS and building projects with Vite.

Technologies Used:

React (version 19), TailwindCSS, Vite, Figma (implementing designs from Figma)

Project Links:

View the live version of the component hosted on GitHub Pages.

Link to project source files on hosted GitHub.

React-Native "Chat" App

Screenshot of React-Native Chat App
Project Summary:

Date of Completion: June 2024

A mobile chat application built with React-Native, React-Native-Gifted-Chat, Expo, and Google Firebase.

Technologies Used:

React-Native, React-Native-Gifted-Chat, Expo, Expo Go, Google Firebase and Android-Studio.

Project Links:

Link to project source files on GitHub.

React Progressive Web Application (PWA)

Screenshot of Meet app Home Page
Project Summary:

Date of Completion: May 2024

The project objective was to create a serverless, progressive web application (PWA) built with React using a test-driven development (TDD) technique. The application uses the Google Calendar API to fetch upcoming events.

Technologies Used:

JavaScript, React, Create-React-App, Recharts, Jest, Jest-Cucumber, TDD techniques, Google Calendar API, OAuth2, Serverless Functions (AWS Lambda).

Project Links:

Link to project source files on GitHub.

Link to the hosted version of the app (requires a Google account to login).

React Single Page Application (SPA)

Screenshot of myFlix SPA
Project Summary:

Date of Completion: May 2024

Client-side interface, built using the React library, for previously created server-side code (Movie Database - REST API ) of a movie themed single-page application (SPA) which is hosted on Netlify.

Technologies Used:

JavaScript ES2015+, Express, React, Bootstrap 5, Parcel, Netlify, Heroku, MongoDB

Project Links:

Link to project source files on GitHub.

Link to the SPA hosted on Netlify.

Movie Database - REST API

Screenshot of MongoDB portion of component
Project Summary:

Date of Completion: March 2024

A movie API server-side component, built using MongoDB, Express, and Passport for use as backend for a MERN (MongoDB, Express, React, Node.js) Single Page Application (SPA) that displays information pertaining to movies.

Technologies Used:

JavaScript, Node.js, Express, Dotenv, Mongoose, MongoDB, Passport, Postman, Heroku

Project Links:

Link to project source files on GitHub.

Link to the Documentation listing all Endpoints. Documentation hosted on Heroku. Link will open the Heroku site in a new tab.

JavaScript App - API Data Display

Screenshot of Pokemon Index app Home Page
Project Summary:

Date of Completion: February 2024

A simple JavaScript app that displays data from the Pokemon API (link opens in a new tab). For the first version, the requirements were to create a UI designed from scratch, without the use of any libraries or platforms. For the final version, we were required to use the Bootstraps library to create the UI.

Technologies Used:

JavaScript ES2023, Bootstrap 5, HTML, and CSS.

Project Links:

View the "Original Code - Non-Bootstrap" version of the app.

View the Bootstraps version of the app.

Link to project source files on hosted GitHub.