🚀 I built a PRODUCTION-READY AI Website Builder SaaS using the MERN Stack.
Source Code- https://rzp.io/rzp/7WAnpn3
Free Material – https://drive.google.com/drive/folders/1Jx_0PNH2Xe8P5N1d5Wdu_fXQpCGP5BaZ?usp=sharing
This AI tool can automatically generate websites and deploy them in ONE CLICK 🤯
This is not a basic project.
This is a real-world SaaS architecture with payments, credits, and deployment system.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔥 FEATURES
🤖 AI Website Generation
Describe your idea → AI builds the website instantly
🚀 One-Click Deployment
Deploy generated websites instantly
💰 Credit-Based System
Users spend credits to generate websites
💳 Secure Payments Integration
Credits purchase using Stripe Checkout
🎞 Premium Animations
Smooth UI with Motion animations
🔐 Authentication & Protected Routes
☁️ Production Deployment
Frontend + Backend deployed on Render
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🛠 TECH STACK
Frontend:
⚛ React.js
🎨 Tailwind CSS
🎞 Motion (Framer Motion)
Backend:
🟢 Node.js
🚂 Express.js
🍃 MongoDB
Payments:
💳 Stripe Integration (Checkout + Webhooks)
Deployment:
☁️ Render Cloud Hosting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 WHAT YOU WILL LEARN
• How to build a real AI SaaS product
• Credit logic implementation
• Stripe production-level integration
• One-click deployment architecture
• Secure backend design
• Fullstack deployment strategy
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🚀 PERFECT FOR
✔ Final Year Major Project
✔ SaaS Startup Idea
✔ Portfolio Project
✔ Advanced MERN Developers
✔ Freelancers
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
If you love AI + MERN projects:
👍 Like the video
💬 Comment your doubts
🔔 Subscribe for more advanced fullstack builds
Time Stamps –
0:00 Project Overview
10:19 Setting up Backend project
22:11 Let’s connect Mongodb
30:30 Creating User Model
38:18 Creating Auth Controllers
58:52 Creating Auth Routes
1:09:00 Setting up React Project
1:19:51 Creating Home page
1:41:42 Creating Login Modal Component
2:06:30 Setting up Firebase for Google Auth
2:22:45 Creating Authentication Middleware
2:34:32 Creating get Current User API
2:44:12 Setting up Redux Toolkit
3:24:34 Fetching Logout API
3:31:17 Creating Website Model
3:41:50 Setting Up OpenRouter For AI Response
3:53:37 Creating Dashboard and Generate page
4:20:52 Creating Website APIs
5:15:57 Creating Editor page
7:06:15 Continue with Dashboard
7:19:09 Continue with generate page
7:44:55 Creating Deploy APIs
7:54:43 Creating Live Site page
8:04:00 Continue with Dashboard
8:16:54 Creating Pricing Page
8:34:27 Setting Up stripe
9:10:43 Continue with Home
9:19:45 Let’s deploy Our project
9:31:23 Fixing Some issues
9:39:28 Finally we created our Ai Website Builder
#AI #MERNStack #SaaS #WebsiteBuilder #Stripe #FullStackProject #ReactJS #NodeJS #MongoDB #Render
