🌌 NovaProject – Full Stack Behind Nova Detailing

This repo is the map of the whole system behind
thenovadetailing.ca – how the frontend, CMS, and serverless pieces work together.

It’s not an app by itself.
This is where I explain how everything connects.

---

🔗 Core Links

• Live site: https://www.thenovadetailing.ca
• Frontend repo (Astro site): https://github.com/liamkeats/nova-detailing
• CMS repo (Sanity Studio): https://github.com/liamkeats/nova-studio

---

🧱 High-Level Architecture

                    ┌───────────────────────────────┐
                    │           Nova Studio         │
                    │       (Sanity CMS – gallery   │
                    │        & structured content)  │
                    │  Repo: nova-studio            │
                    └──────────────┬────────────────┘
                                   │ GROQ / API
                                   │
                                   ▼
┌───────────────────────────────┐        ┌───────────────────────────────┐
│       Nova Detailing Site     │  HTTP  │       Netlify Functions       │
│   (Astro + HTML/CSS/JS)       │◄──────►│  Twilio, Google Reviews,      │
│   Repo: nova-detailing        │        │  Sanity helpers, form hooks   │
└──────────────┬────────────────┘        └───────────────────────────────┘
               │
               │ Public users
               ▼
        https://www.thenovadetailing.ca

Three main layers:

1. Nova Detailing (frontend) – everything the user sees.

2. Nova Studio (Sanity CMS) – where I manage gallery content and structured data.

3. Netlify functions – the glue for dynamic behaviour (SMS chat, Google reviews, notifications, API access).

🚗 nova-detailing – Frontend / Main Site

#Repo: https://github.com/liamkeats/nova-detailing

This is the actual marketing site at thenovadetailing.ca.

What lives here

• Hero, About, Services, Service Area, Reviews, Gallery, Contact

• Custom layout and responsive CSS (tuned for phones first)

• JS for interactive pieces:

  • “Chat Now” widget

  • Google Reviews widget

  • Form behaviour and small UI touches

🔥 Interesting pieces

💬 Chat Now → SMS pipeline

• The site renders a floating “Chat Now” button.

• Clicking it opens a small chat panel where users enter a message (and usually their name/phone).

• Frontend sends the payload to a Netlify function inside this repo.

• That function uses Twilio to send the message as an SMS to my phone.

• Result: real-time conversation starting from the website without building a full chat backend.

⭐ Custom Google Reviews widget

• Instead of dropping in a third-party iframe, I built my own widget.

• A Netlify function fetches data from Google (rating, total review count, individual reviews).

• The frontend renders:

  • Overall rating + total review count

  • An AI-style summary line of what customers like

  • Individual review cards (name, rating, text, time)

  • “Review us on Google” button

• This gives me full control over the look and behaviour and keeps it on-brand.

📝 Contact form wired for real bookings

• Fields match what a detailer actually needs:

  • service type
  • name
  • phone
  • email
  • vehicle details
  • preferred date
  • notes

• Submissions go to a Netlify function which can:

  • send notifications

  • log data elsewhere

• Makes the site actually usable as a booking funnel, not just a static brochure.

🖼 Gallery integration

• The Gallery page and detail views are designed to work with structured data coming from Sanity.

• Each card and detail page is built around the galleryPost shape defined in the Studio (see below).

🧩 nova-studio – Nova Studio (Sanity CMS)

Repo: https://github.com/liamkeats/nova-studio

This is the content brain for Nova Detailing.

What it controls

Right now the main focus is the gallery, but the Studio is designed to grow with more content types.

galleryPost documents (core type)

• title – job title

• slug – URL-friendly identifier

• detailType – interior / exterior / full detail / etc.

• vehicleMake, vehicleModel, vehicleYear, vehicleColor

• beforePhotos / afterPhotos – ordered arrays of images

• date – when the job was done

• summary / description – text about the work

• featured – flag for highlighting certain jobs

All of this is defined in Sanity schema files under schemaTypes/ in the nova-studio repo.

How the frontend uses it

• Nova Studio pushes content to the Sanity Content Lake.

• The frontend (or a Netlify function) queries that content via GROQ.

• The Gallery page and individual gallery detail pages are rendered based on whatever is in Sanity.

• Because the structure is centralized in the Studio, I can evolve the content model without rewriting the entire frontend.

☁️ Serverless / Integration Layer (Netlify Functions)

Netlify functions live in the nova-detailing repo, but I treat them as their own “integration layer”.

They handle anything that’s not just static HTML:

📲 Twilio SMS (Chat Now)

• Accepts a message payload from the frontend.

• Builds a nicely formatted SMS and sends it to my phone via Twilio.

• Optionally can CC other numbers if I want multiple people on the team notified.

⭐ Google Reviews

• Calls Google’s APIs (or a proxy) to pull live review data.

• Normalizes the response into a clean shape for the frontend.

• Powers the custom reviews widget instead of using an embedded third-party widget.

📩 Form notifications

• Contact form submissions are POSTed to a Netlify function.

• That function can:

  • send emails

  • send SMS

  • log to another service, etc.

• This keeps secrets (API keys, phone numbers) out of the frontend.

🧷 Sanity helper endpoints

• If I don’t want the frontend talking directly to Sanity, a function can:

  • run GROQ queries

  • strip out unnecessary fields

  • return just what the site needs.

All of this rides on Netlify’s infrastructure, so there’s no separate server to manage.

🔄 End-to-End Flow

1. I create or update a galleryPost in Nova Studio (nova-studio).

2. Sanity stores that document in the Content Lake.

3. The Nova Detailing frontend (nova-detailing) or a Netlify function fetches:

   • list of posts for the Gallery grid

   • individual post data for detail pages (by slug)

4. Astro renders pages that match the site’s design and branding.

5. Users see the updated gallery at thenovadetailing.ca without me touching HTML manually.

🧠 Why It’s Structured This Way

🧩 Separation of concerns

• Frontend repo focuses on UX, layout, and interactions.

• Studio repo focuses on how data is structured and edited.

• Functions handle all API keys and third-party integrations.

✅ Real-world ready

• SMS chat instead of a fake contact link.

• Google Reviews pulled into a custom widget, not just a screenshot.

• Content stored in a CMS, not hard-coded in templates.

🚀 Easy to grow

• I can add new content types in Sanity (e.g. services, FAQs, blog posts).

• I can hook new functions into other APIs (CRM, email marketing, etc.)

• The overall architecture doesn’t need to change – just more building blocks plugged into the same pattern.

🔮 Future Directions

Some things I may add on top of this stack:

• More Sanity content types:

  • services, testimonials, FAQs, “tips & tricks” posts

• Booking pipeline:

  • form → function → calendar/CRM integration

• More automation around follow-ups:

  • SMS or email reminders after a detail

• Analytics / logging around form submissions and chat interactions

• Possible monorepo or stricter shared types between Studio + frontend later on

This repo exists purely to explain the system. The actual code lives in:

Frontend: https://github.com/liamkeats/nova-detailing

CMS: https://github.com/liamkeats/nova-studio

Everything running at https://www.thenovadetailing.ca is a combination of those pieces.