Video summary

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

Main summary

Key takeaways

Technology

What the video builds (Part 1)

  • A step-by-step AI Website Builder that lets a user write a prompt/question, and the system generates a complete website automatically.

  • A real workflow is demonstrated: generate → view UI → update parts via AI → show source code → deploy → share link

  • The stack being demonstrated is the MERN stack (MongoDB, Express, React, Node.js), with AI integration (OpenRouter/DeepSeek) and auth/payment setup.

Product / demo features shown in the UI

  1. Login system + credits

    • Users log in (demo uses Google OAuth).
    • New users receive credits (e.g., 100 credits).
    • Credits decrease when:
      • generating websites
      • making updates (e.g., changing the navbar color costs credits)

  2. Dashboard → New Website generation

    • User clicks “New Website” and enters prompts such as:
      • “Create me a Snake game”
      • “Create grocery E-commerce with add to cart functionality”
    • A progress bar shows a wait time (example: 8–12 minutes).

  3. Generated site validation

    • The produced website is mobile responsive (verified by resizing/inspecting UI).
    • Users can:
      • play the generated game
      • apply AI-driven updates (example: change navbar color to red)

  4. Code visibility + deployment + sharing

    • “View code” displays generated source code.
    • Deploy generates a URL.
    • Share provides a copyable link.

  5. Pricing / plans + credit top-ups

    • Plans include Free / Pro / Enterprise:
      • Pro includes more credits.
    • Payment uses Razorpay integration (demo uses dummy/test card data).

  6. Complex site generation example

    • Grocery e-commerce includes pages like:
      • Home, Products, About, Contact, Pay/Cart
    • Demonstrates Add to Cart and updates cart totals.

Tech concepts and implementation covered (MERN + auth + infra)

1. Backend setup (Node / Express / Mongoose / JWT)

Creates a backend with:

  • Express
  • Mongoose (MongoDB connection)
  • dotenv/env for secrets (MongoDB URI, JWT secret)
  • JWT for auth
  • cookie-parser and cookies to store tokens
  • nodemon for auto-restart

Defines:

  • A User model with fields such as:
    • name
    • email (unique)
    • avatar
    • credits (default 100, min 0)
    • plan enum: Free, Pro, Enterprise
    • timestamps enabled

2. Google authentication flow (Firebase Auth + backend)

Frontend uses Firebase for Google sign-in:

  • Initialize Firebase SDK
  • Use GoogleAuthProvider
  • Use signInWithPopup

Backend auth controller:

  • Receives name, email, avatar
  • Finds or creates the user in MongoDB
  • Generates a JWT token
  • Stores JWT in HTTP-only cookies

Cookie-based login:

  • Logout clears token cookie
  • Middleware verifies JWT and populates request.user

3. CORS + credentials handling (important bug fix)

  • Fixes a common CORS origin policy error.
  • Adds CORS middleware with whitelisted frontend origin (e.g., React/Vite port).
  • Re-tests Google login and persistence after applying CORS changes.

Frontend setup and UI tooling

1. React app scaffolding + Tailwind CSS

  • Creates a React frontend and installs Tailwind CSS.
  • Resolves a Tailwind version conflict by adjusting package.json to match installed versions.

2. Routing

  • Uses React Router DOM:
    • Home page
    • additional routes (e.g., Pricing, Dashboard, etc.)

3. UI animations

  • Uses Framer Motion for motion components such as:
    • animated navbar dropdown / modal transitions
    • animated hero text entrance
    • animated badges and cards

4. UI icons

  • Uses Lucide React icons (e.g., coins, plus/minus-style icons)

Redux state management + persistence

1. Redux Toolkit store + user slice

  • Creates a Redux store and a userSlice:
    • userData initially null
    • action to set user data after login

2. Persisting user session with redux-persist

  • Uses redux-persist to keep user data across refresh.
  • Includes fixes for common module/type issues, including:
    • storage.getItem not functioning due to incorrect default import handling
    • adjusting export/import shape in store.js
  • After persistence, user state remains after browser refresh.

Credits and authenticated gating (backend middleware concept)

The website-generation endpoint is protected:

  • Middleware verifies JWT token from cookies
  • Confirms user exists
  • Checks user has enough credits (example threshold: 10)
  • If insufficient, returns an error like “not enough credits”

AI website generation (OpenRouter + DeepSeek) — concept introduced

  • Backend calls OpenRouter for AI generation.
  • A configuration file (OpenRouter.js) is planned under config/.
  • Uses an API key stored in environment variables.
  • Chooses a DeepSeek model (example mentioned: DeepSeek v3.2).

AI prompt constraints / output requirements:

  • Instructs the model to output:
    • valid raw JSON
    • exactly one HTML file
    • the HTML must contain:
      • a single <style>
      • a single <script>
    • required SPA pages:
      • Home, About, Services, Features, Contact
    • navigation requirements:
      • switch pages via JS
    • responsive design and image usage (e.g., Unsplash)
  • Includes:
    • temperature control
    • robust error handling

Note: the transcript ends while still setting up the OpenRouter integration and controller wiring.

Main speakers / sources

  • Rohit (introduced as “hey guys this is Rohit”)
  • Source channel/person: Weblight Builders (video is being watched on this channel)

Original video