Notes App Tutorial

⏱️ 45 minutes Build a notes app with user accounts and cloud synchronization. You’ll learn about authentication, cloud databases, and real-time sync using Supabase.

What You’ll Build

A notes app that:

Has user sign up and login
Creates, edits, and deletes notes
Syncs notes to the cloud
Works across devices (same account = same notes)

Before You Start

This tutorial requires a Supabase account (free tier available).

Set Up Supabase

Go to supabase.com and create a free account
Create a new project (any name, choose a region near you)
Wait for the project to initialize (~2 minutes)
Note your project URL and anon key (Settings → API)

Keep the Supabase dashboard open — you’ll need it throughout this tutorial.

Part 1: Create the App

On the Nativeline home page, enter:

A notes app with user authentication. Users can sign up with email/password, log in, and create personal notes. Notes sync to Supabase cloud database so they're available on any device.

Complete the Wizard

Who is this for? — Anyone (public app)
Feel — Simple & clean
Priority — Core functionality first
Colors — Your choice
Name — Cloud Notes

Part 2: Connect Supabase

Tell Nativeline about your Supabase project:

Connect to my Supabase project:
- URL: YOUR_SUPABASE_URL
- Anon Key: YOUR_ANON_KEY

Set up authentication with email/password sign up and login.

Replace YOUR_SUPABASE_URL and YOUR_ANON_KEY with your actual values from the Supabase dashboard.

The anon key is safe to include in apps — it only allows operations that your Row Level Security policies permit. Never share your service_role key.

Part 3: Create the Notes Table

We need a database table to store notes. In your Supabase dashboard:

Go to Table Editor
Click Create a new table
Name: notes
Add columns:
- id (uuid, primary key) — auto-generated
- user_id (uuid, not null) — links to auth.users
- title (text)
- content (text)
- created_at (timestamptz, default: now())
- updated_at (timestamptz, default: now())
Enable Row Level Security (RLS)

Add RLS Policies

In the Supabase dashboard, go to Authentication → Policies and add: Select policy (users can read their own notes):

CREATE POLICY "Users can view own notes" ON notes
FOR SELECT USING (auth.uid() = user_id);

Insert policy (users can create notes):

CREATE POLICY "Users can create own notes" ON notes
FOR INSERT WITH CHECK (auth.uid() = user_id);

Update policy (users can edit their own notes):

CREATE POLICY "Users can update own notes" ON notes
FOR UPDATE USING (auth.uid() = user_id);

Delete policy (users can delete their own notes):

CREATE POLICY "Users can delete own notes" ON notes
FOR DELETE USING (auth.uid() = user_id);

Now tell Nativeline:

I've created a 'notes' table in Supabase with columns: id (uuid), user_id (uuid), title (text), content (text), created_at, updated_at. I've enabled RLS so users can only access their own notes.

Part 4: Build the Auth Flow

Let’s create the login and signup screens:

Create authentication screens:
- A welcome screen with "Sign Up" and "Log In" buttons
- Sign up form with email, password, and confirm password
- Log in form with email and password
- Show loading state during authentication
- Handle errors with user-friendly messages

Test the flow:

Try signing up with an email
You should be logged in and see the notes list
Log out and try logging back in

Part 5: Build the Notes List

Create the main notes interface:

After login, show a list of the user's notes:
- Each note shows title and preview of content
- Tap a note to open and edit it
- Floating "+" button to create new note
- Pull to refresh to sync with cloud
- Show "No notes yet" when empty

Part 6: Create Note Editor

Build the editing experience:

Create a note editor screen:
- Large title field at top
- Text area for note content below
- Auto-save as the user types (debounced)
- Show "Saving..." indicator when syncing
- Back button to return to list

Part 7: Add Note Deletion

Let users delete notes:

Add swipe-to-delete on notes in the list. Show a confirmation alert before deleting. Delete from both local state and Supabase.

Part 8: Add Real-time Sync

Make notes update in real-time:

Subscribe to Supabase real-time updates for the notes table. When notes are added, updated, or deleted on another device, reflect those changes immediately in the app.

Test this by:

Opening your Supabase dashboard → Table Editor → notes
Editing a note directly in Supabase
Watching it update in the app

Part 9: Add Search

Help users find notes:

Add a search bar at the top of the notes list. Filter notes by title and content as the user types. Show "No results" when nothing matches.

Part 10: Polish the Design

Make it look professional:

Polish the notes app:
- Notes list items have a subtle shadow and rounded corners
- Title uses a bold, larger font
- Show relative timestamps ("2 hours ago", "Yesterday")
- Add a profile button that shows email and logout option
- Use a consistent color scheme throughout

Final Result

You now have a cloud-synced notes app with:

✅ User registration and login
✅ Create, read, update, delete notes
✅ Cloud sync via Supabase
✅ Real-time updates
✅ Search functionality
✅ Polished UI

What You Learned

Concept	How It Was Used
Authentication	Email/password signup and login
Database	Supabase tables and queries
Row Level Security	Protecting user data
Real-time	Live sync between devices
CRUD Operations	Create, read, update, delete
State Management	Auth state and data sync

Troubleshooting

Can't connect to Supabase

Double-check your project URL (ends in .supabase.co)
Make sure you’re using the anon key, not the service_role key
Check if your Supabase project is still initializing

Notes not saving

Check Supabase Table Editor for errors
Verify RLS policies are set correctly
Make sure user_id is being set when creating notes

Real-time not updating

Real-time requires Supabase Realtime to be enabled (it’s on by default)
Check the browser console in Supabase for errors
Try refreshing the app

Permission denied errors

Your RLS policies might be incorrect. In Supabase:

Go to Authentication → Policies
Verify each policy uses auth.uid() = user_id
Make sure RLS is enabled on the table

Understanding the Architecture

┌─────────────────┐         ┌─────────────────┐
│                 │         │                 │
│   Your App      │ ◄─────► │   Supabase      │
│   (iOS)         │   API   │   (Cloud)       │
│                 │         │                 │
└─────────────────┘         └─────────────────┘
                                    │
                    ┌───────────────┼───────────────┐
                    │               │               │
                    ▼               ▼               ▼
               ┌─────────┐   ┌───────────┐   ┌──────────┐
               │  Auth   │   │  Database │   │ Realtime │
               │ (Users) │   │  (Notes)  │   │ (Sync)   │
               └─────────┘   └───────────┘   └──────────┘

Challenge: Extend Your App

Try these on your own:

Rich text — Add formatting (bold, italic, lists)
Folders — Organize notes into folders
Sharing — Share notes with other users
Markdown — Support markdown preview
Offline mode — Work offline and sync when back online
Attachments — Add images to notes using Supabase Storage

Quick Start

Notes App Tutorial

Notes App Tutorial

What You’ll Build

Before You Start

Set Up Supabase

Part 1: Create the App

Complete the Wizard

Part 2: Connect Supabase

Part 3: Create the Notes Table

Add RLS Policies

Part 4: Build the Auth Flow

Part 5: Build the Notes List

Part 6: Create Note Editor

Part 7: Add Note Deletion

Part 8: Add Real-time Sync

Part 9: Add Search

Part 10: Polish the Design

Final Result

What You Learned

Troubleshooting

Understanding the Architecture

Challenge: Extend Your App

Next Steps

Supabase Deep Dive

Publish to TestFlight

​Notes App Tutorial

​What You’ll Build

​Before You Start

​Set Up Supabase

​Part 1: Create the App

​Complete the Wizard

​Part 2: Connect Supabase

​Part 3: Create the Notes Table

​Add RLS Policies

​Part 4: Build the Auth Flow

​Part 5: Build the Notes List

​Part 6: Create Note Editor

​Part 7: Add Note Deletion

​Part 8: Add Real-time Sync

​Part 9: Add Search

​Part 10: Polish the Design

​Final Result

​What You Learned

​Troubleshooting

​Understanding the Architecture

​Challenge: Extend Your App

​Next Steps

Supabase Deep Dive

Publish to TestFlight

Notes App Tutorial

What You’ll Build

Before You Start

Set Up Supabase

Part 1: Create the App

Complete the Wizard

Part 2: Connect Supabase

Part 3: Create the Notes Table

Add RLS Policies

Part 4: Build the Auth Flow

Part 5: Build the Notes List

Part 6: Create Note Editor

Part 7: Add Note Deletion

Part 8: Add Real-time Sync

Part 9: Add Search

Part 10: Polish the Design

Final Result

What You Learned

Troubleshooting

Understanding the Architecture

Challenge: Extend Your App

Next Steps