Building a Production App with AI: Day 3 - From Editor to Full App

Today was about expanding beyond the editor and turning this into a real application. One hour of focused work, and we're already deploying to production.

Starting Point

We kicked off with our React app running on port 5173 (quick tip: ports 5173-5174 are React territory, while 3000 is Next.js land). The editor looked clean in both light and dark modes, but an editor alone doesn't make an app.

Version Control First

Before diving into features, I set up the GitHub repository. This is crucial - no matter what happens locally, your code is safe. The process was straightforward:

• Initialize repository

• Initial commit

• Publish to private repo

Now we have a safety net. Every working version is tracked, and we can always roll back if AI suggestions break something.

Building the Missing Pieces

The editor was great, but we needed:

• Folder organization

• Tags for content

• Draft management

• Settings page

• Export functionality

I prompted Claude: "The editor is great, but we need other pages to maintain folders, tags, drafts, etc. Go through the spec and integrate other pages."

The AI got to work immediately, understanding that while we started with the editor (the core experience), users need ways to organize and manage their content.

Setting Up Supabase

Time for the backend. I already had a Supabase project ready - just a free tier instance with minimal setup. The authentication configuration was straightforward:

• Email-only authentication (keeping it simple)

• No social logins for now (we can add Google later)

• Basic security settings enabled

One important note: when working with Supabase, you'll need the public API key. Don't worry about exposing it - it's meant to be public and only works with row-level security.

The Design Evolution

Something interesting happened - Claude improved the export functionality, adding HTML-to-Canvas and jsPDF libraries for proper PDF export. The settings page came out beautifully clean:

• Folder management

• Profile settings

• Export options

• Theme toggle

All in grayscale, which led to an important realization...

Creating Brand Guidelines

Pure black and white can be boring. We need subtle shades for visual hierarchy. So I asked Claude to create comprehensive brand guidelines for a grayscale web app that still looks awesome. The key insight: grayscale doesn't mean just black and white - it's about using the full spectrum of grays effectively.

Deployment with Vercel

The final step was getting this live:

1. Created a new Vercel project

2. It auto detected our Vite configuration

3. Added environment variables for Supabase

4. Ran pnpm run build locally first (always test production builds!)

5. Committed and pushed to main

Within minutes, the site was live. Every commit now automatically deploys - that's the power of modern deployment pipelines.

Key Learnings Today

Version Control Early: Set up GitHub before you write too much code. It's your safety net.

Test Production Builds: What works in dev might break in production. Always run build commands locally first.

Design Systems Matter: Even simple grayscale apps need thoughtful design guidelines.

Ship Fast: We went from local development to live deployment in one session. AI makes this velocity possible.

What's Next

Tomorrow's focus:

• Connecting the editor to Supabase for saving

• Implementing draft autosave

• Choosing a proper domain name

• Starting to gather user feedback

The app is live, it's working, and we're only three days in. This is the speed of building with AI - not perfect, but perfectly functional.

---

The site is already deployed and working. Next step? Getting it in front of users and iterating based on feedback. That's when things get really interesting.