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:

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.