Skip to content

thenabinamallik/WebGoAI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

🤖 WebGoAI — AI Website Builder

Generate stunning, responsive websites instantly using AI. No coding required.

Node.js React MongoDB Vite


🚀 Features

  • AI Website Generation — Describe your website and get a fully responsive HTML/CSS/JS site
  • Live Editor — Real-time preview with Monaco code editor
  • AI Chat — Iterate on your website with natural language instructions
  • One-Click Deploy — Deploy websites with shareable public URLs
  • Download Code — Export generated HTML files
  • Google OAuth — Secure authentication via Firebase
  • Credit System — Flexible pay-per-use model with Razorpay integration
  • Responsive Design — All generated websites are mobile-first and fully responsive

🏛️ Architecture

WebGoAI/
├── backend/                  # Express.js REST API
│   ├── config/               # External service configs (OpenRouter, Razorpay, Plans)
│   ├── controllers/          # Route handlers (auth, website, payment)
│   ├── database/             # MongoDB connection
│   ├── middlewares/          # JWT authentication middleware
│   ├── models/               # Mongoose schemas (User, Website, Payment)
│   ├── routes/               # Express route definitions
│   ├── utils/                # Utility functions (JSON extraction)
│   └── index.js              # Server entry point
│
├── frontend/                 # React + Vite SPA
│   └── src/
│       ├── components/       # Reusable UI components (Navbar, LoginModal, ChatPanel)
│       ├── pages/            # Page components (Home, Dashboard, Generate, Editor, etc.)
│       ├── redux/            # Redux Toolkit store with persistence
│       ├── lib/              # Utility functions
│       ├── firebase.js       # Firebase Auth configuration
│       ├── App.jsx           # Root component with routing
│       └── main.jsx          # Application entry point
│
└── README.md                 # This file

🛠️ Tech Stack

Layer Technology
Frontend React 19, Vite 7, Tailwind CSS 4, Redux Toolkit
Backend Node.js, Express 5, Mongoose 9
Database MongoDB Atlas
Auth Firebase Authentication (Google OAuth)
AI DeepSeek via OpenRouter API
Payments Razorpay
Editor Monaco Editor
Animations Motion (formerly Framer Motion)

⚙️ Setup & Installation

Prerequisites

  • Node.js 18+ and npm
  • MongoDB Atlas account (or local MongoDB)
  • Firebase project with Google Auth enabled
  • OpenRouter API key
  • Razorpay account (for payment features)

1. Clone the Repository

git clone https://github.com/thenabinamallik/WebGoAI.git
cd WebGoAI

2. Backend Setup

cd backend
npm install
cp sample.env .env
# Edit .env with your actual values

3. Frontend Setup

cd frontend
npm install
cp sample.env .env
# Edit .env with your actual values

4. Run Development Servers

Backend (from backend/ directory):

npm run dev

Frontend (from frontend/ directory):

npm run dev

The frontend will be available at http://localhost:5173 and the backend at http://localhost:8000.


🔐 Environment Variables

Backend (backend/.env)

Variable Description Example
NODE_ENV Environment mode development
PORT Server port 8000
MONGO_URI MongoDB connection string mongodb+srv://...
SECRET_KEY JWT signing secret (min 32 chars) your-secret-key
OPENROUTER_API_KEY OpenRouter API key sk-or-...
FRONTEND_URL Frontend URL (for CORS) http://localhost:5173
RAZORPAY_KEY_ID Razorpay Key ID rzp_test_...
RAZORPAY_SECRET Razorpay Secret your-razorpay-secret

Frontend (frontend/.env)

Variable Description Example
VITE_SERVER_URL Backend API URL http://localhost:8000
VITE_FIREBASE_API_KEY Firebase API key AIza...
VITE_FIREBASE_AUTH_DOMAIN Firebase auth domain app.firebaseapp.com
VITE_FIREBASE_PROJECT_ID Firebase project ID my-project
VITE_FIREBASE_STORAGE_BUCKET Firebase storage bucket app.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID Firebase sender ID 123456789
VITE_FIREBASE_APP_ID Firebase app ID 1:123:web:abc
VITE_RAZORPAY_KEY_ID Razorpay Key ID rzp_test_...

📜 Available Scripts

Backend

Command Description
npm run dev Start dev server with nodemon
npm start Start production server

Frontend

Command Description
npm run dev Start Vite dev server
npm run build Build for production
npm run preview Preview production build
npm run lint Run ESLint

🙏 Credits


📄 License

ISC License. See the original repository for full license details.

About

Generate stunning, responsive websites instantly using AI. No coding required.

Topics

Resources

Stars

Watchers

Forks

Contributors

Languages