📸 Photo Maker

A production-grade passport & ID photo maker that runs entirely in the browser. Upload a photo, remove the background with AI, pick a backdrop colour, fine-tune it, and export a print-ready 300 DPI sheet with multiple copies neatly tiled — ready for the printer.

Built for a real stationery shop counter, where customers walk in for passport-size prints.

🔗 Live app: https://dell-ranu2026.vercel.app

🔒 Privacy: There is no backend. Every photo is processed locally in your browser — nothing is ever uploaded to a server.

---

✨ Features

• 🔐 Google Sign-In (Firebase Auth) with profile display + logout
• 📤 Upload by click or drag-and-drop
• ✂️ Crop tool with corner handles + rule-of-thirds grid
• 🔄 Rotate left/right and horizontal flip
• ↩️ Undo / Redo (up to 15 steps)
• 🎚️ Brightness, Contrast & Saturation sliders
• 🔍 Zoom + drag-to-position on the live passport preview
• 🪄 AI Background Removal — Hugging Face briaai/RMBG-1.4 model running in-browser (≈50 MB, cached after first load)
• 🎨 7 background colours — White, Light Blue, Light Green, Navy Blue, Red, Yellow, Gray
• 📄 Paper sizes — 4×6, 5×7, A4, A5, with Portrait / Landscape (4×6 landscape fits 8 photos)
• 🖨️ Paper-quality presets — Epson Premium Glossy, Matte, Plain, Glossy
• 🔢 Copy counter that auto-clamps to the max that fits the chosen sheet
• 👀 Live side-by-side preview — single passport photo + the full print sheet
• 🪟 Print preview window with printing tips (tuned for Epson L8050 at 100% scale)
• 💾 PNG download at 300 DPI, print-ready
• 📐 Fixed passport size 3.1 × 4.1 cm with a clean black border

---

🛠️ Tech Stack

Component	Technology
Frontend	React 19 + Vite
Hosting	Vercel
Authentication	Firebase Google Sign-In
Background-removal AI	@huggingface/transformers (briaai/RMBG-1.4)
Image processing	Canvas API (100% client-side)
Styling	Inline CSS + Inter font

---

🚀 Getting Started

# install dependencies
npm install

# start the dev server (http://localhost:5173)
npm run dev

Build & preview a production bundle:

npm run build
npm run preview

Firebase setup

The app uses Firebase for Google Sign-In. Your Firebase web config lives in src/firebase.js (apiKey, projectId, etc.). When you deploy to a new domain, remember to add it under Firebase Console → Authentication → Settings → Authorized domains, otherwise Google login will fail.

---

📁 Project Structure

photo-maker/
├── src/
│   ├── App.jsx          # Auth wrapper (Login ↔ PhotoMaker routing)
│   ├── Login.jsx        # Google Sign-In page
│   ├── PhotoMaker.jsx   # Main app — all the features
│   ├── firebase.js      # Firebase config
│   └── main.jsx         # React entry point
├── vite.config.js
└── package.json

---

🌐 Deploy (Vercel)

npm run build
vercel dist --prod

After deploying to a brand-new Vercel URL, authorize that domain in Firebase (see Firebase setup above) so Google login keeps working.

---

📌 Notes

• 100% free stack — Vercel hosting, Firebase Spark plan, Google Auth
• The background-removal model downloads once (~50 MB) and is then browser-cached
• Output is 300 DPI — professional, print-shop quality
• Scales to any number of users; all processing stays on the client

---

Made with ❤️ for a neighbourhood stationery shop.