E-commerce Core
Built product browsing, cart management with Zustand, and a complete Stripe checkout and order flow.
Solo Project · Full-stack Web App · 2025 - 2026
Postcard Store
A full-stack e-commerce platform for selling original photography postcards, featuring Stripe checkout, AI-powered recommendations, and a fully automated CI/CD pipeline.
Role
Design, Development & Deployment
Timeline
2025 - 2026
Next.js
TypeScript
AWS
Stripe
Claude
PostgreSQL
The Problem
Selling physical prints online requires more than a product page. It needs secure payments, reliable order handling, protection against abuse, and confidence that new code changes will not break checkout. The goal was to build a real store that could be trusted with real transactions, not just a demo.
The Solution
I built a full-stack Next.js application with Stripe-powered checkout, authenticated accounts, transactional email, and an AI recommender that suggests postcards based on customer preferences. The platform is protected with rate limiting and input validation, and every change is verified by an automated CI/CD pipeline with end-to-end tests before deployment.
My Contributions
Authentication
Implemented account-based access with NextAuth v5, supporting secure sign-in and protected user flows.
AI Recommendations
Integrated the Anthropic Claude API to recommend postcards based on customer taste and browsing context.
CI/CD & Deployment
Set up a GitHub Actions pipeline with Playwright end-to-end tests and deployed to Vercel with Prisma Accelerate.
Key Workflows
Shopping & Checkout
- • Browse postcards and manage a persistent cart
- • Pay securely through Stripe checkout
- • Receive order confirmation emails via AWS SES
Accounts & Personalization
- • Sign in with NextAuth v5 session management
- • Get AI-powered postcard recommendations
- • View order history tied to the account
Reliability & Security
- • Rate limiting on API routes with Upstash Redis
- • Input validation with Zod on every endpoint
- • Automated Playwright e2e tests on every push
Technical Decisions
Prisma with PostgreSQL and Accelerate
Prisma provided type-safe database access for orders and products, while Prisma Accelerate handled connection pooling for serverless deployment on Vercel.
Upstash Redis for rate limiting
API routes needed protection from abuse without a dedicated server, so serverless-friendly Redis rate limiting was the right fit for the Vercel environment.
Playwright e2e tests in CI
Because checkout is business-critical, I chose end-to-end tests that exercise real user flows, running automatically in GitHub Actions before every deployment.
Challenges & Solutions
Debugging the production deployment
Problem
The first Vercel deployment failed with a chain of interconnected issues, including a malformed database URL, top-level await breaking the build, and static generation conflicting with Prisma Accelerate.
Approach
I isolated each failure one at a time, reading build logs carefully, restructuring the auth setup to remove top-level await, and adjusting rendering strategy for database-dependent pages.
Result
The app deployed successfully, and I came away with a much deeper understanding of how Next.js builds, serverless databases, and environment configuration interact in production.
Making the pipeline trustworthy
Problem
Automated tests failed in CI due to environment differences, including a Prisma seed incompatibility between tsx and ESM.
Approach
I reworked the seeding setup to be compatible with the CI environment and configured the workflow so tests run against a realistic database state.
Result
The pipeline now catches regressions before they reach production, so I can ship changes with confidence.
Impacts
Production-Ready
A live, deployed store handling real checkout flows with automated quality gates.
Brand Foundation
Serves as the e-commerce home for my postcard photography brand.
Engineering Depth
Demonstrates full-lifecycle skills: architecture, payments, testing, security, and deployment.
Product Walkthrough
1. Browsing & Cart
Built a browsing and cart experience with Zustand state management that persists across the session.
- • Browse postcards with product detail pages
- • Add and remove items from a persistent cart
- • See live cart totals before checkout
1. Browsing & Cart
Built a browsing and cart experience with Zustand state management that persists across the session.
- • Browse postcards with product detail pages
- • Add and remove items from a persistent cart
- • See live cart totals before checkout
What I Learned
- • Learned how to debug production-only failures by isolating one variable at a time instead of changing many things at once.
- • Gained hands-on experience with payments, transactional email, and the operational side of running a real store.
- • Understood how CI/CD and e2e testing change the way you write code, because every change must keep the pipeline green.
Next Steps
- • Add inventory tracking and low-stock indicators
- • Expand the AI recommender with purchase history signals
- • Improve Lighthouse performance scores, focusing on Total Blocking Time
- • Add an admin dashboard for managing products and orders