logo
SnapStyle

An end-to-end e-commerce platform that lets users design custom phone cases with AI assistance. Built to master full-stack development with modern tools.

Key Features:
🎨 Design Studio - Canvas editor with layer controls
🔐 1-click Auth - Kinde integration with role-based access
📦 Cloud Uploads - UploadThings for drag-and-drop design storage
📊 Order Pipeline - Prisma-managed database with Neon hosting

Tech Stack:
Next.js 14 | TypeScript | Tailwind CSS | Prisma | Neon PostgreSQL | UploadThings | Kinde

Technical Highlights

AI Suggestions - Style recommendations via Claude API
Image Processing - Sharp.js for case mockup generation
State Management - Zustand for design session persistence
Responsive UI - Mobile-first design with Framer Motion


Development Insights

  1. Auth Flow - Implemented Kinde's React SDK with middleware protection
  2. Database - Prisma ORM with Neon's serverless PostgreSQL
  3. Performance - Achieved 0.9s LCP via Edge Functions
  4. Error Handling - Custom 404 for upload failures

This is how website looks:

What Our Customer Say image
What Our Customer Say
Create you own case in few steps image
Create you own case in few steps
Final case page image
Final case page