EasyQR: QR Code Generator

• Create, customize, and manage QR codes with design-forward controls (color palettes, templates, logo placement).
• Login uses Google Identity Services; hero imagery is pulled from Unsplash via a server proxy.

Core MVP Capabilities

• QR types: URL, plain text, contact card (vCard). Smart URL normalization (https://).
• Claude template: clean, high-scannability defaults; logo centered; high error correction; palette suggestions via color picker.
• Color system: real-time preview, palette generation/history, named-color lookup (from RGB Color Picker reference).
• Export: print-ready output; dynamic links planned.
• Access: Google OAuth; session “remember me” option.

Tech Stack (MVP)

• Frontend: (planned) React 18 + TypeScript, Tailwind CSS, Zustand; QR rendering with qrcode.js; GIS for auth.
• Backend: Node.js + Express; session auth; MongoDB (planned); Cloudinary/S3 for assets (planned); Swagger/OpenAPI for docs (planned).
• Integration: Unsplash random photo proxy for backgrounds; RGB Color Picker components/algorithms for color workflows.

API Surface (early)

• POST /api/auth/google – verify Google ID token, set session.
• POST /api/auth/logout – destroy session.
• GET /api/unsplash/random – proxy to Unsplash (requires UNSPLASH_ACCESS_KEY).
• Planned: POST /api/qr/generate, GET/PUT/DELETE /api/qr/:id, GET /api/colors/palettes, POST /api/colors/generate, GET /api/colors/:name.

Roadmap (weeks)

• Phase 1 (done): project setup, Google OAuth, basic QR generation study, Unsplash integration.
• Phase 2 (in progress): Claude template, color customization tools, export.
• Phase 3: more QR content types, additional templates, dashboard, advanced color management.
• Phase 4: perf tuning, accessibility, launch hardening.

Success Targets

• Time to first QR < 60s; QR generation < 1s; page load < 2s.
• Color customization used by >60% of sessions; QR scan success >98%.

Local Setup

• Requirements: Node 18+.
• Populate .env (kept out of git):
  • GOOGLE_CLIENT_ID=
  • GOOGLE_CLIENT_SECRET=
  • UNSPLASH_ACCESS_KEY=
  • SESSION_SECRET= (set a strong value)
• Install & run: npm install then npm start (serves login.html, GIS button, Unsplash hero).
• Client ID is exposed to the browser via /client-id.js; Unsplash proxy lives at /api/unsplash/random.

Files to know

• login.html – EasyQR login UI with Google button + Unsplash hero.
• routes.js – API routes, Unsplash proxy, session guard, dashboard placeholder.
• server.js – Express bootstrap/session config.
• public/logo.svg – brand mark for favicon/OG use.