Projects

React SketchPad

A published NPM package that can be consumed in any modern React application. Written in TypeScript, it supports type hinting and enables users to create sketches in a React application, export what was drawn as JSON data (paths) or as a PNG

Technologies

Eslint
HTML Canvas
HTML/CSS/JavaScript/Events
NPM
React: Hooks, JSX/babel, CSS-in-JS
Storybook
TypeScript
Vite

Concepts and Patterns

CI/CD
Deployment
Packaging

Pathfinder

A React/TypeScript application implementing the A* path finding algorithm (derived from Dijkstra's algorithm) for finding the shortest path between any two nodes/vertices in a graph

Technologies

Firebase
HTML/CSS/JavaScript/Events
React: Hooks, JSX/babel, CSS-in-JS
Redux/RTK/Middleware
TypeScript
Vite/Vitest

Concepts and Patterns

Algorithms
Data Structures
Data Structures: Arrays, Maps, Queues, Sets
Dynamic Programming
Object Oriented Programming

Muziq

Muziq is a cloud music player using Supabase (database, blob storage, auth) and Stripe (for payments) and a UI designed to mirror the UI of Spotify

Technologies

NextJS
Radix-UI
Stripe
Supabase
TailwindCSS
TypeScript
Vercel
Zsutand

Concepts and Patterns

API
Authentication
Responsive Design
Server Components
Sessions
Web Hooks

Algorithm Practice

Repository containing various algorithm implementations in TypeScript and tests verifying functionality using the jest library

Technologies

Jest
TypeScript

Concepts and Patterns

Algorithms
Big O
TDD

React 2048

The classic game of combining tiles to get to 2048

Technologies

Firebase
HTML/CSS/JavaScript
React: Hooks, JSX/babel, CSS-in-JS
Yarn

Concepts and Patterns

Events
State management

Pure JavaScript Snake

Checkout the classic arcade game snake, built with CSS Grid and vanilla JavaScript

Technologies

HTML/CSS/JavaScript

Concepts and Patterns

Functional Programming