Skip to main content

Starts at 0:22, after the intro.

Lesson 4 of 7 · 7:02 · Intermediate

Data Tables for AI-built apps

Use Data Tables as the database for an app you build with Claude Code.

Where this fits

Your AI tool knows Memberstack now. This lesson uses it to build an app with Data Tables as its database.

By the end of this lesson you can

  • Create a Data Table and add fields like text, numbers and references
  • Set who can create, read, update and delete records with simple rules
  • See how every record tracks the member who created it automatically
  • Watch a live app save and show posts from a Data Table

Heads up: The demo is a Next.js app built with Claude Code, not Webflow. The dashboard steps are the same either way. It was recorded while Data Tables were in beta, so the sidebar may look different now.

Lesson notes

How it works

What Memberstack Data Tables are

Data Tables are a database inside your Memberstack app. A table is a collection, like posts. Each record is a row, and each field is a column, like content. Because Data Tables use the same members and logins as the rest of Memberstack, you don't need a separate database or a separate auth system.

Every record automatically gets a unique ID and a note of which member created it. You don't add fields for that. When a logged-in member creates a record, the server sets the creator itself, so a member can't pretend a record belongs to someone else.

How to create a table and add fields

The demo is a Next.js app built with Claude Code, but the dashboard steps are the same for any front end.

  1. Open Data Tables in the left navigation of your Memberstack dashboard.
  2. Create a table and name it, for example posts.
  3. Set the access rules for create, read, update and delete (see below), then create the table.
  4. Open the table, click Add Field, name it content, choose Text and mark it required.
  5. Add more fields or tables as you need them, and link them with reference fields.

How access rules keep records safe

Each table has four rules: who can create, read, update and delete records. Options include public (anyone), members only, member owner (only the member who created the record) and admin only. Update and delete can be limited to the record's owner. For the posts table, a sensible setup is: any member can create, any member can read, members can update their own and members can delete their own.

These rules are enforced on Memberstack's servers, not in your page code. That is the row-level security you would normally write by hand in other databases. Your app can't accidentally show or change records a member isn't allowed to touch.

Field types include text, filterable text, unique text (useful for usernames), number, decimal, boolean, date, email, URL, and references to other records or to members.

How your app reads and writes records

Your app talks to Data Tables through the @memberstack/dom package, initialised with your public key from Dev Tools in the dashboard. createDataRecord({ table, data }) adds a record, queryDataRecords({ table, query }) lists and filters them, updateDataRecord({ recordId, data }) edits one and deleteDataRecord({ recordId }) removes one. In Webflow the same methods are on window.$memberstackDom. Once you tell your AI tool the table name and fields, it can write this code for you.

Before you move on

0 of 4

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: Next, you’ll build a full app with Claude Code and Memberstack, from an empty folder to live.

Chapters

Common questions

Do I need a separate database to use Memberstack Data Tables?

No. Data Tables live inside your Memberstack app and use the same members and logins, so you can store app data without another database or auth provider.

How do Memberstack Data Tables handle row-level security?

Each table has create, read, update and delete rules you set in the dashboard, such as members only or member owner. Memberstack enforces them on the server, so members can only reach the records the rules allow.

Do I need to add a created-by field?

No. Every record automatically gets an ID and records which member created it.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    I am so excited to share this with you today. So, I love vibe coding. You probably already know that about me. But one thing that I don’t love about vibe coding is off payments and databases. Now, Memberstack has been able to make the off and payment side easy for me. But there was no databases and that all changes now with Memberstack data tables. I am so excited to show this to you. So, let’s get right into it. First things first, I just set up here a simple kind of using shad CN page. This is going to be like a Twitter light,

  2. 0:31

    let’s say, for for demo purposes. We have a signup page, a login page, and we have this like Twitter feed looking thing. But this isn’t connected to anything. There’s no Memberstack, there’s no databases, there’s no anything. Right now, we are going to set all of that up super quickly with Memberstack. So, first things first, I have a Memberstack app over here. I have cloned the nextjs boilerplate from versel in order to make this work and I am using claw code. Along with that we have the Memberstack AI documentation.

  3. 1:03

    The link to all of these things that I’m saying are in the description. And this is how AI is going to understand how to work with Memberstack. So that’s what I have set up right now. And we have more in-depth videos coming soon that are going to show you really the entire process. But in this case I want to show you data tables and how awesome they are. So let’s go ahead over here and we can see that this is set up. I’m going to say can you install the Memberstack DOM package at latest just so we get you know the most recent update. Here are my

  4. 1:36

    credentials. Then can you make O work? So, OTH is such a pain with vibe coding and like quite literally all you need to do is give it context and Memberstack and say like make O work like the most caveman prompt ever and you’re you’re good to go. So, let’s go to dev tools over here and get the app ID and the public key so that it knows what to do. And then I am going to put it in plan mode so that it can figure out what it is going to do. All righty. So, it’s

  5. 2:07

    made its plan and everything looks good to me. I am going to say yes and auto accept edits. So, this should get our authentication working so that these beautiful login and signup pages actually work. And again, that is usually such a pain to do with Vibe coding. So, this should just be able to oneshot it or hopefully with minimal errors. All right, so one prompt and we are good to go apparently. Let’s go ahead and test it out. So, I’m going to click get started up here, and then I’m going to just enter some stuff. So, it

  6. 2:39

    does say we have two issues. I’m not sure if that is going to cause us problems, but we’ll find out. I agree. Okay, so there we go. We are now here. Let’s go ahead and check out our Memberstack dashboard. And just like that, we have O working already. So, I’m going to go and quickly figure out what these two errors are and fix them. Shouldn’t take me too long. All right, there we go. So I just copy and pasted the errors and we are having no more errors. So this is working off is good as we can see Julian up here. All that is good. I can log out. I can make

  7. 3:10

    a new account. I can do whatever I want to do. So now let’s actually go ahead and get the data tables working. So I’m going to head back over here into Memberstack. And if you can’t see data tables in your lefth hand sidebar, just go to the end of your URL like this and type in beta data tables. And it will take you to the new data tables feature. Just like that. And as you can see, we have absolutely nothing set up. And I’m just going to keep this simple and just have like a post wall with nothing else. We’re not even going to link it to the

  8. 3:40

    members for now for the sake of simplicity. Yes, data table’s fine. Okay. And we’re going to call this posts. Here is a really big thing. So if you’ve used Superbase or anything like that with Vive coding, role level security is not easy if you don’t know what you’re doing. And I for one don’t know what I’m doing. So this is why Memberstack makes me so happy because all I need to do is say any member can create one. I could also make it public or only the admin. I want to say anyone can read it or any member. Let’s make it any member. Update rule. Members can update their own and members can delete

  9. 4:10

    their own. That is how I want and that is all I need to configure. It is now easy and secure. So I’m going to click create table and then I’m going to open the table. And I don’t even need to configure which member created it or an ID because that just happens automatically with every single record. The only thing I’m going to want to do here is click add a field and call it content. And we’re going to keep it text. So we have text, filterable, unique. So this is good for things like usernames and stuff like that. We have numbers, decimals, booleans, dates, references, emails, and URLs. Again, I

  10. 4:43

    only need text. Yes, it does need to be required. Add. There we go. Now we have text. And along with that, let’s say we have other tables. So I actually built a Twitter clone with far more features than this. And it has things like likes, reposts, and so you can link things throughout your database just like you could with any relational database. So I have posts table with the content field. I’m going to go ahead and say now I’ve created the posts data table in Memberstack and it has the content text field.

  11. 5:19

    Can we make the posting and the displaying of posts work with Memberstack data tables? Let’s do that. And let’s set it to plan mode. All right. So it has made this plan here. Memberstack post integration plan. Create a post service. Update post creation form, replace mock posts, real-time features, enhance features. Beautiful. All right, that all sounds good to me. Let’s say yes and accept edits, and then let’s just go over here, sit back, and let it do its thing. All

  12. 5:51

    right, so it has said that it set it up. Let’s go ahead and try it out. I’m just going to make a post right here, and say hello world post. Look at that. It seems to be working. I’m going to go ahead and refresh. Loading. We see hello world. We can also see that it is like super super fast. Now I’m going to go over here into my data tables and refresh. And just like that, we can see hello world which was created by Julian on this date. Let’s go ahead and try one more. How’s it going? And refreshing again.

  13. 6:24

    Just like that, we have our off and database set up in literally just a few minutes. Now we can go ahead and add new fields, new tables, new relationships to make well anything that you want to make. At the end of the day, this is a relational database. All we’ve done is made it easy for you to understand so that you can vibe code something and launch it with confidence. There are going to be a lot of videos coming up showing how you can use AI to launch successful web apps. I hope you like this one and I’ll see you in the next

  14. 6:55

    video.

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.