Projects

ℹ

Need more detail? Message me on LinkedIn or GitHub and I'll share stories, metrics, and QA checks for any project on this page.

Architecture diagrams showing project patterns — Architecture overview of featured projects

Car-Match

ReactExpressMongoDBRenderGitHub PagesJWT

Full-stack matchmaking experience

Sub-400ms responsesRender + Atlas deployments

Problem: Users needed a platform to match profiles, participate in forums, and communicate through chat features.

Solution: Built a full-stack application with React frontend, Express API backend, and MongoDB database for persistent data storage.

Tech: React, Express, MongoDB, Render, GitHub Pages, JWT

More details

My Role:

Designed and implemented React UI components for profiles, forums, and chat
Built Express API endpoints for authentication, profile matching, and messaging
Designed MongoDB schema for users, events, forums, and messages
Configured deployment pipelines for frontend (GitHub Pages) and backend (Render)
Implemented authentication flow with JWT tokens

Outcomes & Proof:

GitHub repo: car-match
Live deployment: Frontend deployed to GitHub Pages, backend deployed to Render
Verified authentication flow implemented in Express routes
Verified MongoDB Atlas integration for data persistence
Metrics pending: add measurable metrics (response times, daily active users) after the next deployment run

Case study GitHub

Interactive Pokédex

Next.jsPokeAPIStatic exportTailwind CSSGitHub Pages

Static Next.js Pokédex demo

Problem: Needed a serverless way to browse the original 151 Pokémon with fast search and filtering.

Solution: Built a Next.js static export that fetches PokéAPI data at build time and adds client-side filtering.

Tech: Next.js, PokeAPI, Static export, Tailwind CSS, GitHub Pages

More details

My Role:

Configured Next.js static export for GitHub Pages deployment
Implemented build-time data fetching from PokéAPI
Built client-side search and filtering for the list view
Designed responsive layouts with Tailwind CSS
Documented setup and deployment steps in the repo

Outcomes & Proof:

GitHub repo: Interactive-Pokedex
Live demo: Interactive-Pokedex
Static export and build-time data fetch documented in the repository
Client-side filtering available in the live demo

Case study Live demo GitHub

CIRIS AI contributions

Node.jsExpressMongoDBDockerJWT

Open-source collaboration

Problem: The CIRIS ethics engine needed improved documentation, clearer onboarding instructions, and better observability for token verification.

Solution: Contributed documentation updates, Docker configuration, and logging improvements that were merged into the main repository.

Tech: Node.js, Express, MongoDB, Docker, JWT

More details

My Role:

Updated JWT authentication documentation with clearer examples
Added logging around token verification for better debugging
Created Docker Compose configuration for local development
Improved onboarding documentation for new contributors

Outcomes & Proof:

GitHub organization: CIRISAI
Pull requests merged: View merged PRs
Verified documentation updates in merged pull requests
Verified Docker Compose configuration in repository
Verified logging improvements in codebase

Case study Organization

AnimalSounds

ReactNext.jsWeb Audio APIGitHub Pages

Audio learning demo

Problem: Needed a fun, educational way for kids to explore animal sounds in the browser.

Solution: Built a small React/Next.js soundboard using Web Audio APIs and deployed it to GitHub Pages.

Tech: React, Next.js, Web Audio API, GitHub Pages

More details

My Role:

Implemented audio playback controls with Web Audio APIs
Designed a kid-friendly layout with clear visual feedback
Created responsive styling for mobile and desktop
Documented usage and deployment steps in the repo

Outcomes & Proof:

GitHub repo: AnimalSounds
Live demo: AnimalSounds
Static deployment documented in the repository

Live demo GitHub

Professional Portfolio Template

HTMLCSSJavaScript

Semantic foundation

Problem: Needed a semantic, accessible landing page structure that clearly presents professional achievements to employers.

Solution: Built a portfolio website template with semantic HTML, accessible navigation, and responsive typography.

Tech: HTML, CSS, JavaScript

More details

My Role:

Designed semantic HTML structure with proper landmarks and ARIA labels
Implemented skip links for keyboard navigation
Created responsive typography system for readability
Established accessible patterns that serve as the foundation for this Gatsby site

Outcomes & Proof:

GitHub repo: Professional-Portfolio-Website
Live site: Professional-Portfolio-Website
Verified semantic HTML structure in repository
Verified accessibility features: landmarks, skip links, ARIA labels
Template structure used as reference for current Gatsby site

Live site GitHub

CodePen projects

HTMLCSSJavaScript

Reusable UI snippets

Problem: Needed a centralized library of UI patterns, accessibility examples, and layout experiments for quick reference and sharing.

Solution: Curated a collection of CodePen projects demonstrating reusable UI components, accessibility patterns, and layout techniques.

Tech: HTML, CSS, JavaScript

More details

My Role:

Created and documented UI pattern examples
Implemented accessibility-focused components
Organized pens for easy discovery and forking
Documented code patterns for reuse in blog posts and projects

Outcomes & Proof:

CodePen profile: student-account-bradley-matera
Verified collection of pens available for public viewing and forking
Patterns referenced in blog posts and project documentation

CodePen

Convo-Ai

PythonFastAPIWhisperOllamaXTTS v2WebSockets

Local voice + text AI assistant

Problem: Needed a local, privacy‑first way to explore voice and text AI without cloud APIs.

Solution: Built a FastAPI app that runs locally with Whisper (STT), Ollama (LLM), and XTTS v2 (TTS).

Tech: Python, FastAPI, Whisper, Ollama, XTTS v2, WebSockets

More details

My Role:

Wrote the FastAPI server with HTTP + WebSocket endpoints
Integrated Whisper for speech‑to‑text and XTTS v2 for speech output
Connected Ollama for local LLM responses
Implemented conversation history and optional sentiment analysis hooks
Documented prerequisites, setup, and run steps in the README

Outcomes & Proof:

GitHub repo: Convo-Ai
Local‑only run: server + client workflow documented in README
Verified Whisper, Ollama, and XTTS v2 integrations in repo
Optional web UI flow documented for real‑time interaction

GitHub

TriangleDemo

HTMLJavaScriptCanvas/WebGLGitHub Pages

Canvas/WebGL geometry demo

Problem: Needed a minimal demo to explore geometry and animation fundamentals in the browser.

Solution: Built a lightweight triangle animation using HTML5 Canvas/WebGL and deployed it to GitHub Pages.

Tech: HTML, JavaScript, Canvas/WebGL, GitHub Pages

More details

My Role:

Implemented the animation loop and rendering pipeline
Documented setup steps and demo usage
Published the static demo to GitHub Pages

Outcomes & Proof:

GitHub repo: TriangleDemo
Live demo: TriangleDemo

Live demo GitHub

EthicsFrontEndDemo

Next.jsTailwind CSSSecrets managementGitHub Pages

Secrets management tutorial

Problem: Needed a simple way to teach secure secrets handling in frontend workflows.

Solution: Built an interactive tutorial covering hard‑coded secrets, env vars, and best practices.

Tech: Next.js, Tailwind CSS, Secrets management, GitHub Pages

More details

My Role:

Built the demo pages and scenarios in Next.js
Styled the tutorial with Tailwind CSS
Documented the lessons and usage steps in the repo

Outcomes & Proof:

GitHub repo: EthicsFrontEndDemo
Live demo: EthicsFrontEndDemo
Tutorial steps documented in the repository README

Live demo GitHub

CheeseMath Jest tests

JavaScriptJestNext.js

Calculator + Jest demos

Problem: Needed to demonstrate both UI component development and unit testing practices in a single project.

Solution: Built a calculator application with Next.js UI and comprehensive Jest test suite, fully documented for learning and reference.

Tech: JavaScript, Jest, Next.js

More details

My Role:

Designed and implemented calculator UI with Next.js
Wrote Jest unit tests for calculator logic
Documented testing patterns and component structure
Deployed live demo for interactive testing

Outcomes & Proof:

GitHub repo: CheeseMath-Jest-Tests
Live demo: CheeseMath-Jest-Tests
Verified Jest test suite in repository
Verified Next.js component implementation
Test coverage documented in repository

Live demo GitHub

OBJ parser

Zig

Geometry learning repo

Problem: Needed to understand Zig's memory model and file I/O by working with real-world data formats.

Solution: Built a parser for OBJ and MTL geometry files that demonstrates Zig's memory management and file handling patterns.

Tech: Zig

More details

My Role:

Designed parser architecture using Zig's memory model
Implemented file I/O for OBJ and MTL format parsing
Created custom data structures for geometry data
Implemented error handling for malformed files
Documented parsing logic and future improvements

Outcomes & Proof:

GitHub repo: obj-parser
Verified parser implementation in repository
Verified OBJ/MTL file format handling
Verified error handling for edge cases
Documentation available in README

GitHub

I'm happy to schedule a video walkthrough, share deployment docs, or hand over repo access so you can verify the code quality, observability, and production plans before we talk.

Book a conversation

Browse GitHub repositories

Proof links for all metrics and implementations are available in linked repositories and deployment dashboards.

Projects

Case studies that highlight problems, solutions, and results.

Featured Full-Stack Applications

Car-Match

Interactive Pokédex

CIRIS AI contributions

Front-End Interfaces

AnimalSounds

Professional Portfolio Template

CodePen projects

Full-Stack Applications

Convo-Ai

Tools & Infrastructure

TriangleDemo

EthicsFrontEndDemo

CheeseMath Jest tests

OBJ parser

Need a walkthrough?