I Created a SaaS Only Using No Code Tools - Part 2
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.
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?
What Airtable tables and fields make the portfolio feature work?
Why are Airtable roll-up fields used, and how are they encoded for Webflow?
How does Zapier update Webflow data without republishing the site?
What role does the small JavaScript snippet play in the UI?
Review Questions
- What specific hidden field in Webflow carries the member identity into the form submission, and why is that necessary for Airtable lookups?
- How do the two roll-up lists in Airtable get transformed into a structure JavaScript can render as a table of holdings?
- 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
Airtable is used as the data store: one Members table for identity and one Portfolio table for holdings linked by a member reference.
- 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
Zapier creates a new Portfolio asset record on each form submission using the selected crypto symbol/name and entered amount.
- 4
Airtable roll-up fields aggregate many Portfolio rows into two comma-separated lists (symbols and amounts) for each member.
- 5
Zapier updates Webflow live using a Webflow API PATCH request to the correct CMS item, authenticated with a Bearer API token.
- 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
JavaScript performs the final rendering step by splitting the stored lists and cloning a template row for each holding.