Live Preview: https://instantweb-1.onrender.com
InstantWeb is a full-stack AI-powered SaaS application that allows users to generate, edit, preview, and deploy complete websites using natural language prompts. Built with the MERN stack, it integrates DeepSeek AI via OpenRouter to produce responsive, real-world HTML/CSS/JS websites instantly.
✨ Features
🤖 AI Website Generation — Describe your website in plain English and get a fully responsive HTML site in seconds using DeepSeek via OpenRouter
🖊️ Monaco Code Editor — Edit the generated code directly in-browser with VS Code-like experience
👁️ Live Preview — Instant iframe preview of generated and edited websites
🚀 One-Click Deploy — Deploy websites to a public URL instantly
💳 Razorpay Payments(test-mode) — Integrated credit-based payment system with secure signature verification
🔐 Google Authentication — Firebase-powered Google OAuth login
🎯 Credit System — Pay-as-you-go model (Free / Pro / Enterprise plans)
📱 Fully Responsive UI — Works seamlessly on mobile, tablet, and desktop
📸 Screenshots
🏠 Homepage
Generate Page — AI Website Builder
📊 Dashboard — All Your Websites
🖊️ Website Editor — Monaco + Live Preview
💳 Razorpay Payment Gateway
🛠️ Tech Stack
Frontend
TechnologyPurposeReact + ViteFrontend framework & build toolRedux ToolkitGlobal state managementRedux PersistState persistence across sessionsAxiosHTTP requestsFirebase AuthGoogle OAuth authenticationFramer MotionAnimations & transitionsMonaco EditorIn-browser code editorLucide ReactIconsReact Hot ToastNotificationsTailwind CSSStyling
Backend
TechnologyPurposeNode.js + ExpressServer & REST APIMongoDB + MongooseDatabaseJWTAuthentication tokensHTTP-Only CookiesSecure token storageOpenRouter APIAI model accessDeepSeek ModelWebsite code generationRazorpayPayment gatewayCORS + Cookie ParserSecurity & middlewareExpress Rate LimitAPI rate limiting & DDoS protection
🏗️ Architecture
┌─────────────────────────────────────────────────────────┐
│ CLIENT (React + Vite) │
│ HomePage → Login → Dashboard → Generate → Editor │
│ Redux Store (Persist) + Firebase Auth │
└──────────────────────┬──────────────────────────────────┘
│ Axios + HTTP-Only Cookies
│
┌──────────────────────▼──────────────────────────────────┐
│ SERVER (Express + Node.js) │
│ │
│ Auth Routes → authController → Firebase + JWT │
│ Website Routes → websiteController → OpenRouter AI │
│ Payment Routes → paymentController → Razorpay │
│ │
│ Middleware: authMiddleware + rateLimiter │
└──────────────────────┬──────────────────────────────────┘
│
┌──────────────────────▼──────────────────────────────────┐
│ MongoDB Atlas │
│ Users | Websites | Payments Collections │
└─────────────────────────────────────────────────────────┘
🔐 Security Implementation
✅ HTTP-Only Cookies — JWT stored in httpOnly cookies, inaccessible to JavaScript (XSS protection)
✅ Secure + SameSite Flags — Cookies only sent over HTTPS, CSRF protected
✅ Rate Limiting — Different limits per route (auth: 10/15min, payments: 5/hr, generate: 20/hr)
✅ Razorpay Signature Verification — HMAC-SHA256 cryptographic verification on every payment
✅ Protected Routes — authMiddleware validates JWT on every protected API call
✅ CORS Configuration — Restricted to frontend domain only
✅ Filtered API Responses — Sensitive fields never sent to client
👩💻 Author
Palak Verma
🎓 B.Tech CSE, CSJM University Kanpur (2024–2028) 💼 Full Stack MERN Developer 🔗GitHub-- https://github.com/PalakVerma-code