An artist site the artist can update himself.

An official artist site for musician and producer Grant Sing: music videos, an eyewear shop, events and contact, plus an admin area for updates.

Visit grantsing.com Build something like this

Who it is for: Musicians and independent artists who want one official home online.
The problem: Grant Sing needed his music, videos, eyewear line and contact details in one place, without calling a developer for every new release.
What they get: An official site with music videos, a shop and contact form, plus an admin area for updating content.

9Products in the shop

7Types of content the site reads

The challenge

Grant Sing is a musician and producer. He needed one official home for his music, his videos, his eyewear line and his contact details, and one that he could keep current without calling a developer for every new release.

The system

We built a website backed by a database. When a visitor loads the site, it reads tracks, videos, gallery items, events, products and the upcoming release from that database. Messages from the contact form are saved to the same database. A sign-in admin area edits that content directly. Videos play out to YouTube, and each Buy Now button goes to a Square payment link, so the site does not handle card details.

Outcomes

9 products in the shop (grantsing.com/products)
7 content tables read by the site

Step by step

How the site works, step by step

This shows how a fan's visit works, and how a new release gets onto the site without a developer.

A fan opens the site
What happens
The site loads and reads its tracks, videos, gallery, events, products and upcoming release from the database.
Who or what does it
The React website and Supabase, the database service.
Why it matters
What fans see always comes from the current records.
The fan watches a video
What happens
Fans use the music video carousel, and videos play out to YouTube.
Who or what does it
The site and YouTube.
Why it matters
Fans watch where the videos already live, and the site stays simple.
The fan buys eyewear
What happens
Each Buy Now button goes to a Square payment link.
Who or what does it
Square, the payment company.
Why it matters
The site does not handle card details.
A visitor gets in touch
What happens
The contact form saves each message to the same database. The site also offers custom-order enquiries for eyewear.
Who or what does it
The visitor and the database.
Why it matters
Messages sit in one place, in the admin area.
The artist updates the site
What happens
After signing in, the admin area edits releases, videos, gallery, events and shop items directly.
Who or what does it
Whoever holds the admin sign-in.
Why it matters
A new release does not need a developer.

Architecture

How the system fits together

01 / 04 Visitors

VisitorsWatch, shop and get in touch.→ React site

02 / 04 The site

React siteThe public website.→ Supabase → YouTube · videos → Square checkout · Buy Now
Admin areaSign-in area for editing content.→ Supabase · edits content

03 / 04 Content records

SupabaseTracks, videos, gallery, events, products and messages.

04 / 04 Outside services

YouTubePlays the music videos.
Square checkoutTakes payment on Buy Now links.

The eyewear shop. Buy buttons link to Square.

Key features

Black and gold design with animated audio bars in the hero
Music video carousel
Luxury eyewear shop with product photos, descriptions and custom-order enquiries
Gallery, events and upcoming release sections
Contact form
Admin area for releases, videos, gallery, events, shop items and messages

Delivery

A design and build project. The source is held in a private repository on our GitHub.

Security & infrastructure

The site is hosted on Netlify with Supabase for data and sign-in. Checkout stays with Square. The admin area requires sign-in and was not viewed for this case study.

Built with