🧠 ThoughtArchive — Day 1

✅ Quickstart Overview

This starter kit includes everything I used to build my first AI app: ThoughtArchive, a voice-to-thought organizer powered by Cursor, Supabase, Tailwind, and ChatGPT.

Even if you’ve never built anything before, this guide walks you through every step using prompt engineering and AI-assisted tools.

What You’ll Learn

• How to connect a Next.js app to a real Supabase database

• How to save thoughts from a form input

• How to use ChatGPT to auto-tag your thoughts

• How to fix common Supabase errors (like RLS policy issues)

⏱️ Build Time: 30–60 minutes

🧰 Tools: Cursor, Supabase, ChatGPT, Tailwind

📸 Recommended screenshot: Your project’s folder structure open in Cursor.

📁 Files & Configuration

🔐 .env.local Template

Paste this into a file named .env.local at the root of your project:

Copy code
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Important: No spaces, no quotes. Place it next to package.json.

📍 Cursor location: Right-click root folder → New File → .env.local

💡 Cursor Tip: You can highlight // create .env.local → Ask Cursor to generate this for you.

🧠 Supabase Table Schema

Create a thoughts table in Supabase with:

📍 Supabase: Project → Table Editor → New Table

🔗 Supabase Docs – Table Editor

✅ Enable Row-Level Security (RLS)

Paste this into Supabase’s SQL Editor:

sql
Copy code
-- Enable RLS
ALTER TABLE thoughts ENABLE ROW LEVEL SECURITY;

-- Allow anonymous inserts (public anon key)
CREATE POLICY allow_anon_inserts
ON thoughts
FOR INSERT
TO anon
WITH CHECK (true);

-- Optional: Allow public reads
CREATE POLICY allow_public_select
ON thoughts
FOR SELECT
USING (true);

📍 Supabase: Project → SQL Editor → New Query

💡 Tip: Save this as setupPolicies.sql inside your /supabase/ folder in Cursor

💬 Prompts to Use in Cursor

Use these prompts in Cursor by writing a comment (e.g. // Save form to Supabase) and right-clicking → Ask Cursor.

🧠 Project Setup

plaintext
Copy code
Create a new Next.js 14 project with TypeScript, TailwindCSS, and App Router.

📍 Cursor: Right-click Explorer → New Project → Paste this comment

📦 Supabase Integration

plaintext
Copy code
Set up a Supabase client in my app using environment variables from `.env.local`.

💡 Tip: Cursor will usually generate supabaseClient.ts and auto-import it where needed.

✍️ Thought Input

plaintext
Copy code
Create a page with:
- A textarea for the thought
- An optional "group" input
- A “Save Thought” button

On submit:
- Save the data to Supabase
- Show a green success message or red error if it fails

📍 Page: /app/page.tsx or /src/pages/index.tsx

✅ Build Checklist

Paste this into your README.md to track your progress:

markdown
Copy code
- [ ] Create a new Next.js 14 project with TailwindCSS and TypeScript
- [ ] Add `.env.local` with Supabase credentials
- [ ] Set up `supabaseClient.ts` in `src/lib/`
- [ ] Build a form to submit `thought` and `group`
- [ ] Insert data into Supabase
- [ ] Enable RLS and create `anon` insert policy
- [ ] Add your OpenAI key to `.env.local`
- [ ] On submit, call OpenAI → get `tags` and `group`
- [ ] Update Supabase row with GPT response
- [ ] Create a thoughts list view with filter by group/tag

📍 Cursor: Project root → README.md

🚀 What’s Next

Once your MVP works, consider these features:

markdown
Copy code
- 🎙️ Add voice input using Whisper API
- 🧠 Chat-style reflection mode
- 📤 Export thoughts to Notion or JSON
- 📱 Responsive mobile UI
- 🛠️ Editable tags and groups

📍 Organize upcoming features in /features/, /voice/, or /chat/ folders

🔗 Whisper API Guide

🔗 Notion API Docs

📖 Behind the Build

✨ Credits & Final CTA

Thanks to:

• Cursor.sh

• Supabase

• OpenAI

If this helped you — share it with a builder friend, post a screenshot of your app, or tag me on Twitter: [@ItsNaunas]