$ cat README.md
PurrCase
Custom Mobile Cover E-Commerce Platform
A full-stack e-commerce store where customers design their own phone case from a photo, preview it and pay with Stripe. A team project, with the frontend built by Shreyash Tripathi, a Frontend Developer and UI/UX Engineer based in Noida, India.
my_role: Frontend: built the storefront UI and responsive design with Tailwind CSS and Radix UI, working with a teammate on the full-stack app.
Overview
PurrCase turns a customer's own photo into a custom phone case. The shopper uploads an image, places it on a live phone mockup, chooses the phone model and case options, checks a final preview and pays — all in one guided three-step flow.
It was built by a two-person team as a full-stack Next.js 14 app. Shreyash Tripathi owned the frontend: the storefront and landing page, the step-by-step configurator, the phone mockup and preview screens, and responsive layouts from mobile to desktop, built with Tailwind CSS and Radix UI components.
How it works
Upload
The customer drops an image into a drag-and-drop zone (react-dropzone); the file is stored through UploadThing and a new case configuration is created for it.
Design
The image can be dragged and resized over a phone frame (react-rnd). The shopper picks an iPhone model from iPhone X to iPhone 15, a case colour, a silicone or soft polycarbonate material and a smooth or textured finish, with every option validated by Zod.
Preview
A preview page shows the finished case with its model, material, finish and total price before the customer signs in with Kinde and checks out.
Checkout
Payment runs on Stripe Checkout. A signed Stripe webhook marks the order as paid, saves the shipping and billing addresses in PostgreSQL through Prisma, and sends an order-confirmation email built with React Email and delivered by Resend.
Fulfilment
An admin-only dashboard shows recent orders and revenue for the last week and month, and lets the store move each order from awaiting shipment to shipped to fulfilled.
Challenges & solutions
challenge: What the customer sees in the designer has to be exactly what gets printed, even though the image can be dragged, resized and viewed on any screen size.
solution: The designer measures the phone frame and the image with getBoundingClientRect, redraws only the area inside the case onto an HTML canvas, and uploads that cropped PNG as the final design, so the saved file matches the on-screen preview.
challenge: A custom-product checkout has several stages, and shoppers drop off when they lose track of where they are.
solution: A three-step progress bar (Add image, Customize design, Summary) follows the current route, each step carries the configuration id in the URL, and a live phone mockup keeps the design visible from upload to payment.
challenge: An order must never be marked as paid unless the payment really went through.
solution: Orders are updated only by a Stripe webhook whose signature is verified with the webhook secret; only then is the order marked paid, the addresses saved and the confirmation email sent.
Results
- Shipped and live at purr-case.vercel.app with a complete browse → design → pay → fulfil flow.
- Case designer supports 6 iPhone models (iPhone X to iPhone 15), 2 materials and 2 finishes.
- Orders move through 3 tracked states (awaiting shipment, shipped, fulfilled) in an admin dashboard with weekly and monthly revenue.
Key features
- Three-step case designer: upload a photo, drag and resize it on a phone mockup, pick model, material and finish.
- Stripe checkout with webhook-confirmed orders, Prisma + PostgreSQL data and Resend order emails.
- Frontend (Shreyash): responsive storefront and configurator UI built with Tailwind CSS and Radix UI.
Tech stack
PurrCase is built with Next.js 14, TypeScript, Tailwind CSS, Radix UI, Prisma, PostgreSQL, Kinde Auth, Stripe, UploadThing and Resend.
- Next.js 14
- TypeScript
- Tailwind CSS
- Radix UI
- Prisma
- PostgreSQL
- Kinde Auth
- Stripe
- UploadThing
- Resend
About the developer
Shreyash Tripathi is a Frontend Developer and UI/UX Engineer in Noida, India, currently Junior Developer, UI/UX at Garage Collective. He builds React, Next.js and TypeScript interfaces for AI-integrated SaaS products.