Tiktok Virtual Try On Fashion shopping (Mobile first)

Snap a selfie; my app wraps you in every outfit in our catalogue true-to-life. No fitting rooms, no size doubts. Swipe styles, zoom, buy in a tap, delivered fast. Snap. Style. Shop today, seamlessly.

Comment

Inspiration

All fashion apps still feel stuck in 2015 with static model shots, vague size charts, and that awful moment when the package arrives and the fit is all wrong. Shoppers end up returning piles of clothes, brands eat the cost, and the planet pays the shipping and landfill bill. We wanted a smarter way: upload one selfie, see your body in every look before you buy, and slash returns for good.

What it does

Upload one clear photo; the web-app instantly renders you in any garments we have in our catalogue from partnered brands using generative vision models. You can buy the exact SKU in one tap. Swipe through different clothes like Tik Tok or search what you want to buy in search page.

How we built it

We built this thing in six bite-sized layers 1) UI: React 18 + TypeScript bootstrapped with Vite and skinned with pure Tailwind utility classes, so every screen is basically a prompt string we ship in minutes 2) Feed engine : a TikTok-style vertical scroll; we paint 512-px AI previews first, then lazily swap in hi-res frames when the user pauses, all orchestrated by a tiny Three.js carousel 3) Try-on pipeline: a thin Express proxy signs and forwards a base-64 selfie + SKU shot to KLING Kolors v1.5, polls task status, and streams the finished PNG back in under two seconds 4) State & auth: React Context wraps Firebase Auth, Firestore, and Storage; every generated URL is cached by selfie-hash + garment-id, slashing repeat costs. 5) Commerce : sizes, cart, and addresses live in Firestore, while checkout drops into TikTok Shop SDK in-app or Stripe on the web 6) Ops: front end and proxy ship to Netlify Functions, ride their global edge

Challenges we ran into

1) Finding the right API that gives a good result. 2) Learning how to connect to API and backend.

Accomplishments that we're proud of

1) Built first app 2) Signed 3 brands 3) 36 committed users already

What we learned

1) How to build a web app. First time doing it. How to connect to backend. How to use API.
2) Having a clear plan before you prompt keeps scope tight and shipping sane. 3) Two changes per iteration are plenty; push more and the model starts hallucinating 4) Nail the core logic first, speed, caching, checkout then worry about colour palettes and fancy animations. 5) Users value speed over photorealism: an 85 %-real preview in two seconds beats a perfect render in ten.

What's next for Tiktok Virtual Try On Fashion shopping

The API looked cheap until beta testers binge swiped $0.4 per shot ballooned into $1.6K over one weekend, an instant red flag for unit economics. We shipped the MVP anyway with the current API, but this challenge by Bolt.new motivated us to ship a production ready. My mentors bluntly told us: “Own your tech or drown in bills.” So I started learning PyTorch and diffusion. I am currently training my image model to have my own virtual try on. My effort paid off: three brands have already committed (two Dubai boutiques, one EU label) and will launch exclusively when our architecture goes live this July.

Built With

  • bolt.dev-edge-functions
  • cloudflare-kv
  • daisyui
  • docker-compose
  • eslint
  • express.js
  • fastapi
  • firebase-(auth-+-firestore-+-storage)
  • firebase-auth/firestore/storage
  • github-actions
  • headless-ui
  • husky
  • kling-kolors-v1.5-api
  • kling-kolors-v1.5-rest
  • lighthouse-ci
  • netlify
  • netlify-analytics
  • netlify-functions
  • next.js
  • plausible
  • prettier
  • python
  • pytorch
  • react-18
  • sentry
  • stripe-checkout
  • tailwind-css
  • three.js
  • tiktok-shop-js-sdk
  • typescript
  • vite
  • weights-&-biases
Share this project:

Updates