The 30-Minute CMS - From Google Sheets to Live Website with NodeScript

Problem

I needed to help out a friend divulge her music online. However, she is someone who wants to focus on the music, and not so much the web presence, content and email marketing.

She needed something simple to update her music links, and tour dates on the go, and share these with show-goers.

Solution

I decided to create a simple Nuxt3 website, hosted on Netlify for my musician friend. However, I needed a way for her to edit the website content, without asking me every time. And not only that, but since this was a favour for a friend, I didn't want to spend too much time on a solution. So I needed something quick, that makes complex integrations feel simple.

That's where NodeScript enters the scene.

It allowed me to create a simple CMS, email "database", and email marketing automation in minutes, rather than hours.

The main parts of the solution:

1. NodeScript platform for integrations
2. Netlify for hosting website
3. Google Sheets as a CMS and Database
4. Brevo for email marketing
5. QR Code linking to website to give out during shows

This is how the CMS works:

NodeScript enabled me to rapidly connect a Google Sheets to a Nuxt3 website hosted in Netlify.

Let me take you to Laya's tour page:

The information on the table above, comes from a sheet within a Google Spreadsheet:

My friend is able to quickly update any tour information on her phone, in case something changes mid-tour.

And the magic happens in NodeScript itself. There we can create integrations in a canvas, which they call "graphs". Its a low-code solution, where the main mindset is to think in terms of:

Input --> Process --> Output

And we can create those by linking various building blocks called "nodes" together.

Here is the graph I used to create the above solution:

That's it. 5 nodes: 1 input, 3 process steps, 1 output.

1. Input: in this case they are spreadsheetId, API keys, and Google OAuth Access Token.
2. Process: NodeScript offers an out of the box solution for accessing Google Sheets API. A GET module is already available for me to just plug in some inputs, and get the information from the spreadsheet. I can then process these with other nodes such as Array / Slice, and also handle any errors at this stage.
3. Output: Here is the result from running the process above. And most importantly, I can actually use this, without needing to set up a backend in my project. No need to set up AWS or Netlify functions, or host anything in our own server... You just connect a few nodes together, click "Publish" and voilá. Your endpoint is out in the wild for you to use. (For more "important" solutions, you can set up security measures here too).

I can then use the endpoint I just published within the website:

const response = await this.$axios.get(
    'https://9v67hlhi.run.nodescript.dev/tour'
)
this.tourData = response.data.value

This is the update speed it works at:

I have done the same for Laya's social and music links. So if they ever change, my friend is able to easily edit them without logging into anything separate from her google suite, and without needing to ask me to re-publish her website :D

---

How the Email Capture works:

Ok, so the simple CMS was simple. What about gathering fan emails, and creating an email marketing list? We also used NodeScript for this too.

In the website's contact section, people can input their first name and email, and subscribe to Laya's mailing list.

These contacts are saved in 2 places:

1. Brevo, an email marketing tool
2. Google Sheets (just in case there's any failure, loss of login, etc, on the above).

1. Populating Google Sheets

This is the simpler solution, since NodeScript offers support for Google Sheet's API. In this case I used the Google Sheets / Values / Append node. Here's the graph:

Same concept. Input --> Process --> Output.

But in this case, the inputs comes from a trigger in the website. Here's what it looks like in motion:

When the user hits subscribe. In my website I fetch the relevant endpoint to populate the google sheets.

2. Populating Brevo

Brevo is an email marketing tool which helps people send automated emails to their subscribers. These can be in the form of newsletters, campaigns, transactional emails, etc.

If NodeScript does not yet support a particular API out of the box, you can still access it with a Web / Http Request node. Here's the graph that helps me add contacts to Brevo:

I then fetch this on the website side:

await fetch('https://n923vvlwx1s08tmh.run.nodescript.dev/laya/add-to-brevo-contacts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
            'api-key': BREVO_API_KEY,
        },
            body: JSON.stringify({
            name,
            email,
            LAYA_BREVO_API_KEY: BREVO_API_KEY,
        }),
})

And here's it in motion:

In the field with QR codes

We then linked the website URL to a QR code. Printed these out, and shared them amongst the people who frequented the show.

Summary

We used NodeScript platform to create a simple CMS, database and email capture integration for a musical artist.

Here's all our endpoints we used in the website:

We can also monitor the state and responses of these in their inbuilt monitoring page:

All in all, the project took around 6 hours to complete. 30 minutes with NodeScript. The rest struggling with the CSS for the website :D

Next steps:

The improvements possibilities here are vast. With more time, we could explore:

• Logging the QR code scans via another endpoint
• Log those click on the social links, or albums instead of sharing their email
• Send out automated confirmation emails from NodeScript

---

Written by: Christelle Van Sebroeck, Software Engineer at UBIO