Cobracase

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Drizzle ORM
  • PostgreSQL
  • Stripe
  • Kinde
GitHub Live demo

Cobracase is an online store for custom phone cases. Customers upload their own image, put text on top of it, and see a live preview of the case before they buy. It's a Next.js app, with API routes for the backend and PostgreSQL through Drizzle ORM for data.

What it does

  1. Case editor

    Customers drag in an image, add text with their choice of font and color, and watch a live preview built on accurate mockups.

  2. Checkout

    Stripe takes the payments and supports several payment methods and currencies.

  3. Orders

    The store handles order management and shipping. Customers get order tracking and email notifications, and there's an admin dashboard for orders.

What was hard

  1. An editor anyone can use

    The drag-and-drop upload, the text overlays, and the live preview all had to be easy to use.