Video summary

Build an AI Website Builder with MERN Stack 🚀 | Part-2

Main summary

Key takeaways

Technology

Tech/Product Build Summary (AI Website Builder, MERN/React UI)

This video covers building an AI-powered website builder using a MERN-style stack:

  • Frontend: React UI
  • Backend: Node/Express
  • Database: MongoDB

Key features include UI scaffolding, API fetching, AI-based code generation, website editing, live website viewing, and a planned Razorpay payment integration.

1) Frontend: Pricing page + routing setup

  • Builds the Pricing page UI by copying a pricing section into the front end.
  • Temporarily removes payment-handling logic from the pricing UI (payment handled later).
  • Uses a data-driven approach:
    • Plan details stored in an array (e.g., Free / Pro / Enterprise)
    • Renders plan cards via .map()
  • Confirms the pricing page renders correctly.

2) Frontend: Dashboard page UI + navigation

  • Creates a Dashboard layout including:
    • A dark background header section
    • A sticky header effect (blurred backdrop, border styling)
    • A “New Website” button that navigates to "/Generate"
  • Uses React Router’s useNavigate() for navigation.

3) Frontend: Generate page + AI website generation flow

UI: Generate landing page

  • Adds a Generate page with:
    • Sticky header copied/adapted from the dashboard
    • AI branding (e.g., “Dora AI”)
    • A highlighted value message (“build website with real AI power”)
    • A text area for the user prompt (website description)
    • A Generate Website button
    • Hover/tap animations and disabled state behavior

API integration: Fetch “all websites” + credits remaining

  • Implements a Get All Websites function using Axios:
    • Backend URL via import.meta.env.VITE_SERVER_URL
    • Uses a backend path pattern described in subtitles (e.g., /api/website/deploy)
    • Includes withCredentials: true
  • Adds:
    • Loading state
    • Error handling with try/catch/finally
  • Later generation flow:
    • Calls an endpoint to generate website content (AI response includes HTML/code)
    • Receives credits remaining
    • Updates UI state and routes into the editor

Navigation after generation

  • On success, navigates to:
    • "/Slush Editor/:id" (subtitle implies a route like editor/:id)
  • Ensures the Website Editor route exists in App.jsx and creates the page/component (e.g., editor.jsx / Editor.jsx).

4) Website Editor: Load generated site + show chat + editing loop

Editor UI capabilities

  • Editor includes:
    • Header/sidebar
    • AI Chat panel (toggleable for mobile)
    • “Preview” area (iframe) to display generated HTML
    • Message list (Redux AI/user messages)
    • Input box + Send button to update the website

Loading editor content

  • Uses useEffect to fetch a single website by ID from the URL:
    • Backend endpoint resembles: /api/website/getbyid/slug-or-id
  • Stores retrieved values:
    • website.title
    • website.latestCode
    • website.conversation
  • Troubleshooting mentioned:
    • Errors like:
      • “Cannot read properties of undefined reading title”
    • Routing/ID mismatch issues
  • Fix approach:
    • Use optional chaining (?.)
    • Ensure IDs come from useParams() and match the URL correctly

AI “thinking” + progress UI

  • Update/generate actions show a progress bar:
    • Simulated step changes using setInterval
    • Step/message mapping such as:
      • analyzing idea
      • planning
      • designing layout & structure
  • Uses Math.floor() to convert fraction-like progress to integer display.

Updating site via AI

  • On Send:
    • Calls an update endpoint (includes websiteId)
    • Appends a new AI message to chat state
    • Updates editor HTML/code state (setCode(result.data.code))

Code view modal (Monaco Editor)

  • Adds Monaco Editor using @monaco-editor/react
  • Implements an animated slide-in overlay using:
    • AnimatePresence and motion (Framer Motion)
  • Supports full-screen preview / overlay toggles.

5) Dashboard listing: show generated websites cards

  • Dashboard fetches “websites” and renders cards via .map().
  • Each card includes:
    • Animated entry (motion.div)
    • Hover styling
    • Click navigation to the editor:
      • "/editor/:websiteId"
    • Card content:
      • title
      • “last updated” timestamp
      • embedded preview iframe using latestCode
      • action buttons

6) Deploy + Share link features

Deploy logic

  • A Deploy button calls a backend deploy endpoint (using websiteId):
    • Uses a backend flow like slush deploy
    • Includes withCredentials: true
  • Opens the deployed URL in a new tab:
    • window.open(result.data.url, "_blank")

Share link behavior

  • Adds Copy link:
    • Uses the deploy URL
    • Copies via navigator.clipboard.writeText()
    • Shows “Link copied” with timed reset

Troubleshooting shown

  • Common issues:
    • deployed URL being undefined
    • incorrect property naming or missing route
  • Fixes include:
    • ensuring backend returns deployedUrl / url
    • ensuring correct routing + local state updates
    • validating responses via console.log

7) Live site page (render deployed HTML/iframe)

  • Creates a route like:
    • "/site/:id"
  • Fetches a single website by ID and renders its HTML:
    • iframe srcDoc={html}
    • Uses iframe sandbox settings (e.g., allow-scripts, allow-forms)
  • Fix shown:
    • ensure the HandleGetWebsite function is called inside useEffect.

8) Payment integration plan: Razorpay (backend + model + controllers)

  • Begins designing payment integration using Razorpay:
    • Payment model includes fields such as:
      • user (ObjectId ref to user)
      • plan (Free/Pro/Enterprise string ID/name)
      • amount (credits/amount)
      • credits
      • razorpayOrderId
      • razorpayPaymentId
      • status enum: Pending, Paid, Failed
      • timestamps enabled
  • Sets up Razorpay configuration:
    • loads API key/secret from environment variables
    • creates Razorpay instance
  • Controllers:
    • create order endpoint (validates request body)
    • verify payment endpoint (mentioned; not fully shown in subtitles)
  • Frontend later:
    • disables/enables UI based on credits/loading
    • ties into pricing plan selections (free vs paid)

Key tutorial-style takeaways (what the video explicitly demonstrates)

  • React Router navigation patterns
    • dashboard → generate → editor
    • back navigation using navigate(-1)
  • State management & API patterns
    • useState
    • try/catch/finally
    • loading spinners and error display
  • Axios configuration
    • env-based base URL
    • withCredentials: true
  • AI generation UI/UX
    • prompt input enables/disables Generate button
    • progress bar with step text
    • chat timeline of AI responses
  • Dynamic iframe rendering
    • srcDoc for local previews of AI HTML
    • deployed URL handling for share/deploy
  • Framer Motion + AnimatePresence
    • slide-in modals (code view)
    • animated card/loading panels
  • Troubleshooting approach
    • runtime errors (undefined title, undefined API response, null slug, Mongo duplicate keys)
    • route mismatches and missing routes
    • debugging by logging API payloads to locate missing data

Main speakers / sources

  • Speaker: “guys” / tutorial instructor (not explicitly named in subtitles)
  • Sources/tools referenced:
    • React Router
    • Axios
    • Redux (useSelector/useDispatch)
    • Framer Motion
    • Monaco Editor
    • Razorpay
    • MongoDB/Mongoose
    • backend endpoints (e.g., website controllers, deploy, get-by-id, get-all)

Original video