Get AI summaries of any video or article — Sign up free
I Created a SaaS Only Using No Code Tools - Part 2 thumbnail

I Created a SaaS Only Using No Code Tools - Part 2

Simon Høiberg·
5 min read

Based on Simon Høiberg's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.

TL;DR

Airtable is used as the data store: one Members table for identity and one Portfolio table for holdings linked by a member reference.

Briefing

A no-code SaaS crypto portfolio app comes together by chaining Webflow, Memberstack, Airtable, Zapier, and a small slice of JavaScript—so users can add holdings and see their updated balances instantly. The core move is storing each user’s crypto “assets” in Airtable, then rolling those records up into a format Webflow can display on a per-member basis.

After the earlier setup handled sign-up and paid plans, the build adds Airtable as the data layer. A new Airtable base is created with a Members table to identify users from Memberstack, and a Portfolio (assets) table to store holdings: crypto name, asset symbol, amount, and a member relationship linking each holding back to the correct user. Zapier becomes the glue: when a Webflow form submits an “add crypto” action, Zapier receives the cryptocurrency and amount plus a hidden Webflow member ID, looks up the matching Airtable member record, and creates a new Portfolio asset record.

The next challenge is getting Airtable’s many asset rows back into Webflow. Zapier uses Airtable roll-up fields to aggregate all portfolio records for a user into two comma-separated lists—one list for crypto symbols and another for amounts. The approach relies on positional mapping: the nth symbol corresponds to the nth amount. Once those roll-ups update, Zapier finds the correct Webflow CMS item for that member and updates a dedicated Webflow field (named “crypto assets” from the earlier setup) via Webflow’s API using a PATCH request. This avoids republishing the Webflow site and lets the portfolio update live after each form submission.

On the front end, Webflow handles the layout and conditional visibility: an “empty portfolio” message shows when the crypto assets field is empty, while a template row renders when holdings exist. Because Webflow can’t natively split the comma-separated symbol/amount strings into repeated rows, a small JavaScript snippet runs on the page. It reads the hidden “crypto assets raw data” text, splits it into two lists, clones the HTML template row for each symbol, injects the symbol and corresponding amount into the right placeholders, and removes the template row from the final output.

The result is a working crypto portfolio experience built without traditional backend code: Webflow provides the UI and form, Memberstack manages identity and paid access, Airtable stores holdings, Zapier orchestrates data flow and API updates, and JavaScript handles the last-mile rendering of dynamic rows. The build also flags practical limitations—especially around Airtable roll-ups and the single-field encoding of symbols and amounts—while still demonstrating a functional, end-to-end SaaS pattern that can be extended for more complex setups.

Cornell Notes

The project builds a crypto portfolio SaaS using no-code tools by storing user holdings in Airtable and pushing updates back into Webflow. Webflow collects a selected cryptocurrency and an entered amount, while a hidden field passes the Webflow member ID so Zapier can associate the submission with the right Airtable member. Zapier creates Portfolio asset records in Airtable, then uses roll-up fields to aggregate all holdings into two comma-separated lists (symbols and amounts). A Webflow API PATCH request updates a “crypto assets” field for the member without republishing the site. Finally, Webflow conditional visibility and a small JavaScript snippet split the stored lists and render one table row per holding.

How does the system connect a Webflow form submission to the correct user record in Airtable?

The Webflow “Add crypto” modal includes a hidden input field named exactly “ms data-webflow member id” (with the attribute “ms data-webflow member id”). When the form submits, Webflow passes that Webflow member ID along with the selected cryptocurrency and amount. Zapier receives the form submission, then runs an Airtable “Find record” in the Members table using that member webflow id value, ensuring the new Portfolio asset record is linked to the right user.

What Airtable tables and fields make the portfolio feature work?

A Members table stores user identity fields tied to Memberstack/Webflow. A separate Portfolio (assets) table stores each holding: simple (asset symbol), crypto name, amount, and a member reference that links back to the Members table. A relationship field (called “assets”) is added to the Members table so each member can have multiple Portfolio records.

Why are Airtable roll-up fields used, and how are they encoded for Webflow?

Each user can have multiple asset rows in the Portfolio table, but Webflow needs a single field value to drive rendering. Zapier uses two roll-up fields—one rolling up asset symbols and one rolling up amounts—into comma-separated lists. The build depends on positional alignment: the nth symbol in the first list corresponds to the nth amount in the second list, allowing JavaScript to pair them correctly later.

How does Zapier update Webflow data without republishing the site?

After Airtable roll-ups update, Zapier uses Webflow’s API with a custom request: a PATCH to “items” for the live collection item. The item ID is set to the Webflow member ID, and the payload updates the “crypto assets” field. Authentication uses a Webflow API token via a Bearer authorization header, generated in Webflow project settings integrations.

What role does the small JavaScript snippet play in the UI?

Webflow conditionally shows a template row when “crypto assets” is not empty, but Webflow can’t automatically split the comma-separated symbol/amount strings into repeated rows. JavaScript reads a hidden text field containing the raw “crypto assets” value, splits it into two lists (symbols and amounts), clones the template row HTML for each symbol, injects the symbol and matching amount into placeholders, appends the new rows to the container, and removes the template row from the page.

Review Questions

  1. What specific hidden field in Webflow carries the member identity into the form submission, and why is that necessary for Airtable lookups?
  2. How do the two roll-up lists in Airtable get transformed into a structure JavaScript can render as a table of holdings?
  3. What Webflow API method and request type are used to update the member’s portfolio field live, and what identifies the correct item to patch?

Key Points

  1. 1

    Airtable is used as the data store: one Members table for identity and one Portfolio table for holdings linked by a member reference.

  2. 2

    Webflow’s “Add crypto” form passes the Webflow member ID via a hidden input so Zapier can find the correct Airtable member record.

  3. 3

    Zapier creates a new Portfolio asset record on each form submission using the selected crypto symbol/name and entered amount.

  4. 4

    Airtable roll-up fields aggregate many Portfolio rows into two comma-separated lists (symbols and amounts) for each member.

  5. 5

    Zapier updates Webflow live using a Webflow API PATCH request to the correct CMS item, authenticated with a Bearer API token.

  6. 6

    Webflow conditional visibility shows an empty-state message when the portfolio field is empty and a template-driven table when it isn’t.

  7. 7

    JavaScript performs the final rendering step by splitting the stored lists and cloning a template row for each holding.

Highlights

The build’s “live update” trick is a Webflow API PATCH call from Zapier, updating a member’s CMS field without republishing pages.
Airtable roll-ups turn multiple asset records into two aligned comma-separated lists, enabling symbol/amount pairing by position.
A single hidden text field plus a small JavaScript loop is what turns stored strings into repeated table rows in Webflow.
The hidden Webflow member ID field is the linchpin that keeps every portfolio record tied to the right user across systems.

Topics

Mentioned