🚀 Building Your App with Cocoding.ai + Supabase

The Complete Non-Technical Guide

Welcome! This guide will show you how to build a full-featured web application using Cocoding.ai and connect it to Supabase (a powerful backend platform) - no coding experience required.

📚 Table of Contents

1. [What You'll Build](#what-youll-build)
2. [What is Supabase?](#what-is-supabase)
3. [Step 1: Create Your Supabase Account](#step-1-create-your-supabase-account)
4. [Step 2: Create a New Project](#step-2-create-a-new-project)
5. [Step 3: Get Your API Credentials](#step-3-get-your-api-credentials)
6. [Step 4: Set Up Your Database](#step-4-set-up-your-database)
7. [Step 5: Configure File Storage](#step-5-configure-file-storage)
8. [Step 6: Tell Cocoding.ai to Build Your App](#step-6-tell-cocodingai-to-build-your-app)
9. [Step 7: Connect Supabase to Your App](#step-7-connect-supabase-to-your-app)
10. [Common Issues & Solutions](#common-issues--solutions)
11. [What You Can Build](#what-you-can-build)

🎯 What You'll Build

Generate fullstack apps powered by Notion with Cocoding AI. Build complete applications with database, pages, and knowledge management—instantly with AI.

With Cocoding.ai + Supabase, you can create professional applications like:

• CRM Systems (manage clients and projects)
• E-commerce Stores (products, orders, payments)
• Social Platforms (posts, comments, likes)
• Project Management Tools (tasks, teams, deadlines)
• Booking Systems (appointments, calendars)
• Content Management (blogs, portfolios)

All without writing a single line of code!

🤔 What is Supabase?

Think of Supabase as the brain and memory of your application:

• 🔐 User Accounts: Handles login/signup securely
• 💾 Database: Stores all your data (clients, projects, files, etc.)
• 📁 File Storage: Saves images, documents, videos
• ⚡ Real-time Updates: Changes appear instantly across all devices

Best part? It's FREE to start (up to 500MB database + 1GB storage)!

Step 1: Create Your Supabase Account

📸 Screenshot placeholder: Supabase homepage with "Start your project" button

1.1 Visit Supabase Website

Go to: https://supabase.com

1.2 Sign Up

Click the "Start your project" button (top right corner)

You have 3 options:

• ✅ Sign up with GitHub (Recommended - fastest)
• Sign up with Google
• Sign up with email/password

Why GitHub? It's the most reliable and used by professional developers.

1.3 Authorize Access (if using GitHub)

• Click "Authorize Supabase" when prompted
• You'll be redirected back to Supabase dashboard

✨ Congratulations! Your account is ready.

Step 2: Create a New Project

📸 Screenshot placeholder: Supabase dashboard with "New project" button

2.1 Click "New Project"

On your dashboard, click the green "New project" button.

📸 Screenshot placeholder: New project form with Name, Database Password, Region fields

2.2 Fill in Project Details

You'll see a form with these fields:

Name (Required)

• Example: my-crm-app or ecommerce-store
• Use lowercase, no spaces (use hyphens instead)

Database Password (Required)

• Click the 🎲 "Generate a password" button
• CRITICAL: Copy this password and save it somewhere safe!
• You'll need it later (though rarely)

Region (Required)

• Choose the location closest to your users
• Examples:

- US East (N. Virginia) - For USA/Americas

- Europe (Frankfurt) - For Europe/Africa

- Asia Pacific (Singapore) - For Asia/Australia

Pricing Plan

• Select "Free" (perfect for starting)
• You can upgrade later if needed

📸 Screenshot placeholder: Project creation progress screen

2.3 Create Project

Click "Create new project" button at the bottom.

⏳ Wait 2-3 minutes while Supabase sets up your project.

You'll see a progress screen saying "Setting up project..."

Step 3: Get Your API Credentials

Once your project is ready, you need 2 magic keys to connect it to Cocoding.ai:

📸 Screenshot placeholder: Settings menu with API option highlighted

3.1 Navigate to Project Settings

1. Click "Settings" (⚙️ icon in left sidebar)
2. Click "API" in the settings menu

📸 Screenshot placeholder: API settings page showing Project URL and anon/public key

3.2 Copy Your Credentials

You'll see a page with important information. Copy these 2 values:

📍 Project URL

• Look for: "Project URL"
• Looks like: https://abcdefghijk.supabase.co
• Click the 📋 copy icon next to it

Save this somewhere safe!

🔑 Anon/Public Key

• Scroll down to "Project API keys"
• Find the key labeled: "anon public"
• It's a LONG string starting with eyJ...
• Click the 📋 copy icon to copy it

Save this somewhere safe too!

3.3 Why These Are Safe to Share

Don't worry! The "anon public" key is designed to be used in your app's frontend. It's protected by Supabase's security rules (Row Level Security), so users can only access their own data.

❌ NEVER share: Your "service_role" key (keep that secret!)

Step 4: Set Up Your Database

Now we'll create the tables (think of them as spreadsheets) where your data lives.

📸 Screenshot placeholder: SQL Editor with "New query" button

4.1 Open SQL Editor

1. Click "SQL Editor" (📝 icon in left sidebar)
2. Click "New query" button

📸 Screenshot placeholder: SQL Editor with migration script pasted and "Run" button

4.2 Run Your Database Script

When Cocoding.ai builds your app, it creates a file called:

supabase/migrations/001_initial_schema.sql

Here's what to do:

1. Copy ALL the content from that file
2. Paste it into the SQL Editor in Supabase
3. Click "Run" (or press Ctrl+Enter / Cmd+Enter)

What just happened?

You created all the tables your app needs! For a CRM, this includes:

• profiles (user information)
• clients (your customers)
• projects (work you're doing)
• tasks (to-do items)
• files (uploaded documents)

📸 Screenshot placeholder: Table Editor showing list of created tables

4.3 Verify It Worked

1. Click "Table Editor" (📊 icon in left sidebar)
2. You should see a list of tables on the left
3. If you see profiles, clients, projects, etc. → Success! ✅

Step 5: Configure File Storage

If your app uploads files (images, PDFs, etc.), you need a storage bucket.

📸 Screenshot placeholder: Storage section showing buckets list

5.1 Navigate to Storage

Click "Storage" (📦 icon in left sidebar)

📸 Screenshot placeholder: New bucket form with name and public bucket options

5.2 Create a Bucket

1. Click "New bucket" button
2. Name: Enter project-files (or whatever your app uses)
3. Public bucket: UNCHECK this (keep it private for security)
4. Click "Create bucket"

📸 Screenshot placeholder: Bucket Policies tab showing policy editor

5.3 Set Storage Policies

This ensures users can only access their own files:

1. Click on your new bucket (project-files)
2. Click "Policies" tab
3. Click "New policy"
4. Select "For full customization"

Copy and paste this policy:

1-- Allow users to upload their own files
2CREATE POLICY "Users can upload own files"
3ON storage.objects FOR INSERT
4TO authenticated
5WITH CHECK (
6  bucket_id = 'project-files' AND 
7  auth.uid()::text = (storage.foldername(name))[1]
8);
9
10-- Allow users to view their own files
11CREATE POLICY "Users can view own files"
12ON storage.objects FOR SELECT
13TO authenticated
14USING (
15  bucket_id = 'project-files' AND 
16  auth.uid()::text = (storage.foldername(name))[1]
17);
18
19-- Allow users to delete their own files
20CREATE POLICY "Users can delete own files"
21ON storage.objects FOR DELETE
22TO authenticated
23USING (
24  bucket_id = 'project-files' AND 
25  auth.uid()::text = (storage.foldername(name))[1]
26);

1. Click "Review" then "Save policy"

What did this do?

It created security rules so users can only upload/view/delete their OWN files, not others' files.

Step 6: Tell Cocoding.ai to Build Your App

Now the fun part - building your app!

6.1 Describe What You Want

In Cocoding.ai chat, describe your app in plain English. Example:

Build me a CRM for freelancers where I can:
- Manage clients (name, email, phone, company)
- Create projects under each client
- Add tasks to projects
- Upload files to projects
- Track project status and deadlines

Use Supabase for the backend with user authentication.

6.2 Cocoding.ai Builds Everything

Cocoding.ai will automatically:

• ✅ Create a beautiful user interface
• ✅ Set up login/signup pages
• ✅ Generate database migration files
• ✅ Build all the features you requested
• ✅ Configure security rules
• ✅ Add file upload functionality

This takes about 2-3 minutes.

6.3 What You Get

Cocoding.ai creates a complete project with:

• Frontend (what users see)
• Backend (database connections)
• Authentication (login system)
• File storage integration
• Security configurations

Step 7: Connect Supabase to Your App

Final step - link your Supabase project to the app!

📸 Screenshot placeholder: .env file open in text editor

7.1 Locate the .env File

Cocoding.ai creates a file called .env in your project.

7.2 Add Your Credentials

Open the .env file and you'll see:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

Replace these with YOUR credentials from Step 3:

VITE_SUPABASE_URL=https://abcdefghijk.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

7.3 Save and Restart

1. Save the .env file
2. Tell Cocoding.ai: "Restart the app with the new environment variables"

🎉 DONE! Your app is now connected to Supabase!

🧪 Testing Your App

📸 Screenshot placeholder: App signup page

Create Your First Account

1. Go to your app's signup page
2. Enter your email and password
3. Click "Create Account"
4. Check your email for verification (if enabled)

📸 Screenshot placeholder: App dashboard after login

Try the Features

• Add a client: Fill in name, email, company
• Create a project: Set title, budget, deadline
• Upload a file: Attach a document or image
• Add tasks: Create to-do items

Everything should work seamlessly!

🔧 Common Issues & Solutions

Issue 1: "Missing Supabase environment variables"

Cause: .env file not configured

Solution:

1. Open .env file
2. Make sure VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are filled in
3. Restart the app

Issue 2: "Row Level Security policy violation"

Cause: Database policies not created

Solution:

1. Go to Supabase SQL Editor
2. Re-run the migration file (001_initial_schema.sql)
3. Make sure you're logged in to your app

Issue 3: "Storage bucket not found"

Cause: Storage bucket not created

Solution:

1. Go to Supabase → Storage
2. Create bucket named project-files
3. Make it private (not public)
4. Add the storage policies from Step 5.3

Issue 4: Can't log in after signup

Cause: Email confirmation required

Solution:

1. Go to Supabase → Authentication → Settings
2. Scroll to "Email Auth"
3. Disable "Confirm email" (for testing)
4. Click "Save"

For production: Keep email confirmation ON for security

Issue 5: Data not showing up

Cause: Not logged in, or wrong user

Solution:

1. Log out and log back in
2. Make sure you're using the same account that created the data
3. Check Supabase Table Editor to verify data exists

🎨 What You Can Build

Example 1: Client Management CRM

Tell Cocoding.ai:

Build a CRM where I can manage clients, projects, and invoices. 
Include client contact info, project status tracking, and file uploads.
Use Supabase for authentication and database.

Example 2: E-commerce Store

Tell Cocoding.ai:

Create an online store with product catalog, shopping cart, 
and order management. Include image uploads for products.
Use Supabase for backend and user accounts.

Example 3: Task Management App

Tell Cocoding.ai:

Build a task manager where teams can create projects, assign tasks, 
set deadlines, and track progress in real-time.
Use Supabase for database and real-time updates.

Example 4: Booking System

Tell Cocoding.ai:

Create a booking system for appointments with calendar view, 
time slot selection, and email notifications.
Use Supabase for storing bookings and user authentication.

🚀 Next Steps

Level Up Your App

Once your basic app is working, you can:

1. Customize the design: Ask Cocoding.ai to change colors, layout, fonts
2. Add features: Request new functionality anytime
3. Enable email verification: Go to Supabase → Auth → Settings
4. Set up custom domain: Deploy your app with a real website address
5. Add payment processing: Integrate Stripe for subscriptions/payments

Learn More

• Supabase Docs: https://supabase.com/docs
• Cocoding.ai Help: Ask in the chat anytime!

💡 Pro Tips

Tip 1: Start Small

Build a simple version first, then add features gradually.

Tip 2: Test Everything

Create test accounts and try all features before sharing with others.

Tip 3: Backup Your Data

Supabase automatically backs up, but you can export data from Table Editor.

Tip 4: Monitor Usage

Check your Supabase dashboard to see database size and API calls.

Tip 5: Ask Cocoding.ai

If something doesn't work, just describe the issue in plain English!

🎓 Glossary for Beginners

API: A way for your app to talk to Supabase (like a phone line)

Database: Where all your data is stored (like a filing cabinet)

Table: A collection of similar data (like a spreadsheet)

Row Level Security (RLS): Rules that control who can see what data

Storage Bucket: A folder in the cloud for files

Migration: A script that creates/updates database tables

Environment Variables: Secret settings your app needs to work

Authentication: The login/signup system

Frontend: The part users see and interact with

Backend: The behind-the-scenes data processing

✅ Quick Checklist

Before asking Cocoding.ai to build your app, make sure you have:

• [ ] Supabase account created
• [ ] New project created in Supabase
• [ ] Project URL copied
• [ ] Anon key copied
• [ ] Database migration ready to run
• [ ] Storage bucket created (if needed)
• [ ] Clear description of what you want to build

Once you have all these, you're ready to build!

🆘 Need Help?

If You're Stuck:

1. Read the error message carefully
2. Check this guide for solutions
3. Ask Cocoding.ai: "I'm getting error [paste error], how do I fix it?"
4. Check Supabase docs: https://supabase.com/docs

Common Questions:

Q: Is Supabase really free?

A: Yes! Free tier includes 500MB database, 1GB storage, 50,000 monthly active users.

Q: Do I need a credit card?

A: No credit card required for the free tier.

Q: Can I upgrade later?

A: Yes, you can upgrade to Pro ($25/month) anytime for more resources.

Q: Is my data secure?

A: Yes! Supabase uses industry-standard encryption and security practices.

Q: Can I use my own domain?

A: Yes, you can deploy your app to any hosting service with a custom domain.

🎉 Conclusion

Congratulations! You now know how to:

✅ Create a Supabase account and project

✅ Get API credentials

✅ Set up databases and storage

✅ Connect Supabase to apps built by Cocoding.ai

✅ Troubleshoot common issues

You're ready to build professional web applications without coding!

📞 Support

• Cocoding.ai: Chat support available 24/7
• Supabase: https://supabase.com/support
• Community: Join Supabase Discord for help

Built with ❤️ by [Cocoding.ai](https://cocoding.ai)

Empowering everyone to build software, no coding required.