Golden Art Frames

Tech Stack

• MongoDB
• Express
• React
• Node.js
• Stripe
• Tailwind CSS
• Framer Motion
• JWT
• Mongoose

Problem

Photo-product businesses need a buying flow that lets customers customise prints, frames, and canvases before checkout — most off-the-shelf e-commerce templates don't support live product customisation or per-product dynamic pricing.

Solution

A full MERN platform with an in-browser product editor (upload, crop, frame preview), Stripe checkout, JWT-protected customer/admin areas, dynamic per-product pricing, and an admin dashboard covering orders, products, blog, and basic analytics.

Features

• Custom photo upload with crop and zoom controls
• Live preview for prints, framed, canvas, collage, and wedding products
• Cart with per-item customisation persisted across sessions
• Stripe-powered checkout
• JWT authentication for customers and admins
• Admin dashboard: orders, pricing, blog, and product management
• Dynamic pricing rules per product type and size

Architecture

• React + Tailwind frontend with Framer Motion micro-interactions
• Express REST API with route-level JWT middleware
• MongoDB via Mongoose for products, users, orders, and content
• Stripe for payment intents and webhook order finalisation
• Cloud image upload pipeline for customer photos

What I learned

• Designing data models that survive customer customisation without bloating order documents.
• Webhook-driven order state vs. optimistic UI — getting both to agree.
• How much UX matters for an editor-style flow.