I Built a SaaS in 2 Hours Using Only AI (No Coding Experience)

I'm not a developer. I can't tell a React component from a Vue directive. The last time I touched code was editing HTML on MySpace in 2007.

But yesterday, I built and deployed a fully functional SaaS product. From first prompt to live URL: 2 hours and 14 minutes.

This is not a toy demo. It's a real product that people are signing up for.

Here's exactly how I did it.

The Product: FeedbackFlow

The idea: A simple feedback collection tool for websites. Visitors click a button, submit feedback, and site owners see it in a dashboard.

Why this? I run a small blog. I wanted feedback from readers but didn't want to use bloated enterprise tools. I figured if I need this, others might too.

The requirements:

• Embeddable widget for any website
• Dashboard to view and manage feedback
• Email notifications for new submissions
• Basic analytics (submissions per day)
• User authentication

Two hours ago, this was just an idea. Now it's live.

Hour 1: From Idea to Working Prototype

Minute 0-10: Setting Up

I opened NovaKit's AI Builder and started a new project.

Framework selection: The AI asked what I wanted to build. I typed:

"A feedback collection SaaS. Users embed a widget on their site, visitors submit feedback, and users see it in a dashboard."

It recommended React (Vite) for the frontend. I have no idea what that means, but I clicked OK.

Minute 10-25: The Core UI

First prompt:

"Create a landing page for FeedbackFlow—a feedback collection tool. Include a hero section explaining the value, feature highlights, pricing section with a free tier, and a sign-up CTA."

The AI generated:

• Clean, modern landing page
• Hero with animated illustration
• Three-tier pricing (Free, Pro, Business)
• Email capture form
• Responsive design

I watched the preview update in real-time. It looked professional.

Minute 25-40: Dashboard

Next prompt:

"Create a dashboard for logged-in users. Show recent feedback submissions in a card layout. Include filters for date and status. Add a sidebar with navigation for Dashboard, Settings, and Analytics."

The AI built:

• Sidebar navigation
• Feedback cards with sender info, message, timestamp
• Status badges (New, Reviewed, Archived)
• Filter dropdowns
• Empty state for new users

One issue: the cards looked cramped. Follow-up:

"Make the feedback cards larger with more padding. Add a subtle shadow and hover effect."

Fixed in seconds.

Minute 40-55: The Widget

This was the key feature:

"Create an embeddable feedback widget. It should be a floating button in the corner that expands into a form. Fields: name (optional), email (optional), message (required), mood (happy/neutral/sad emoji buttons). Style it to be minimal and non-intrusive."

The AI generated:

• Floating button with speech bubble icon
• Smooth expand animation
• Clean form with emoji mood selector
• Submit confirmation animation
• Minimize button

I tested it in the preview. Clicked the button, form expanded, submitted feedback, saw confirmation. Perfect.

Minute 55-60: Data Connection

"Connect the widget to the dashboard. When someone submits feedback, it should appear in the dashboard in real-time. Store the data persistently."

The AI set up:

• API endpoints for submissions
• Local storage (for the demo)
• Real-time updates

I opened two browser tabs—one with the widget, one with the dashboard. Submitted feedback in the first tab. It appeared instantly in the second.

End of hour 1: Working prototype with landing page, dashboard, and widget.

Hour 2: Polish and Production

Minute 60-75: Authentication

"Add user authentication. Users should sign up with email and password, then log in to access their dashboard. Protect the dashboard routes."

The AI implemented:

• Sign-up page with validation
• Login page
• Session management
• Protected routes (redirect to login if not authenticated)
• User profile storage

I created a test account, logged out, tried to access dashboard, was redirected to login. Security working.

Minute 75-90: Email Notifications

"Send an email notification to the user when new feedback is submitted. Include the feedback content and a link to the dashboard."

The AI set up email templates and notification logic. (In production, this would connect to a real email service.)

Minute 90-105: Analytics

"Add an analytics page. Show a chart of feedback submissions over the last 30 days. Include total submissions, average per day, and a breakdown by mood."

The AI generated:

• Line chart for submissions over time
• Stat cards (total, average, trend)
• Pie chart for mood distribution
• Date range selector

The charts animated in smoothly. Looked like something from a premium dashboard template.

Minute 105-115: Widget Customization

"Let users customize their widget. Options for: primary color, position (left/right corner), trigger button text. Show a live preview of their widget."

The AI added:

• Settings page with customization options
• Color picker
• Position toggle
• Text input for button label
• Live preview that updates as you change settings

Minute 115-125: Embed Code

"Generate an embed code for users. Show a code snippet they can copy to add the widget to their site. Include their unique ID so feedback routes to their account."

The AI created:

• Code snippet generator
• Copy button with confirmation
• Instructions for common platforms (WordPress, Shopify, HTML)

The generated code:

<script src="https://feedbackflow.app/widget.js"
        data-user-id="abc123"
        data-color="#4F46E5"
        data-position="right">
</script>

Simple enough for anyone to use.

Minute 125-134: Final Polish

A few refinements:

"Add a logo to the navbar. Make it a simple 'FF' monogram."

"Add keyboard shortcuts: 'N' to mark feedback as new, 'R' for reviewed, 'A' for archived."

"Make the landing page load faster with lazy-loaded images."

"Add a favicon."

Each prompt: 15-30 seconds to implement.

Minute 134: Deployment

Clicked "Deploy" in NovaKit.

Selected Vercel as the hosting platform. Connected my account (already had one).

The AI:

• Built the production bundle
• Configured environment variables
• Deployed to Vercel
• Provided the live URL

2 hours and 14 minutes total.

FeedbackFlow was live at feedbackflow.vercel.app.

What I Actually Built

Let me be specific about what exists:

Landing Page

• Hero section with value proposition
• Feature highlights with icons
• Three-tier pricing table
• Email signup form
• Responsive (looks good on mobile)

Authentication

• Sign up with email/password
• Login with session persistence
• Protected routes

Dashboard

• Feedback list with cards
• Status management (New → Reviewed → Archived)
• Filters by date and status
• Real-time updates

Widget

• Floating button
• Expandable feedback form
• Mood selection (emoji)
• Smooth animations
• Customizable styling

Settings

• Widget customization
• Live preview
• Embed code generator

Analytics

• Submissions over time chart
• Stat cards
• Mood breakdown

Deployment

• Production build
• Live URL
• SSL included

What's Missing (For Now)

To be transparent, this MVP doesn't have everything:

Not yet implemented:

• Real email delivery (would need SMTP setup)
• Payment processing for paid tiers
• Team collaboration features
• API rate limiting
• Custom domains

Would add in v2:

• Integrations (Slack, Discord, email)
• Advanced analytics
• Export functionality
• Multi-language support

But that's the point of an MVP. Ship fast, learn from users, iterate.

The Prompts That Worked Best

After two hours, I learned what makes effective prompts:

Be Specific About UI

❌ "Make a nice dashboard"

✅ "Create a dashboard with a sidebar navigation on the left (Dashboard, Settings, Analytics links), a header with the app name and user menu, and a main content area showing feedback submissions in a card grid layout"

Include Interactions

❌ "Add buttons to the cards"

✅ "Add a three-dot menu to each feedback card. Clicking it shows options: Mark as Reviewed, Archive, Delete. Include confirmation for Delete."

Reference What Exists

❌ "Change the color"

✅ "Change the primary color from blue to indigo (#4F46E5). Update all buttons, links, and accents to match."

Ask for States

❌ "Add a form"

✅ "Add a feedback form with loading state (button shows spinner), success state (green checkmark with 'Thanks!' message), and error state (red text explaining the issue)."

The Moments AI Surprised Me

1. Responsive Design by Default

I never asked for mobile responsiveness. But when I tested on my phone, everything worked. The sidebar became a hamburger menu. Cards stacked vertically. Forms were touch-friendly.

The AI just... did it.

2. Accessibility Features

I didn't mention accessibility. But the generated code included:

• Proper heading hierarchy
• Alt text on images
• ARIA labels on buttons
• Keyboard navigation
• Focus indicators

3. Performance Optimization

Without prompting:

• Images were lazy-loaded
• Code was split into chunks
• CSS was minimized
• Animations used GPU acceleration

4. Error Handling

The forms included validation I didn't specify:

• Email format checking
• Required field indicators
• Inline error messages
• Disabled submit during loading

What I Learned

Iteration is Fast

Don't try to get it perfect in one prompt. Get it 80% right, then refine.

First prompt → working version → "make X bigger" → "add Y" → "change color to Z"

Each iteration: seconds.

Describe What You See

When something isn't right, describe what you see versus what you want:

"The feedback cards are too close together. Add 16px gap between them."

"The submit button is too small on mobile. Make it full-width on screens under 640px."

Let AI Handle Decisions

I didn't specify:

• Font family (it picked Inter)
• Border radius (went with 8px)
• Shadow depth (subtle, consistent)
• Animation timing (smooth, not jarring)

The defaults were better than what I would have chosen.

Know When to Stop

I could have kept adding features forever. But the point was to ship something usable. After 2 hours, I had that.

Future features can come from user feedback, not my assumptions.

The Numbers

Just for fun, I timed myself:

Phase	Time
Setup & Landing Page	25 min
Dashboard	15 min
Widget	15 min
Data Connection	5 min
Authentication	15 min
Email Notifications	15 min
Analytics	15 min
Customization	10 min
Embed Code	10 min
Polish	9 min
Deployment	5 min
Total	2h 14m

Traditional estimate for this scope (as a developer): 2-4 weeks.

Try It Yourself

The process isn't magic. It's accessible to anyone:

1. Start with a clear idea: What problem does your product solve?
2. Break it into screens: Landing, Dashboard, Settings, etc.
3. Describe each screen: Be specific about layout and components
4. Connect the pieces: How does data flow between screens?
5. Add polish: Animations, loading states, error handling
6. Deploy: One click to go live

You don't need to know React, Vue, or any framework. You need to know what you want to build.

What's Next for FeedbackFlow

Now that it's live:

• Share with my blog readers for initial feedback (meta!)
• Add real email integration
• Build payment flow for Pro tier
• Track what features users actually want
• Iterate based on real usage

The old way: months of development before knowing if anyone wants this.

The new way: live in 2 hours, learning from real users immediately.

---

Ready to build your own product? Start with NovaKit's AI Builder — no coding required, just ideas.