Projects

Overview

A complete e-commerce solution built from the ground up for a custom apparel and accessories brand targeting the Australian market. Customers can browse products, create custom designs using an AI-powered canvas editor, and checkout with Stripe — all wrapped in a modern Vue 3 SPA with a comprehensive admin panel.

AI-Powered Design Studio

The flagship feature is a full canvas editor built with Fabric.js 7, allowing customers to design their own apparel:

• Text, shape, image, and pattern tools with full formatting controls
• AI Design Assistant — conversational AI chat powered by OpenAI (GPT Image 1 / DALL-E 3) that generates and edits images directly on the canvas
• Content moderation — local keyword matching + OpenAI moderation API with trademark detection (Nike, Disney, etc.) and profanity filtering with leetspeak normalization
• Smart pricing engine — real-time price calculation with surcharges for AI generation ($5), extra colours ($2 per colour over 2), custom uploads ($3), and design complexity (10+ objects)
• DPI validation for print-quality enforcement
• Undo/redo, zoom/pan, and real-time mockup preview
• Admin approval workflow — designs go through review with approve, reject, or change request options; async print file generation via job queues

E-Commerce Core

• Product catalog with variants (size/colour), categories, audiences (Men's, Women's, Kids, Unisex), and multi-image galleries
• Shopping cart with persistence, cart merging on login, and design attachment
• Stripe checkout with Apple Pay, Google Pay, and Link — webhook handling with idempotency and duplicate prevention
• Order lifecycle — status management, tracking numbers, refunds with pessimistic locking to prevent double-refunds
• Stock management with audit logging and automated low-stock email alerts

Gift Cards & Coupons

• Gift card system — purchasable ($10–$500), email delivery with personal messages, balance tracking, 3-year expiry, admin management
• Coupon engine — percentage or fixed discounts, date ranges, per-user and global usage limits, minimum order thresholds, first-order-only coupons, sale item exclusion, category-specific targeting

Reviews & Social Proof

• Customer reviews with 1–5 star ratings, helpful vote system, admin moderation (approve/reject/reply), and automated review request emails post-delivery

Admin Panel

• Dashboard with sales charts (Chart.js), recent orders, low-stock alerts, and popular products
• Full CRUD for products, orders, designs, users, coupons, gift cards, banners, and categories
• Design review queue with approval workflow and change request tracking
• Analytics — sales trends, top products, revenue reports, CSV exports
• Activity logs — comprehensive audit trail for all admin actions with filtering and export
• Email logs — track all 22 transactional email types
• Settings panel — shipping rates, GST, design pricing, AI limits, business info, social links

Security & Authentication

• Sanctum token-based API auth with Google OAuth 2.0 social login
• Two-Factor Authentication (TOTP with recovery codes), enforceable for all admin accounts
• Role-based access control (Customer / Staff / Admin) via Spatie Permission
• GDPR compliance — data export and account deletion
• Stripe webhook signature verification with cache-based idempotency
• Encrypted database fields for sensitive data (phone, addresses)
• Sentry error monitoring with structured event logging

Architecture

• 31 Eloquent models, 46 controllers, 16 service classes, 6 Pinia stores, 115 Vue components
• Service layer architecture — AiChatService, CheckoutService, DesignPriceCalculator, GiftCardService, EventLogger, InvoiceService (PDF generation via DOMPDF)
• Async job queues for print file generation, supplier packs, and marketing emails
• AWS S3 integration for file storage (designs, mockups, invoices, avatars)
• 38 database migrations covering full commerce, design, and audit schemas

Overview

Designed and built a professional website for Manon Distave, a qualified psychopedagogue (educational psychologist) based in Liège, Belgium. The site markets her services to four distinct audiences — children, parents, university students, and teachers — with dedicated pages tailored to each.

Client Requirements

The client needed a site that felt warm and approachable (not clinical), was easy to update without developer help, worked beautifully on mobile, and clearly communicated her services to different audience segments. Budget and timeline were tight — the flat-file Statamic CMS approach was the perfect fit.

Design & Branding

• Custom colour palette — beige-rose backgrounds, sage-green accents, powder-pink hover states, warm taupe text — chosen to feel welcoming and professional without being sterile
• Typography trio — Playfair Display (headings), Raleway (subheadings), Nunito Sans (body) — balancing elegance with readability
• Custom CSS animations — floating profile photo, card hover lifts, button ripple effects, fade-in page transitions
• Mobile-first responsive layout with Alpine.js hamburger menu

Audience-Segmented Content

Each service page is tailored to its audience with specific language, objectives, and process steps:

• Children — 6 learning objectives, playful approach description, 3-step process
• Parents — 6 guidance areas, emotional support section, common challenges checklist, parent testimonial
• Students — 4-service grid (methodology, proofreading, professional posture, study techniques), 4 key benefits
• Teachers — 6 professional development objectives, collaborative approach, 3-step process

Content Management

Every piece of text on the site is editable from the Statamic Control Panel — 13 global content sets covering profile, services, testimonials, contact details, pricing, analytics settings, and site branding. The client can update everything without touching code.

Key Features

• Contact form with name, email, phone, service type selector, and message — honeypot spam protection, HTML email notifications to the client with reply-to set to the sender
• Cookie consent management with configurable analytics (Plausible or Google Analytics)
• SEO — custom meta descriptions per page, Open Graph tags, semantic HTML, proper heading hierarchy
• Image optimization via Glide (WebP conversion, quality control)
• Flat-file architecture — no database required, content version-controlled in Git, lightweight and portable
• Testimonials integrated throughout — parent and student success stories for social proof

Outcome

Delivered a polished, professional website that the client manages independently. The audience-segmented approach clearly communicates value to each visitor type, and the warm design reflects the client's approachable professional style.

Overview

Built as the online presence for CedouDev, this website serves as both a professional business site for contracting clients and a portfolio for prospective employers. Every piece of content is managed through Statamic's flat-file CMS.

Key Features

• Dual-purpose design — business-first presentation (services, projects, CTAs) with full professional background accessible (experience, education, resume download)
• Dynamic collections — Services and Projects are Statamic collections with blueprints, making it easy to add new entries from the Control Panel
• Contact form with inquiry type routing (Project Inquiry / General Question / Job Opportunity), company field, honeypot spam protection, timestamp-based anti-spam, and real-time Slack notifications colour-coded by inquiry type
• SEO — Schema.org JSON-LD (ProfessionalService), Open Graph and Twitter Card meta tags, per-page meta descriptions, canonical URLs
• Responsive design — mobile-first with Tailwind CSS 4, Alpine.js for interactive navigation
• Performance — Glide image optimization, Vite asset bundling, minimal JavaScript footprint
• Conditional shop integration — toggle-able shop link in navigation, ready for when the e-commerce platform goes live