Web Development Projects

Personal

Capstone & Academic

Client:

Jayne Moon

Year:

2019 - 2025

PokeGrader App

Pokemon Card Grading App - A modern, AI-powered Pokemon card grading application built with React, TypeScript, and Tailwind CSS.

🔗 Live Demo | GitHub Repository
AI-Powered Grading: Instant PSA-style card grading using advanced analysis

Core Features:

Market Analysis: Real-time pricing and market trend data
Collection Management: Save and track your graded cards
User Authentication: Secure sign-in/sign-up system
Subscription Plans: Free and Pro tiers with different features
Responsive Design: Works perfectly on desktop and mobile

Technical Stack:

TypeScript
React.js 18
Framer Motion for interactive elements and animations
Tailwind CSS for responsive, utility-first styling
GitHub & Vercel for deployment

—————————————

PokePet | Fire Coder

🔗 Live Demo | GitHub Repository
PokéPet Fire Coder is a React-based dashboard that lets developers train a fire-type Pokémon (Charmander → Charmeleon → Charizard) through real coding activities.

Core Features:

Code commits
Lines of code
Study hours
Project completions
Pair programming sessions,

Translating these activities into Pokémon stats and evolution progress. I set out to create a solution that transforms coding practice into an interactive, gamified experience using familiar Pokémon mechanics.

—————————————

Technical Stack:

React 18 with functional components and hooks

JavaScript ES6+ for modern syntax and features
Tailwind CSS for responsive, utility-first styling
CSS Custom Properties for dynamic theming and animations
LocalStorage API for persistent game state management
GitHub & Vercel for deployment

—————————————

State Synchronization:

Problem: Managing complex interdependent stats (HP, happiness, energy) with multiple trigger points.
Solution: Implemented useEffect dependency arrays and functional state updates to prevent race conditions:

 setPet((prevPet) => ({
  ...prevPet,
  health: Math.max(0, Math.min(100, prevPet.health + healthChange))
}));

Performance Optimization:

Problem: Multiple interval timers affecting performance on mobile devices.
Solution: Consolidated timer logic and implemented proper cleanup:

useEffect(() => {
  const interval = setInterval(/* logic */, 30000);
  return () => clearInterval(interval);
}, []);

CU Boulder Capstone Projects

Mythical: Unicorn vs Dragons | v1 2019 - v2 2024

🔗 Live Demo | GitHub Repository

A game's evolution from CU Boulder computing capstone project to transforming it into a fully-fledged web based game, crossing languages, exemplifying my approach to rapid prototyping, cross-platform development, demonstrating language versatility and problem-solving and an ability to translate concepts across different development environments and deploy a fully functional web game with responsive design.

—————————————

Gameplay Mechanics:

Unicorns: Click for +100 points, spawn additional unicorns
Dragons: Clicking causes -10 points and spawns 2 more dragons
Clocks: Slow down all sprites when clicked
Time Pressure: 60-second rounds with increasing sprite speed
Progressive Difficulty: Speed multiplier increases over time

Core Features:

Responsive collision detection system
Sprite boundary physics with bounce mechanics
Real-time score tracking and timer display
Progressive speed increases for enhanced difficulty
Clean separation of game state management

—————————————

Tech Stack Evolution

Version 1: Python + Pygame

Language: Python
Framework: Pygame
Target: Desktop application
Deployment: Pygame-web compilation to browser

—————————————

Version 2: Web-Native Rewrite

Frontend: Vanilla JavaScript, HTML5 Canvas, CSS3
Deployment: Vercel
Performance: Optimized for web browsers

Wonder App Mobile & Web

🔗 Mobile Demo | Live Website

Wonder App was designed as part of a capstone project for CU Boulder, whereby our class had the opportunity to work for in-real-life projects for local businesses. I worked worked briefly with Wonder Press to develop and design around their mobile/web experiences.

A mobile-first approach to UX/UI design and development: Reimagining how CU Boulder students and community engage and order with Wonder Press premium products.

—————————————

Core Features & Results:

Sticky cart positioned in top-right corner, ensuring 1-tap access from any screen
Enhanced Mobile Cart Experience - implemented a persistent sticky cart positioned in top-right corner, ensuring 1-tap access from any screen
Ingredient-Based Product Discovery - created guided exploration flow allowing users to discover products through preferred ingredients, building education into the purchase journey.
Streamlined Checkout Process - reduced checkout steps by 40% while maintaining all necessary information collection

—————————————

Technical Implementation:

Frontend Stack: React, Vue.js, jQuery for responsive mobile interface
Design System: Figma component library ensuring design consistency
Data Layer: GraphQL integration for efficient product and ingredient data management
Rapid Prototyping: Adobe Suite for visual assets and brand integration