SunnyDayz
Dropship e-commerce store for outdoor family gear — custom admin dashboard, AliExpress product import pipeline, and Stripe checkout.
Overview
SunnyDayz is a dropshipping e-commerce store selling outdoor family gear — beach toys, camping accessories, backyard games. Built as a 50/50 partnership, the goal was to move fast: source products from AliExpress and CJ Dropshipping, mark them up with a clean storefront, and handle fulfillment through supplier APIs.
The real engineering lives behind the storefront. A custom admin dashboard handles the entire product lifecycle: import a product URL, auto-download images to a self-hosted CDN, calculate pricing with live margin tracking, manage variants, and push to the store — all without touching code.
Architecture
- Storefront: Next.js 16 with App Router, server components for SEO, Tailwind CSS 4 for styling. Force-dynamic pages so products appear immediately after being added in admin.
- Admin API: Express server on Hetzner (port 18830) with JWT auth. Handles product CRUD, image uploads via multer + sharp, and import pipelines.
- Image CDN: Self-hosted at img.sunnydayz.co — nginx on Hetzner, Cloudflare-proxied. Images are processed with sharp (resize, optimize) on upload.
- Database: MongoDB Atlas with collections for products, variants, costs, and marketing assets.
- Payments: Stripe Checkout with variant-aware line items. Webhook-driven order confirmation.
- Email: Resend for transactional emails (order confirmations, shipping updates) via notify.sunnydayz.co.
Product Import Pipeline
The killer feature of the admin is the import workflow. Paste an AliExpress or CJ product URL and the system:
- Fetches product data via the AliExpress Dropshipping API (HMAC-SHA256 signed requests)
- Downloads all product images and processes them through sharp
- Uploads optimized images to the self-hosted CDN
- Auto-calculates pricing: 3x retail from supplier cost, 4x strikethrough
- Extracts variants (size, color) with per-variant cost tracking
- Creates the product in MongoDB, ready to go live
A Playwright-based scraper on the Mac Mini serves as fallback when the API doesn't return full data.
Admin Dashboard
- Product management: Full CRUD with image gallery, drag-to-reorder, video support, and active/inactive toggle
- Pricing & costs: Per-product and per-variant cost tracking with live margin display (green ≥3x, yellow ≥2x, red below)
- Business overview: Live stats from the database — total products, active count, categories, revenue metrics
- Marketing tab: Uploaded creative assets and marketing plans
- Category management: Dynamic categories with product counts
Storefront Features
- Image gallery with arrow navigation on product cards and detail pages
- Thumbnail strip with active indicator
- Video support in product galleries
- Variant selector button group (size, color, style)
- Responsive design with beach-day aesthetic — coastal blues, sandy gold, Pacifico font