Projects
Agile Project Management Web Application
Description:
The Agile Project Management Web Application is a robust platform developed with React and Java Spring Boot, designed to streamline project management processes and enhance collaboration within teams. This application provides a comprehensive suite of features tailored for agile project management methodologies, enabling teams to efficiently plan, execute, and monitor projects while maintaining flexibility and adaptability.
February 2024 - Present
Planned date to finish by: July 2024
Key Features:
User Management: Facilitates user registration, login, profile management, and deletion. Users can customize their notification preferences to stay informed about project and task related activities.
Project Management: Enables project creation, updating, and deletion. Users can invite team members to projects, manage project roles and permissions, and monitor project progress.
Task Management: Allows users to create, update, and delete tasks within projects. Task assignments, comments, and status updates are integrated to ensure clear communication and progress tracking.
Notification System: Provides customizable notifications for project and task-related events, ensuring timely communication and coordination among team members.
Dashboard: Offers intuitive dashboards for users and projects, providing a centralized hub for accessing assigned tasks, project summaries, activity feeds, and calendars with due dates.
Analytics: Empowers users with insightful project analytics, including task status distribution, trends over time, velocity charts, average time to completion, and aging tasks analysis.
Revalidation Caching: When data is requested it will have an ETag header in the response. This ETag will be cached and used to compare later transactions, if the ETags are different then the data was modified so the new data will be returned and used. Otherwise the data will be kept the same and the response will return 304 - Not Modified.
Tech Stack:
Frontend (React): Implements the user interface and interacts with backend services via REST APIs.
Backend (Java Spring Boot): Provides REST APIs to handle user requests, manage business logic, and interact with the database.
Database (MySQL): Storing the data representation and associations of Java Entities.
Software Engineering Degree Capstone project
Description:
As part of a six-member team for our Software Engineering capstone project, I held the position as the Project Manager as well as a developer for the frontend team. Developing a comprehensive imaging solution for a Rochester-based company. Utilizing Java Spring Boot, Thymeleaf, Plotly.js and Electron, we crafted a dynamic Single Page Application (SPA) that seamlessly integrates with backend services. My responsibilities included: tracking project progress, tracking metrics, determining milestones, ensuring those milestones were being met, structuring the Spring application, designing Thymeleaf templates, creating tests and implementing the 3D object display with interactive controls.
Simultaneously, the backend team focused on building a robust microservice in Java. This microservice encoded and decoded DICOM files essential in imaging processes, securely uploading them to a designated PACs server, and facilitating retrieval and decoding as needed.
Throughout the project, we adhered to Test-Driven Development (TDD) practices to ensure high code quality and reliability. Employing the Sashimi waterfall approach provided structured phases while allowing flexibility crucial in software development and compliance with FDA guidelines.
January 2023 - May 2024
Key Features:
Single Page Application (SPA): The desktop application is setup to work as a SPA with tabs to access areas of the application such as search, images, and 3D object display.
Subject Search: Users are able to search for a subject through the desktop application. On selection of a subject data associated is gathered and updates the state of the Desktop application.
Subject Image Display: Users are able to display subject associated images under the Images tab.
Subject 3D Object Display: Users are able to view, control and manipulate the 3D object(s) associated with the selected object. The object can be controlled with a control panel that allows you to select objects that are displayed, opacity of each object, size of each object as well as toggling the colors mapped to the objects. The objects can be moved around, zoom in and out, as well as rotate to view the object.
Alert Display: Users will see alerts show on the top of the page when alerts are sent within the application, whether these alerts be processing alerts or error alerts.
DICOM Encoding: A microservice that has a defined DICOM format that encodes a set of required data into a DICOM file to be stored in a PACs server.
DICOM Decoding: A microservice that takes an encoded DICOM file that converts into data that is consumable by the Java desktop application.
PACs Server Connection: A service that allows the desktop application to access and retrieve data from a PACs server.
Tech Stack:
Desktop Application: Thymeleaf template generation with Java Spring/Spring Boot, Plotly.js for 3D object display as well as Electron to make embed into a desktop application.
Backend Microservices: Java written DICOM encoder and decoder services as well as a service to connect to PACs server and search and retrieve subject data.
PACs server: storing subject data encoded and decoded from backend services to the frontend application.
Contribution to Open- Source Vulnerability History Project
Description:
As part of a cohort, I was tasked with a set of CVEs from a Linux subsystem to research. I was provided with YAML files to fill in historical data regarding the CVEs such as publication date, description, commit where the vulnerability was found and commit where it was fixed, how it was fixed, what violations did the vulnerabilities cover and many other attributes. I handled CVE-2013-3302 and CVE-2016-8630.
Key Features:
CVE-2013-3302: Race condition when the ssocket is NULL when the system tries to connect. The code checks to see if the ssocket is available too late causing it to fail.
CVE-2016-8630: NULL pointer dereference due to improper access control. The code accesses a part of memory that does not exist causing the NULL pointer dereference. This causes the system to become unresponsive.
AWS Image Detection and Alert Website - Giraffe Alert
Description:
Giraffe Alert is a comprehensive application designed to provide real-time notifications to users whenever giraffes are detected in the live stream from the Giraffe habitat at the Houston Zoo. Utilizing a combination of AWS services including Amplify, Rekognition, S3, SNS, CloudWatch, Lambdas, RDS, and API Gateway, Giraffe Alert delivers seamless functionality from image recognition to alert delivery.
Subscribers receive email alerts containing an image snapshot, confidence rating, and link to the live stream whenever giraffes are detected. Additionally, a database stores these alerts for hourly report generation, showcasing the alerts from the past 3 days as well as a summary including the number of alerts sent, giraffes detected, and average confidence rating. Thanks to Terraform’s infrastructure management, deployment of the application is streamlined, enabling setup in just 5 minutes with predefined configurations.
October 2023 - December 2024
Key Features:
Subscribe for email notifications: Users are able enter their email address to subscribe to get email alerts when giraffes are detected on the livestream.
Email alert: The email alert subscribed users get contains an image that was used to detect the giraffes are visible on the livestream, the confidence rating the image detected giraffes, the number of giraffes detected. These emails also allow you to unsubscribe from getting further alerts.
View the livestream: The website displays a livestream of the Giraffe exhibit from the Houston zoo.
Hourly Alert Report: Every hour a alert report is generated and displayed on the website. The alert data is all taken from the past 3 days of alerts stored in the database. The report displays the alerts in the report as well as a summary with the number of alerts sent, giraffes detected, and average confidence rating. Each report displays the alert ID, date the alert was created, number of giraffes detected the confidence rating and a link to view the image used for detection.
AWS Deployment via Terraform: Terraform files that generate the infrastructure and is up and running in about 5 minutes.
Backend completely on AWS: The only coding needed for the project was the Python for Lambda functions and the React frontend code. The rest is handled by AWS services and configured through Terraform.
Tech Stack:
Infrastructure as Code (IaC): Terraform to configure, build and deploy the AWS infrastructure reliably and repeatably.
Web Application: React application built and hosted with AWS Amplify.
Backend Services: EC2 to hold the AWS infrastructure , Lambdas several used to call the camera API endpoint for new images for detection. Rekognition to detect giraffes from provided images, SNS for user subscription and email notification on giraffe detection, CloudWatch to time the lambdas to call the camera API endpoint and time lambdas to create alert reports every hour, API Gateway to access lambdas functions from the frontend to gather data from the database and subscribe users.
Database: Amazon Relation Database Service (RDS) using MySQL to store detection alerts, alert reports and user data, as well as S3 buckets to hold files to build the infrastructure from and images that were detected.
My Custom React Components Library
Description:
I wanted to create a library of reusable React components I could use to build React UIs faster in future projects. I used this also as a way to challenge myself by thinking of something that I would want and implementing.
June 2022 - October 2022
Website Demo: https://heartfelt-concha-e7eece.netlify.app/
GitHub: https://github.com/Nathan-Gilbert6917/React-Components
Key Features:
Toggle Switch: A simple toggle button that smoothly animates on toggle. There is an active and unactive color that can be set.
Rounded Button: The button displays with what ever class styling that is passed in.
Circular Button: The component takes in a boolean isCircular to determine if it shows circular otherwise displays as a rounded button by default.
Buttons with Icon: The component takes in an Icon and text to display
Text box: The label has an animation to smoothly move up and shrink on focus (clicking on the text box, ready to type)
Password Text Box: Similar to the Text box including the label animation but also has hidden text with a show/hide icon button to display and hide the password typed.
Text Area: Text area similar to text box but allows for multiple lines.
Side-Tabs: Tabs to be used on a vertical tab nav bar. Has an active and not active version also allows for an Icon to be passed and displayed.
Search Bar: Text box with a search icon button to activate search.
Select Bar: Select option bar to have a fitting look with the other inputs.
Modal: Displays an overlaying container that can take in componets and react to the size. You can exit by clicking the darkened outer area, the X button or the cancel button.
User Dropdown: Takes in a image to display the user's profile image as well as a dropdown on click to display settings or other associated information passed.
Accordion: Expandable/Collapsible allowing for setting the default state with boolean values as well as setting what content and components will display when expanded.
Tab set w/ tabs: A tab set that takes in tabs to display designated content for a specified tab when selected.
Check boxes: Regular checkbox Modified to fit the feel of the other inputs.
Progress Bar: Progress shown in bubbles of steps connected with trails. They can be traversed forwards and backwards as well as dynamically change the number of steps to progress. Smooth animation when the step progresses or recedes.
Table: Regular table that can be modified with class styling and some props for header lines, vertical body lines and horizontal body lines.
Tech Stack:
Hosting: Netlify builds and runs CI/CD for deployment when changes are committed to dev. Then I can choose to move prod to the newly built version.
Web Application: Built using React with styling with CSS and Icons from FontAwesome.