AI Web Builder UMKM
Overview
Stack
- Vite 8 +
@vitejs/plugin-react
- Node.js (Express.js)
- React 19 (JS, no TypeScript)
- Tailwind CSS v4 via
@tailwindcss/vite — no tailwind.config.js needed, see src/index.css:1 and vite.config.js:1
Prerequisites
- Node.js >= 18 (tested on 24.18.0)
- npm 11
Setup
Clone the repository
git clone https://github.com/aerizaaminanto/AIWebBuilderUMKM
Direct to the project directory
cd AIWebBuilderUMKM
Install the npm package
npm install
Run the web
npm run dev # http://localhost:3000
Environment Variables
Set these in .env (local) or your deploy target's env settings (Vercel dashboard → Project → Settings → Environment Variables). None are required to run the app — each missing/unset var just disables that one feature (not_configured response, AI tidak merespons / offline fallback, or a disabled UI control) rather than breaking the build.
| Variable | Required for | Notes |
|---|
GEMINI_API_KEY | AI generation & chat revision (US-05/07/08) | Server-only, never sent to the client. Free tier is capped at 20 requests/day. |
VERCEL_TOKEN | One-click Publish (US-11, stretch goal) | Vercel → Account Settings → Tokens → Create. Scope it to the team/project you want deploys to land in. |
VERCEL_TEAM_ID | Publish, only if the token belongs to a team account | Vercel → Team Settings → General → Team ID. Omit for a personal account token. |
ALLOWED_ORIGIN | CORS lockdown before going live | Comma-separated origins, e.g. https://your-demo.vercel.app. Unset = any Origin is accepted (dev default). |
ENABLE_API_DOCS | Swagger UI at /api/docs | Off by default so the API spec isn't publicly browsable. Set to true locally if you need it. |
Deploying this app to Vercel: push to GitHub, then vercel import the repo (Framework Preset: Vite — it auto-detects api/*.js as Serverless Functions). Add GEMINI_API_KEY (and VERCEL_TOKEN/VERCEL_TEAM_ID if you want the Publish button live) under Project Settings → Environment Variables, then redeploy.
Testing
| Command | Description |
|---|
npm test | Unit tests (Vitest) |
npm run test:e2e | E2E tests (Playwright, desktop + mobile emulation); writes an HTML report to playwright-report/ |
npm run test:e2e:report | Open the HTML report from the last E2E run |
Test cases, latest results, and the issues each test covers are documented in doc/TEST_REPORT.md.
Project Member
- Aldiansyah Anugrah Ramadhan
- Achmad Eriza Aminanto
- Ninditya Salma Nurul Aini
