SiteForge

Build & deploy websites instantly using AI — full SaaS with payments.

Overview

SiteForge is a production-grade AI Website Builder SaaS built on the MERN stack. Users describe their idea, the AI generates a complete website, and they can deploy it with a single click. The platform includes a credit-based system, Stripe payments, Google OAuth via Firebase, and smooth UI animations — all deployed on Render.

Features

AI Website Generation — Describe your idea and get a fully generated website instantly via OpenRouter
One-Click Deployment — Deploy generated websites without leaving the app
Credit-Based System — Users spend credits to generate and deploy websites
Stripe Payments — Secure credit purchases via Stripe Checkout and Webhooks
Google Auth — Firebase-powered Google Sign-In with protected routes
Premium Animations — Smooth UI with Framer Motion
Redux State Management — Global auth and user state with Redux Toolkit
CI/CD Pipeline — Automated lint, build, and code review on every push and PR

Architecture

┌─────────────────────────────────────────────────────────────┐
│                        CLIENT (React + Vite)                │
│                                                             │
│   Home ──► Generate ──► Editor ──► Dashboard               │
│                │                       │                    │
│          Firebase Auth           Redux Store                │
│         (Google OAuth)         (user, credits)              │
└────────────────────────┬────────────────────────────────────┘
                         │ REST API (Axios)
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                  SERVER (Node.js + Express)                 │
│                                                             │
│  /api/auth  ──► Auth Controller  ──► JWT Middleware         │
│  /api/user  ──► User Controller                             │
│  /api/website ► Website Controller ──► OpenRouter API       │
│                                    ──► Deploy Logic         │
│                                                             │
│  Stripe Webhooks ──► Credit Updates                         │
└───────────────┬─────────────────────────────────────────────┘
                │ Mongoose ODM
                ▼
┌─────────────────────────┐
│   MongoDB (Atlas / Local) │
│   users | websites       │
└─────────────────────────┘

Tech Stack

Layer	Technology
Frontend	React 18, Vite, Tailwind CSS, Framer Motion
State Management	Redux Toolkit
Backend	Node.js, Express.js
Database	MongoDB + Mongoose
Authentication	Firebase (Google OAuth) + JWT
AI	OpenRouter API
Payments	Stripe (Checkout + Webhooks)
Linting	ESLint (client + server)
CI/CD	GitHub Actions, CodeRabbit, SonarCloud

Project Structure

SiteForge/
├─ .github/
│  ├─ workflows/
│  │  ├─ auto-assign.yml
│  │  ├─ ci.yml
│  │  ├─ greetings.yml
│  │  ├─ label.yml
│  │  ├─ sonarcloud.yml
│  │  └─ summary.yml
│  ├─ auto_assign.yml
│  ├─ dependabot.yml
│  ├─ labeler.yml
│  └─ pull_request_template.md
├─ client/
│  ├─ public/
│  ├─ src/
│  │  ├─ assets/
│  │  ├─ components/
│  │  │  └─ LoginModal.jsx
│  │  ├─ hooks/
│  │  │  └─ useGetCurrentUser.jsx
│  │  ├─ pages/
│  │  │  ├─ Dashboard.jsx
│  │  │  ├─ Editor.jsx
│  │  │  ├─ Generate.jsx
│  │  │  └─ Home.jsx
│  │  ├─ redux/
│  │  │  ├─ store.js
│  │  │  └─ userSlice.js
│  │  ├─ firebase.js
│  │  └─ App.jsx
│  ├─ .env
│  ├─ eslint.config.js
│  └─ package.json
├─ server/
│  ├─ config/
│  │  ├─ db.js
│  │  └─ openRouter.js
│  ├─ controllers/
│  │  ├─ auth.controller.js
│  │  ├─ user.controller.js
│  │  └─ website.controller.js
│  ├─ middlewares/
│  │  └─ isAuth.js
│  ├─ models/
│  │  ├─ user.model.js
│  │  └─ website.model.js
│  ├─ routes/
│  ├─ utils/
│  │  └─ extractJson.js
│  ├─ .env
│  ├─ index.js
│  └─ package.json
├─ CODE_OF_CONDUCT.md
├─ LICENSE
└─ README.md

Prerequisites

Make sure the following are installed before you begin:

Node.js v18 or higher
npm v9 or higher
MongoDB (local) or a MongoDB Atlas cluster
Git

node -v    # v18+
npm -v     # v9+
git --version

You will also need accounts on the following platforms (all free tiers work):

Firebase — for Google Auth
OpenRouter — for AI website generation
Stripe — for credit purchases

Environment Variables

`server/.env`

PORT=
MONGO_URL=
JWTSECRET=
OPEN_ROUTER_API_KEY=

`client/.env`

VITE_FIREBASE_API_KEY=

Never commit .env files. Both are already listed in .gitignore.

Note: Stripe environment variables will be added here once Stripe integration is configured. See the Stripe Setup section for what to expect.

Getting Started

1. Clone the Repository

git clone https://github.com/adithya-naik/SiteForge.git
cd SiteForge

2. Backend Setup

cd server
npm install

Create server/.env and fill in the values (see Environment Variables).

MongoDB — choose one:

Local: Start MongoDB (mongod) and set MONGO_URL=mongodb://localhost:27017/siteforge
Atlas: Create a free cluster at mongodb.com/atlas, whitelist your IP, and copy the connection string into MONGO_URL

Start the dev server:

npm run dev
# Server running at http://localhost:5000

3. Firebase Setup

Firebase is used for Google Sign-In on the frontend.

Go to the Firebase Console and click Add project.
Give it a name (e.g. siteforge) and complete the setup wizard.
In the left sidebar, go to Build → Authentication → Sign-in method.
Enable Google as a provider and save.
Go to Project Settings (gear icon) → General → scroll to Your apps.
Click Add app → Web, register the app, and copy the firebaseConfig object.
Add each value from firebaseConfig to client/.env using the VITE_FIREBASE_ prefix as shown above.

The client/src/firebase.js file already reads these variables — no code changes needed.

4. OpenRouter Setup

OpenRouter provides access to many AI models (GPT-4, Claude, Gemini, etc.) through a single API key.

Sign up at openrouter.ai.
Go to Keys and create a new API key.
Add the key to server/.env as OPEN_ROUTER_API_KEY.
In server/config/openRouter.js, you can swap the model string to change which AI model powers the generator (e.g. openai/gpt-4o, anthropic/claude-3-5-sonnet).

Free-tier credits are available on sign-up, which is enough for development.

5. Stripe Setup

Stripe handles credit purchases. You need both a secret key and a webhook secret.

5a. Get your API keys

Sign up or log in at dashboard.stripe.com.
Go to Developers → API keys.
Copy the Secret key (sk_test_...) and add it to server/.env as STRIPE_SECRET_KEY.

5b. Set up a webhook (local development)

Stripe needs to reach your local server to confirm payments. Use the Stripe CLI:

# Install Stripe CLI (macOS)
brew install stripe/stripe-cli/stripe

# Log in
stripe login

# Forward webhook events to your local server
stripe listen --forward-to localhost:5000/api/stripe/webhook

Copy the webhook signing secret printed in the terminal (whsec_...) and add it to server/.env as STRIPE_WEBHOOK_SECRET.

5c. For production

Create a webhook endpoint in the Stripe Dashboard under Developers → Webhooks, pointing to https://your-domain.com/api/stripe/webhook, and select the checkout.session.completed event.

6. Frontend Setup

cd ../client
npm install

Create client/.env and fill in the Firebase and backend values (see Environment Variables).

Start the Vite dev server:

npm run dev
# Frontend running at http://localhost:5173

Available Scripts

Backend (`server/`)

Command	Description
`npm run dev`	Start server with nodemon (hot reload)
`npm start`	Start server in production mode
`npm run lint`	Run ESLint on all server files
`npm run lint:fix`	Auto-fix ESLint issues

Frontend (`client/`)

Command	Description
`npm run dev`	Start Vite dev server
`npm run build`	Build for production
`npm run preview`	Preview the production build locally
`npm run lint`	Run ESLint on all client files
`npm run lint:fix`	Auto-fix ESLint issues

CI/CD Pipeline

The GitHub Actions workflow at .github/workflows/ci.yml runs on every push and pull_request.

Pipeline steps:

Checkout — checks out the repository
Setup Node.js 18 — installs the correct runtime
Cache dependencies — caches client/node_modules and server/node_modules separately
Install — runs npm install in both client and server
Lint — runs npm run lint in both directories
Build — runs npm run build in client
CodeRabbit — automatically reviews pull requests (uses GITHUB_TOKEN, no setup needed)
SonarCloud — static code analysis on every push

Test locally with act:

# Install act: https://github.com/nektos/act
act -j build

Code Style & Linting

ESLint is configured independently in both workspaces.

Backend — server/eslint.config.js uses Node.js/CommonJS environment rules
Frontend — client/eslint.config.js uses the React plugin with react/react-in-jsx-scope disabled (React 17+ JSX transform no longer requires React in scope)

Run linting across both workspaces:

cd server && npm run lint && cd ../client && npm run lint

Auto-fix safe issues:

npm run lint:fix   # Run inside client/ or server/

Contributing

Thank you for considering a contribution to SiteForge!

Step 1 — Fork and clone

git clone https://github.com/<your-username>/SiteForge.git
cd SiteForge
git remote add upstream https://github.com/adithya-naik/SiteForge.git
git fetch upstream

Step 2 — Create a branch

git checkout -b feat/your-feature-name

Branch naming:

Prefix	When to use
`feat/`	New feature
`fix/`	Bug fix
`docs/`	Documentation only
`refactor/`	Code refactor, no behavior change
`chore/`	Tooling, dependencies, CI

Step 3 — Install dependencies

cd server && npm install && cd ../client && npm install

Step 4 — Make changes, lint, and commit

# Lint before committing
cd server && npm run lint
cd ../client && npm run lint

# Commit with Conventional Commits format
git add .
git commit -m "feat: add user authentication with JWT"

Step 5 — Sync and push

git fetch upstream
git rebase upstream/main
git push origin feat/your-feature-name

Then open a pull request on GitHub. CI will run automatically and CodeRabbit will post a review.

Contribution guidelines:

Do not commit node_modules, .env files, or build artifacts
Keep PRs small and focused — one feature or fix per PR
If unsure about a large change, open an issue first to discuss

Contributors

Thanks to everyone who has contributed to SiteForge!

Troubleshooting

npm install fails with peer dependency errors

npm install --legacy-peer-deps

ESLint error: 'React' must be in scope when using JSX

Ensure react/react-in-jsx-scope: off is set in client/eslint.config.js. This is already the default in this repo.

MongoDB connection refused

# macOS (Homebrew)
brew services start mongodb-community

# Ubuntu/Debian
sudo systemctl start mongod

Or switch to MongoDB Atlas and update MONGO_URL in server/.env.

Firebase: auth/unauthorized-domain error

Go to Firebase Console → Authentication → Settings → Authorized domains and add localhost.

Stripe webhook signature verification failed

Make sure STRIPE_WEBHOOK_SECRET matches the secret shown when you ran stripe listen. Restart the server after updating .env.

OpenRouter: 401 Unauthorized

Double-check that OPEN_ROUTER_API_KEY is set correctly in server/.env and that the key has not expired or been revoked.

Port already in use

lsof -i :5000     # Find the process
kill -9 <PID>     # Kill it

CI workflow fails on GitHub Actions

Check the Actions tab for detailed logs. Common causes: missing lint/build scripts in package.json, uncommitted eslint.config.js changes, or Node version mismatch (workflow uses Node 18).

License

This project is licensed under the MIT License.

Name		Name	Last commit message	Last commit date
Latest commit History 72 Commits
.github		.github
client		client
server		server
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

SiteForge

Table of Contents

Overview

Features

Architecture

Tech Stack

Project Structure

Prerequisites

Environment Variables

server/.env

client/.env

Getting Started

1. Clone the Repository

2. Backend Setup

3. Firebase Setup

4. OpenRouter Setup

5. Stripe Setup

5a. Get your API keys

5b. Set up a webhook (local development)

5c. For production

6. Frontend Setup

Available Scripts

Backend (server/)

Frontend (client/)

CI/CD Pipeline

Code Style & Linting

Contributing

Step 1 — Fork and clone

Step 2 — Create a branch

Step 3 — Install dependencies

Step 4 — Make changes, lint, and commit

Step 5 — Sync and push

Contributors

Troubleshooting

License

About

Topics

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases 2

Contributors

Uh oh!

Languages

`server/.env`

`client/.env`

Backend (`server/`)

Frontend (`client/`)