Building a No-code 30 Day Challenge Website

5 min readApr 28, 2020

During lockdown I’ve been giving myself a few 30 days challenges:

30 Days of no cheat meals — I wanted to break out of the habit of cheating on my diet on Fridays
30 Days of blogging — I used to write back in the early Medium days and I missed it so I decided to push myself to write every day.

I’ve been tracking the progress using Google Calendar:

I had the idea to make a challenges website where users could submit challenges and readers could one-click add those challenges to their google calendar.

Building the Initial Landing Page

We’re going to use Squarespace to whip up a quick landing page for our challenges site. I’m going with the Bailard template:

Let’s change up the copy to reflect what we’re trying to achieve with this website:

Looking good! Now under our next section, we need to add a code element (don’t worry you’re not going to be coding). In order to do that you need to:

Add a blank section. It will be the first option.
Click the inner text element prompt:

3. Click the Code option

Curating the Challenges Database

Now that we have a website to display our challenges. We also need a database to host our challenges. Introducing Airtable, It’s a spreadsheet on steroids and if you’ve read any no-code article before this one you’ve most likely heard about it.

So let’s create a new workspace/table for 30 day challenges:

Once you’ve done that let’s head on over to the table itself and add a few fields:

I’ve added 5 fields for our challenges:

Title (single text) — Short summary of what the challenge is
Description (long text) — Long-form content on what to do every day
Author (single text) — For the user to add their Twitter for clout
Difficulty (number) — Out of 5 how difficult is this challenge
ID (auto-increment) — Auto incrementing ID just in case ;)

Let’s add some example challenges just so we have something to display:

To add the Table to our site we need to click the “Share” button in the top right corner:

Then you want to click on the create shared view option:

Next click the share current view option:

Then click the create embeddable link button (you think they would make this have less steps???):

And then click the embed in your site option:

You’ll be taken to a page like this:

Set the options to use card layout and disallow filtering for now:

Displaying our Challenges

Then copy the embed code and head back to the website to paste it into the code block:

Your website now should look something like this:

Adding Google Calendar Support

How do we add GCal support without writing any code? Links! Google calendar supports a certain format of URL which can automatically add events to a user's calendar.

Let’s use this free tool to see what the URL should look like:

http://www.google.com/calendar/event?action=TEMPLATE&dates=20200501T010000Z%2F20200530T010000Z&text=30%20Day%20Challenges

As you can see from the above URL we need to add:

action=TEMPLATE — This tells Gcal that this link is for making an event
dates — This is how we set the dates for Gcal to add the event

In order to add this functionality to Airtable we’re gonna have to write a formula. So let’s first make a new field called “Add to Calendar”:

Formulas allow us to manipulate values using functions that Airtable provides. I’ve put together a formula to generate the calendar links:

CONCATENATE('http://www.google.com/calendar/event?action=TEMPLATE&dates=', DATETIME_FORMAT(NOW(), 'YYYYMMDD'), '%2F', DATETIME_FORMAT(DATEADD(NOW(), 30, 'day'), 'YYYYMMDD'), '&text=', ENCODE_URL_COMPONENT(Title))

Now if we go back to our site we’ll see that our entries have “Add to Calendar” links:

Adding Submissions

In order to add submissions, we need to create an Airtable form. To do so create another table and call it “Submissions”:

Email
Title (single text)
Description (long-form text)
Twitter Handle (single text)
Challenge Difficulty (select with options 1–5)

Add the above five fields and then follow the steps we did earlier to embed a table but instead select the form view option:

You’ll be rewarded by seeing a form like this appear:

Click “Share form”, copy the link and add it to your website:

Conclusion

We’ve made it! We have a running site (password is 30days). As you can see we can view and add challenges to our calendar as well as submit challenges using the button in the top right corner.

The world is your oyster now. Go and create some kick-ass sites. Here’s a few of my node-code favorites:

Read More over at https://kamerontanseli.ghost.io/