System Thinking

5 systems that turn your app into something you can confidently ship

#1 The 15-Minute Polish

Clean Up Your UI

Your app works but looks like a prototype. Here's what screams amateur:

❌ Broken navigation links
❌ Jarring page transitions
❌ Inconsistent spacing/colors
❌ Mobile looks broken

15 minutes of intentional polish fixes these issues. Use this prompt in discussion mode (i.e. don’t code yet):

# Please review my app so we can clean up the UI: 
- Identify any nav links that are dead or placeholder links and and output bullet point list. 
- Identify where we can add smooth page transitions and subtle component animations and output bullet point list.
- Identify any inconsistent styles or themes across all of the pages and components and output bullet point list. 
- Identify any responsive design issues across all of the pages and components and output bullet point list. 

When the AI outputs the bullet lists you can chat back and forth and have it implement the suggested changes.

#2 Can My Grandmother Use This? Test

Fix Your UX

Your app makes sense to you. But can someone else figure it out in 30 seconds?

To ensure your app is intuitive you want:

✅ A smooth onboarding experience for new users
✅ Empty states that guide users to next steps
✅ Full CRUD (Create, Read, Update, Delete) functionality
✅ Error messages that actually help

Use this prompt in discussion mode:

# Please review my app an make a plan for these UX improvements:
- Identify any gaps in my user onboarding journey (e.g. after login is the user taken to a welcome screen?) and output bullet point list. 
- Identify all empty states so we can replacing them with actionable content that guides users toward their next steps and output bullet point list. 
- Identify any resources without user friendly CRUD functionality  and output bullet point list. 
- Identify any error messages that don't have simple non-tech jargon and output bullet point list. 

When the AI outputs the bullet lists you can chat back and forth and have it implement the suggested changes.

#3 The Trust But Verify Rule

Lock Down Authentication 

Your vibe coded prototype might have a simple login. Production needs bulletproof auth. This means checking who someone is on both the client (user's device) and server (your app's brain) sides.

Client side: Login forms, route protection
Server side: Token verification (verify that the user is who they say they are)

Use this prompt in discussion mode:

# Please confirm that user authentication is production ready using best practices like the example code snippets I've shared:  

// Client-side protection
function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();
  
  if (loading) return <Spinner />;
  if (!user) return <Navigate to="/login" />;
  
  return children;
}

// Server-side verification
app.use('/api/protected', authenticateToken);

Think of it as double-checking: even if someone bypasses the frontend, your backend catches them.

#4 The Environment Variable Rule

Hide Your Secrets

Never hardcode API keys. Ever.

❌ const API_KEY = "sk-abc123" in your code
✅ const API_KEY = process.env.API_KEY with proper .env files

# Manually check to verify there's no secrets in source code:

- Open your code editor 
- Use search function (Ctrl+F or Cmd+F)
- Search for your actual API key string
- If found anywhere move to environment variables immediately

Your future self will thank you when you're not rotating compromised keys at 2am.

#5 Fix Bugs Before Users Find Them

Set Up Monitoring

Nothing worse than finding out your app is broken from an angry user email.

Use a tool like Sentry for error tracking like:

✅ Real-time error alerts
✅ Performance monitoring
✅ User session replay

Use this prompt in Claude or you AI of choice, make sure web search is enabled and replace the details to match the app you are building:

# Please assist me in setting up error monitoring in my app: 
- I have built a habit tracker app using Bolt 
- Frontend is React and Supabase database 
- I will use Sentry see docs here: docs.sentry.io
- (1) Write a prompt that I can use in Bolt to configure Sentry in my project 
- (2) Create a step-by-step guide for me to implement this 

Set it up once, sleep better forever!

For more detailed tutorials with a simplified breakdown of these rules:

That’s it for today

Some people consider this the boring part. It's about respecting your users enough to build something reliable.

Your creative energy got you to a vibe coded prototype. Systematic thinking gets you shipping a secure production ready app. Both matter.

Ciara Wearen
The Prompt Driven Developer