Add analytics route, web/main.js API module, and project README

[Copilot]

The repo was missing the analytics session endpoint, a dedicated frontend JS module, and a meaningful README — all required to complete the cloud deployment integration (Supabase → Render → Vercel) without any local setup.

Backend

• backend/src/routes/analytics.js — new POST /api/analytics/session route; validates product_id, platform, duration, user_agent, lat/lng via express-validator, inserts into ar_sessions
• backend/src/server.js — mounts analytics router at /api/analytics

curl -X POST https://<api>/api/analytics/session \
  -H "Content-Type: application/json" \
  -d '{"product_id":1,"platform":"web","duration":45}'
# → {"success":true,"data":{"session_id":1,"product_id":1,"platform":"web","created_at":"…"}}

Frontend

• web/main.js (new) — ES module exporting loadProducts(), loadProductByQR(), logSession() with API_BASE resolved from import.meta.env.VITE_API_BASE (Vite/Vercel) falling back to http://localhost:3000; also contains the Three.js WebAR viewer logic (extracted from the inline script)
• web/index.html — replaces the 160-line inline <script type="module"> with <script type="module" src="./main.js">; CDN importmap retained for plain-browser serving

Database

• database/001_init_schema.sql — adds platform VARCHAR(50) column to ar_sessions (matched by the analytics insert)

Docs

• README.md — replaces empty file with architecture overview, Docker quick-start, API endpoint table, and project structure
• docs/API.md — documents the new analytics endpoint

Original prompt

Deployment & Integration Guide for QR to 3D AR System

After successful code file creation, implement complete deployment and integration:

1. Database Setup (Supabase)

Step 1: Create Supabase Project

• Visit https://supabase.com
• Sign up with GitHub
• Create new project named "qr-3d-ar"
• Choose region closest to users
• Wait for deployment

Step 2: Run SQL Migrations

• Copy schema from database/001_init_schema.sql
• Paste in Supabase SQL Editor
• Execute queries
• Verify tables created

Step 3: Get Connection String

• Go to Settings > Database
• Copy PostgreSQL connection string
• Format: postgresql://[user]:[password]@[host]:5432/[database]
• Save for backend environment

2. Backend Deployment (Render)

Step 1: Connect Repository

• Visit https://render.com
• Sign in with GitHub
• Click "New +" > "Web Service"
• Select analysis-feedback-repo
• Choose main branch

Step 2: Configure Service

• Name: qr-3d-ar-backend
• Environment: Node
• Build Command: npm install
• Start Command: npm start
• Root Directory: backend

Step 3: Set Environment Variables

• DATABASE_URL: PostgreSQL connection from Supabase
• NODE_ENV: production
• JWT_SECRET: Generate random 32+ char string
• CORS_ORIGINS: Will update after frontend deployment
• PORT: 3000

Step 4: Deploy

• Click "Deploy"
• Wait for build completion
• Get service URL (https://qr-3d-ar-backend.onrender.com)

Verification:

curl https://qr-3d-ar-backend.onrender.com/api/health
# Response: {"status":"✅ API Running"}

3. Frontend Deployment (Vercel)

Step 1: Import Project

• Visit https://vercel.com
• Sign in with GitHub
• Click "Add New" > "Project"
• Select analysis-feedback-repo

Step 2: Configure Settings

• Framework: Other (HTML/CSS/JS)
• Root Directory: web
• Build Command: (leave blank)
• Output Directory: (leave blank)

Step 3: Environment Variables

• VITE_API_URL: https://qr-3d-ar-backend.onrender.com
• VITE_APP_NAME: QR 3D AR Viewer

Step 4: Deploy

• Click "Deploy"
• Wait for completion
• Get Vercel URL (https://your-project.vercel.app)

Verification:

Visit: https://your-project.vercel.app/index.html
# Should see rotating 3D cube + status indicators

4. Connect Frontend to Backend

Update web/main.js:

const API_BASE = process.env.VITE_API_URL || 'http://localhost:3000';

// Fetch products
async function loadProducts() {
  const response = await fetch(`${API_BASE}/api/products`);
  const products = await response.json();
  console.log('Products:', products);
  return products;
}

// Fetch by QR code
async function loadProductByQR(qrCode) {
  const response = await fetch(`${API_BASE}/api/qr/${qrCode}`);
  const product = await response.json();
  console.log('Product:', product);
  return product;
}

5. Update Backend CORS

Update backend/src/server.js:

app.use(cors({
  origin: process.env.CORS_ORIGINS?.split(',') || 'http://localhost:3000',
  credentials: true
}));

Update environment:

• On Render backend dashboard
• Go to Environment
• Update CORS_ORIGINS: https://your-project.vercel.app
• Redeploy backend

6. Test Complete Integration

API Endpoints to Test:

1. Health Check:

curl https://qr-3d-ar-backend.onrender.com/api/health

2. Get All Products:

curl https://qr-3d-ar-backend.onrender.com/api/products

3. Get Product by QR:

curl https://qr-3d-ar-backend.onrender.com/api/qr/QR_CHAIR_001

4. Log Session:

curl -X POST https://qr-3d-ar-backend.onrender.com/api/analytics/session \
  -H "Content-Type: application/json" \
  -d '{"product_id":1,"platform":"web","duration":45}'

7. Add Sample Data to Database

Insert Products:

INSERT INTO products (product_name, description, model_url, width, height, depth, category, price)
VALUES 
  ('Modern Chair', 'Sleek ergonomic chair', 'https://example.com/chair.glb', 0.5, 1.2, 0.5, 'furniture', 299.99),
  ('Wooden Table', 'Beautiful wooden table', 'https://example.com/table.glb', 1.0, 0.7, 1.0, 'furniture', 599.99);

INSERT INTO qr_mappings (qr_code, product_id)
VALUES 
  ('QR_CHAIR_001', 1),
  ('QR_TABLE_001', 2);

8. Final Checklist

• Supabase project created
• Database tables created & verified
• Backend deployed to Render
• Backend health check working
• Frontend deployed to Vercel
• Frontend loads successfully
• Frontend connects to backend API
• Sample data inserted
• All 7 API endpoints tested
• 3D viewer displays rotating cube
• Analytics tracking working
• QR code scanner ready
• CORS configured correctly
• Environment variables set
• Documentation updated

9. Monitoring & Logging

Render Dashboard:

• Monitor logs in real-time
• Check error messages
• View request/response stats

Vercel Dashboard:

• Check deployment status
• Monitor performance metrics
• View error reports

Supabase Dashboard...

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.