← All projects

Why I built it

It started as an experiment. I wanted a portfolio that showed my personality as well as my experience, so I built it around a Magic 8-Ball. The ball was the fun part. The real work was everything behind it.

How it works

Frontend

React and TypeScript, built with Vite and hosted on Vercel. Each shake shows a playful answer, then asks the API for a reason.

API

Spring Boot on Java 21, deployed to Render with Docker. GET /api/reasons/random returns one approved reason, picked at random.

Data

PostgreSQL, with the schema managed by Flyway migrations.

Fallback

Since the 2026 update, the site shows a local reason if the API is slow or down.

What it taught me

Getting the pieces to talk to each other in production took longer than writing any one of them. The commits from those first ten days are mostly about integration: CORS rules so the deployed frontend could call the API from Vercel and the custom domain, a different API address for each environment, a database migration that needed a manual repair, and getting Maven to build on Render.

What I’d do differently today

• Agree on the API contract first. The API sends the reason text as reason, but the frontend reads title.
• Lock down the write endpoints before deploying anything.
• Plan for the API being slow or unavailable from the start.
• Add automated tests.

Play it

The Magic 8-Ball keeps its own page, its original look and its personality. It used to be the whole website; now it’s one project in the portfolio.

← All projects

300+ people used it, including visitors from other countries, such as Egypt. The church promoted it to encourage volunteers to sign up for festival shifts.

Why I built it

I wanted to see how quickly I could build a useful application with AI-generated UI and code. My church’s festival needed volunteers at different stations, so I built the signup for it.

What it does

• Volunteers register for shifts, with different stations and shift schedules.
• Volunteers review the shifts they’ve signed up for, and families can review their shift registrations.
• It collects shirt sizes, and later I added shirt inventory tracking.
• A password-protected admin page is meant to keep registrants’ information private.

The problem that mattered

Some volunteers couldn’t sign up for more than one shift, because the app rejected any shifts whose times overlapped. But some overlaps were intentional: one shift ends while the next one starts, at the handover between stations.

I investigated the signup logic myself and fixed it, so volunteers can register for overlapping shifts when the shifts are at different stations. The first generated version followed a sensible-sounding rule. The real requirement only became clear once people tried to use it.

What I learned

AI tools got me to a working application quickly. Real users then found requirements and edge cases the first version didn’t handle. Now I judge AI-generated UI and functionality by how people actually use it, not by how polished the first result looks.

What’s next

The biggest improvement identified after the festival: automated text-message reminders before each volunteer’s shift. It’s planned, not built.

External site: egypt-fest-shift-sign-up.lovable.app, opens in a new tab.

← All projects

How I’m working on it

• Investigate first. Before changing any code, I had Claude Code assess the existing architecture and record what it found, including the 8-Ball’s known issues.
• Write it down. An agent guide (CLAUDE.md), a design document (DESIGN.md) and dated research notes live in the repository, so people and coding agents work from the same context.
• Decisions stay mine. Claude Code investigates, proposes and builds prototypes. I approve the decisions, and approved ones go into the design decision log.
• Accessibility from the start. The target is WCAG 2.2 AA, and every prototype is checked at phone and desktop widths.
• My own photography. The visual identity is built around photos from my kitchen, like the one beside this card.

Status

Lessons carried over

From the 8-Ball: agree on contracts and plan for failure before you deploy. From the festival signup: real use shows requirements a first draft misses. Here, that means investigating before building and verifying what AI produces against the real system.