Back to Projects
ProjectWeb App02

Clayton C Music

Clayton C Music screenshot 1
Clayton C Music screenshot 2
Next.jsTypeScriptShopifyGSAPn8nResendTailwind CSS

A production client website built for a professional reggae artist. End-to-end delivery from requirements to deployment and ongoing maintenance. Shopify Storefront API integration for merchandise, GSAP scroll-driven animations, and streaming platform deep links. The backend runs on n8n: a webhook-driven workflow handles contact forms, newsletter signups, and booking inquiries, routing each to branded Resend emails and logging to Postgres. Demonstrates full-stack ownership from frontend polish to backend automation.

Code Snippets

My Thoughts

Why I Built This

My brother is a solo reggae artist and needed a site that truly represented his music, style, and story. This is a living streaming hub, merch store, and event listing all in one.

Architecture

The frontend is Next.js with TypeScript, GSAP for scroll-driven animations, and a Shopify Storefront API integration for merchandise. The backend runs on n8n: an automation workflow handles the contact form, newsletter signups, and booking inquiries. Submissions hit a webhook, get validated, then route to the artist’s email via Resend with branded templates. Newsletter signups sync to a subscriber list in Postgres for future campaigns.

Proud Code

  1. The event filter logic cleanly splits past and upcoming shows based on the current date, then animates them into a responsive grid with Framer Motion.
  2. The n8n backend workflow is the real engine. A single webhook catches contact, newsletter, and booking submissions, branches by type, validates the input, sends confirmation emails through Resend, and logs everything to Postgres. Zero manual work on the artist’s end.