Complete step-by-step guide — Claude Project setup, both GitHub repos, Render proxy deploy, and Cloudflare Pages. Everything named exactly. No guessing.
0
Set Up Your Claude Project
5 min
A Claude Project keeps all your build conversations in one place with shared context. Every time you open the project, Claude already knows the full suite — files, stack, decisions — without you re-explaining anything.
1
Go to claude.ai → click Projects in the left sidebar → New Project
If you don't see Projects, upgrade to Claude Pro ($20/mo) — it's required for Projects.
2
Name the project exactly:
KJE Glow Suite
3
Add these Custom Instructions (paste exactly):
You are building the KJE Glow Suite for Jim Harris (King James), founder of DevelopingRiches, Inc.
SUITE OVERVIEW:
6 connected HTML apps deployed to Cloudflare Pages (faceaudit-web repo):
- index.html → FaceAudit AI (face analysis, glow-up studio, accessories try-on)
- style.html → StyleAudit AI (body type, outfit blueprints, color palette)
- voicedoc.html → Voice Doc AI (pitch analysis, voice coaching, exercises)
- drglow.html → Dr. Glow AI (chatbot, price intelligence, treatment costs)
- transform.html → GlowTransform AI (what would I look like if...)
- lymphatic.html → Lymphatic Expert AI (congestion analysis, drainage protocols)
- Shared: help-widget.js, drglow-widget.js, smart-detect.js (drop into any page)
PROXY: faceaudit-proxy repo → Render → server.js (Express, port 3000)
API: Anthropic Claude Sonnet 4 (claude-sonnet-4-6)
PROXY_URL in all files: https://faceaudit-proxy.onrender.com/analyze
STACK: Cloudflare Pages (frontend) + Render (proxy) + Anthropic API
REPOS: github.com/[username]/faceaudit-web | github.com/[username]/faceaudit-proxy
JIM'S RULES:
- Always produce complete ready-to-use files — no placeholders
- Single paste-and-go command blocks only
- Specify exact repo, folder, and filename on every file
- Never modify existing working features when adding new ones
WHEN UPDATING FILES: Always provide the complete file, not a diff.
WHEN ADDING FEATURES: Add to the correct HTML file and specify which one.
4
Add Project Knowledge files (optional but powerful)
Upload each HTML file from the suite. Claude can reference them directly when you ask for updates.
5
Start all future build conversations INSIDE this project
Click the project → New Conversation. Claude now has full context from the start of every session.
✓From now on: open the KJE Glow Suite project → New Conversation → ask for any update. No re-explaining the stack.
1
Download All Files
5 min
You have 11 files total. Here's exactly where each one goes.
→ faceaudit-proxy repo (2 files)
📄
server.js
faceaudit-proxy/server.js
📦
package.json
faceaudit-proxy/package.json
→ faceaudit-web repo (9 files)
🔬
index.html
FaceAudit AI
👔
style.html
StyleAudit AI
🎙️
voicedoc.html
Voice Doc AI
🩺
drglow.html
Dr. Glow AI
🪄
transform.html
GlowTransform AI
🫧
lymphatic.html
Lymphatic Expert AI
⚙️
help-widget.js
Shared help system
🩺
drglow-widget.js
Floating Dr. Glow chat
🧠
smart-detect.js
Cross-app intelligence engine
✓Also save this file (setup.html) into faceaudit-web so it's accessible at yoursite.pages.dev/setup.html
Summary: "Add KJE Glow Suite" → Commit to main → Publish repository → Keep private ✅ → Publish Repository
3
Deploy Proxy to Render
10 min
3.1
Go to render.com → Log in → New + → Web Service
3.2
Connect repository: faceaudit-proxy
Click Connect a repository → find faceaudit-proxy → select it
3.3
Fill in these exact settings:
Name
faceaudit-proxy
Region
Oregon (US West)
Branch
main
Runtime
Node
Build Command
npm install
Start Command
node server.js
Instance Type
Free (or Starter $7/mo to avoid sleep)
3.4
Add Environment Variable
Scroll to Environment Variables → Add Environment Variable:
Key
ANTHROPIC_API_KEY
Value
sk-ant-api03-... (your key from console.anthropic.com)
⚠Get your API key at console.anthropic.com → API Keys → Create Key. Keep it secret — never paste it in a file.
3.5
Click Create Web Service → wait 2–3 min for "Live" status
Your proxy URL will be something like: https://faceaudit-proxy.onrender.com — save this URL.
3.6
Test it works
Visit your proxy URL in a browser. You should see "Cannot GET /" — that means it's running. ✅
⚠If your Render URL is different from faceaudit-proxy.onrender.com, open each HTML file in Notepad, find the line const PROXY_URL = 'https://faceaudit-proxy... and update it to your actual URL.
4
Deploy Frontend to Cloudflare Pages
8 min
4.1
Go to pages.cloudflare.com → Log in or create free account
4.2
Create a project → Connect to Git → Connect GitHub
Authorize Cloudflare to access your GitHub account when prompted.
4.3
Select faceaudit-web → Begin Setup
4.4
Fill in these settings:
Project name
faceaudit-web
Production branch
main
Framework preset
None
Build command
(leave blank)
Build output dir
(leave blank)
4.5
Click Save and Deploy → wait ~60 seconds
You'll get a live URL like: https://faceaudit-web.pages.dev
4.6
Test every app
yoursite.pages.dev/ → FaceAudit AI yoursite.pages.dev/style.html → StyleAudit AI yoursite.pages.dev/voicedoc.html → Voice Doc AI yoursite.pages.dev/drglow.html → Dr. Glow AI yoursite.pages.dev/transform.html→ GlowTransform AI yoursite.pages.dev/setup.html → This guide
5
Wire In the Shared Widgets
5 min
Add three lines to the bottom of each HTML file (just before </body>) to enable cross-app SmartDetect signals, the Dr. Glow floating chat, and the Help widget on every page.
<!-- Add these three lines just before </body> in each HTML file -->
<script src="smart-detect.js"></script>
<script src="drglow-widget.js"></script>
<script src="help-widget.js"></script>
Add to these 6 files: index.html, style.html, voicedoc.html, drglow.html, transform.html, lymphatic.html
✓Once added, every page will have a floating 🩺 Dr. Glow button (bottom right) and a floating ? Help button (above it). They auto-detect which app they're on.
6
Add a Custom Domain (Optional)
5 min
6.1
Cloudflare Pages → your project → Custom Domains → Set up a custom domain
6.2
Enter your domain
Examples: glowaudit.com · faceaudit.ai · kjebeauty.com · or a subdomain like glow.yourdomain.com
6.3
If domain is already on Cloudflare: auto-configures. Done.
If it's elsewhere: add the CNAME record Cloudflare shows you at your domain registrar.
7
How to Update the Suite Going Forward
Ongoing
Every future change follows the same 3-step workflow:
1
Open KJE Glow Suite project in Claude → request the update
Example: "Add a skin type selector to FaceAudit — I want to specify oily/dry/combination before scanning." Claude outputs the complete updated file.
2
Download the file → replace in your faceaudit-web folder
Overwrite the old file at C:\Users\Jim\Documents\GitHub\faceaudit-web\
Summary: describe the change → Commit to main → Push origin → Cloudflare auto-deploys.
✓You never need to touch Render again unless you update the proxy. The proxy (server.js) only changes if you add a new AI endpoint or update rate limiting.
✓
Your Complete Stack — Summary
Reference
Proxy Repo
faceaudit-proxy GitHub (private)
Proxy Server
faceaudit-proxy onrender.com
Frontend Repo
faceaudit-web GitHub (private)
Live URL
faceaudit-web .pages.dev
API Key
Render env var ANTHROPIC_API_KEY
Claude Project
KJE Glow Suite claude.ai/projects
FaceAudit AI → yoursite.pages.dev/
StyleAudit AI → yoursite.pages.dev/style.html
Voice Doc AI → yoursite.pages.dev/voicedoc.html
Dr. Glow AI → yoursite.pages.dev/drglow.html
GlowTransform → yoursite.pages.dev/transform.html
Setup Guide → yoursite.pages.dev/setup.html
Proxy API → https://faceaudit-proxy.onrender.com/analyze