# Weblify - AI Website Builder SaaS Platform (MERN Stack)

Created: 18 April 2026 Email: pahil0504@gmail.com

Thank you for choosing our template!
If you need any assistance or have questions beyond this documentation, please don’t hesitate to open a support ticket on our support forum. We’re here to help and will get back to you as soon as possible.

24/7 Support: Reach out to us anytime via our profile messaging system.

Documentation v1.0

Important – Third-Party AI Services & Costs
This application uses OpenAI and Google Gemini. API keys and usage costs are not included in the purchase price.

## Template Introduction

Weblify is a powerful AI-driven no-code website builder that allows users to generate fully responsive, multi-page websites in seconds. With real-time customization, drag-and-drop sections, and HTML export functionality, users can create professional websites without any coding knowledge.

### Technology Stack

- Frontend: React.js (Vite) with TypeScript
- Backend: Node.js & Express.js
- Database: MongoDB
- Styling: Tailwind CSS
- Authentication: JWT-based Authentication
- Architecture: RESTful API-based SaaS
- AI Integration: OpenAI / Gemini API (user-configurable)

## Getting Started

#### 1. Install Node.js

Ensure you have Node.js installed on your computer. You can download it from here. Make sure to install the LTS (Long Term Support) version.

#### 2. Setup Backend

1. Open new terminal and go to WeblifyBackend:

cd WeblifyBackend

2. Install dependencies

npm install

3. .env file inside change your path:

BASE_URL=http://localhost:5001

JWT_SECRET=your_jwt_secret

FRONTEND_BASE_URL=http://localhost:3000

MONGODB_URl=mongodb://localhost:27017/dbname

GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID

GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET

GOOGLE_CALLBACK_URL=http://localhost:5300/api/auth/google/callback

GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID

GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET

GITHUB_CALLBACK_URL=http://localhost:5300/api/auth/github/callback

4. Run backend server:

npm start

or for development:

node app.js (will start the dev server at http://localhost:5001)

5. Admin Login Details:

Email : admin@gmail.com
Password : Admin@123

For more details, refer to the Node documentation here

#### 3. Setup Frontend

1. Open new terminal and go to WeblifyFrontend:

cd WeblifyFrontend

2. Install dependencies

npm install

3. .env file inside change your path:

VITE_API_URL=http://localhost:5001/api/

VITE_BACKEND_BASE_URL=http://localhost:5001

4. Run Frontend:

npm start

or for development:

npm run dev (will start the dev server at http://loaclhost:3000)

For more details, refer to the React documentation here

#### 4. Import Database (MongoDB)

Direct data import:

Open terminal / command prompt in the folder root directory

Run:

cd WeblifyBackend

node importdata.js

OR

Open new terminal and go to WeblifyBackend:

cd database

mongoimport --db dbname --collection admins --file admins.json --jsonArray

mongoimport --db dbname --collection countries --file countries.json --jsonArray

mongoimport --db dbname --collection states --file states.json --jsonArray

mongoimport --db dbname --collection user --file user.json --jsonArray

Like this type add all the collection one by one

#### 5. Export Full Database (MongoDB)

Direct data Export:

Open terminal / command prompt in the folder root directory

Run:

cd WeblifyBackend

node exportdata.js

Generate exportdatabase folder in root directory

#### 6. Deploy MERN Stack Live

MongoDB Setup:

Use MongoDB Atlas Go to MongoDB Atlas

Backend Deployment:

Deploying to Render Go to https://render.com

Frontend Deployment:

Deploying to Vercel Go to https://vercel.com

OR

Deploying to Netlify Go to https://app.netlify.com

## Pages and Components

- Pages Locate src/app/
- Component Locate src/components/

## Change Your Primary Color and Fonts

Locate src/styles/theme.css to change the primary color scheme of your theme and change your fonts. Done in no time!

## Change Your Logo , Favicon and other static images

Locate public/ to change the logo, favicon and other static images.

## Setup Routes

Locate src/app/App.tsx to check all routes.

## Database

Locate WeblifyBackend/database -> attach all the table.

## Setup Admin dashboard

Go to Admin dahsboard -> sidebar option Payment Gateway -> update your key

Go to Admin dahsboard -> sidebar option Settings -> update your Email & Password for email sent

Go to Admin dahsboard -> sidebar option Manage API -> update Key your requirement

Note :

2. You can select Gemini AI API Update Gemini AI API KEY

3. You can select OpenAI API Update OpenAI API KEY

4. You can using AI based description so set Gemini AI API KEY

## Credits

Font Used: Google Fonts

Icon Used: React Lucide Icons

Image Used: Freepik & Vecteezy

↑