AI photo transformer — upload a photo, apply one-click AI transformations, compare before/after, download.
Built for the Pixels to Products — Cloudinary AI Hackathon 2026 · Track PS-03 · Your Media-Savvy Startup.
Everyone takes photos, but making them look great still needs editing skills or heavyweight apps. SnapFix Studio is a zero-install web tool: drop in any photo — or try an instant sample — and get studio-quality results in one click: AI background removal, AI-generated background replacement, generative AI outpainting to any aspect ratio, auto-enhance, 2x AI upscale, creative effects, smart crops, and a one-click Social Kit that exports five platform-ready sizes. No accounts, no backend, no waiting.
Cloudinary is the entire media engine of this app — every pixel the user sees is uploaded, transformed, optimized, and delivered by Cloudinary:
| Feature | Cloudinary API / transformation |
|---|---|
| Upload with progress | POST https://api.cloudinary.com/v1_1/<cloud>/image/upload with an unsigned upload preset (XHR for progress events) |
| Instant sample photos | Public images served from Cloudinary's demo cloud — no upload needed to try the app |
| AI background removal | e_background_removal (Cloudinary AI add-on) |
| AI background replace | e_gen_background_replace:prompt_<user text> (generative AI) |
| Auto enhance | e_improve |
| AI upscale | e_upscale (generative 2x) |
| AI Expand (outpainting) | c_pad,b_gen_fill,w_<w>,h_<h> — generative fill extends the canvas to 1:1, 4:5, 16:9, 9:16 |
| Creative effects | e_oil_paint, e_cartoonify, e_grayscale, e_vignette |
| Smart crops (1:1, 4:5, 16:9) | c_fill,g_auto,ar_<ratio> (AI gravity-aware cropping) |
| Social Kit (5 platforms) | c_fill,g_auto,w_<w>,h_<h> per platform: IG Post 1080×1080, IG Story 1080×1920, YT Thumbnail 1280×720, X Post 1200×675, LinkedIn Banner 1584×396 |
| Delivery | f_auto,q_auto on every URL — automatic format (AVIF/WebP) + quality optimization |
| Thumbnails / recents | c_fill,g_auto,w_*,h_* on-the-fly derived images |
Transformations are applied as URL parameters on the original upload — no re-uploads, no server-side processing, no API secret in the browser (unsigned preset keeps it safe).
- React 18 + Vite (JavaScript) — pure static frontend, zero backend
- Cloudinary — upload API, AI transformations, CDN delivery
- CSS (custom, no framework) — dark UI, mobile-responsive, before/after slider
- localStorage — recent-uploads session history (public_ids only)
npm installThen add your Cloudinary credentials in src/config.js:
export const CLOUD_NAME = 'your_cloud_name'; // from cloudinary.com dashboard
export const UPLOAD_PRESET = 'your_upload_preset'; // Settings → Upload → unsigned presetnpm run dev # dev server at http://localhost:5173
npm run build # production build → dist/
npm run preview # preview the production buildThe free Cloudinary tier covers everything this app needs. Uploads use an unsigned preset, so the API secret is never exposed.
The repo is deploy-ready for Railway static hosting:
vite.config.jsusesbase: './'(relative asset paths)server.jsservesdist/onprocess.env.PORTvia theservepackagepackage.json→"start": "node server.js"railway.json→ NIXPACKS builder,npm run build, start commandnpm start
Delete the old Railway service, create a new one from this repo, and it deploys with zero config.
src/
config.js # CLOUD_NAME + UPLOAD_PRESET (single place to inject credentials)
cloudinary.js # upload (XHR+progress), URL builders, download helper
transforms.js # the 7 one-click transformations
App.jsx # state orchestration
components/
Uploader.jsx # drag & drop + file picker + progress
TransformPanel.jsx # transform cards + AI background prompt input
CompareSlider.jsx # before/after drag slider
RecentStrip.jsx # session recents from localStorage
- Cloudinary is an active part of the product (upload + AI transform + deliver)
- Public GitHub repo with README and setup instructions
- Live working demo (deployed)
- 2–4 min demo video
- Cloudinary feedback survey (cld.media/hackathon-survey)