Patrick T.N. Gannon - Portfolio Site

Work Samples

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

Or Filter By:
Language:
Libraries:
Other Technologies:

A Memoji Generating App Created With a Google AI Prompt

Screenshot of Google AI Studio generated Memoji App
Project Summary:

This project was my first experiment with AI 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:

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.

JavaScript App - API Data Display

Screenshot of Pokemon Index app Home Page
Project Summary:

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.

Movie Database - REST API

Screenshot of MongoDB portion of component
Project Summary:

A movie API server-side component, built using MongoDB, Express, and Passport for use with a MERN (MongoDB, Express, React, Node.js) website app 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.

React Single Page Application (SPA)

Screenshot of myFlix SPA
Project Summary:

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.

React Progressive Web Application (PWA)

Screenshot of Meet app Home Page
Project Summary:

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-Native "Chat" App

Screenshot of React-Native Chat App
Project Summary:

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.