{"id":36328,"date":"2024-11-20T07:00:00","date_gmt":"2024-11-20T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36328"},"modified":"2026-06-01T16:03:22","modified_gmt":"2026-06-01T23:03:22","slug":"fashion-app-genai-react-node-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js","title":{"rendered":"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload"},"content":{"rendered":"\n<p><strong>FashionistaAI<\/strong>\u00a0is a\u00a0<strong>React + Vite + Node<\/strong>\u00a0sample: Upload a photo, then use\u00a0<strong>Cloudinary<\/strong>\u00a0<strong>GenAI<\/strong>\u00a0(<code>generativeReplace<\/code>,\u00a0<code>generativeBackgroundReplace<\/code>,\u00a0<code>generativeRecolor<\/code>,\u00a0<code>generativeRestore<\/code>) to build\u00a0<strong>four<\/strong>\u00a0styled looks, with\u00a0<strong>HTTP 423<\/strong>\u00a0retry logic while derivatives finish.<\/p>\n\n\n\n<p>Upload a picture \u2192 get&nbsp;<strong>four<\/strong>&nbsp;styled looks (elegant, streetwear, sporty, business casual). In this walkthrough we\u2019ll build&nbsp;<strong>FashionistaAI<\/strong>&nbsp;with&nbsp;<strong>Cloudinary GenAI<\/strong>,&nbsp;<strong>React (Vite)<\/strong>&nbsp;on the frontend, and a tiny&nbsp;<strong>Node.js\/Express<\/strong>&nbsp;backend for secure uploads.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Repo:<\/strong>\u00a0<a href=\"https:\/\/github.com\/cloudinary-devs\/Cloudinary-FashionistaAI\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary-FashionistaAI<\/a><\/li>\n<\/ul>\n\n\n<div class='c-callout  c-callout--note'><strong class='c-callout__title'>Product Note<\/strong> <p>GenAI features must be enabled for your Cloudinary product account and may depend on your plan\u2014check the console before you run the flows below.<\/p>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">What You\u2019ll Build<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A React app that:\n<ul class=\"wp-block-list\">\n<li>Uploads an image to your Node backend.<\/li>\n\n\n\n<li>Asks\u00a0<strong>Cloudinary GenAI<\/strong>\u00a0to swap tops\/bottoms (<code>generativeReplace<\/code>).<\/li>\n\n\n\n<li>Replaces the background (<code>generativeBackgroundReplace<\/code>).<\/li>\n\n\n\n<li>Lets you\u00a0<strong>recolor<\/strong>\u00a0top or bottom on click (<code>generativeRecolor<\/code>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>A Node.js server that securely uploads files to Cloudinary with the official SDK.<\/li>\n\n\n\n<li>Client-side 423 handling<strong>:<\/strong>\u00a0A small\u00a0<strong>preload<\/strong>\u00a0loop that\u00a0<strong>retries<\/strong>\u00a0when a derived URL returns\u00a0<strong>HTTP 423<\/strong>\u00a0(still processing).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Demo (What It Looks Like)<\/h2>\n\n\n\n<p>The background adapts to the look; each tile is a different style:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elegant<\/li>\n\n\n\n<li>Streetwear<\/li>\n\n\n\n<li>Sporty<\/li>\n\n\n\n<li>Business casual<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"664\" data-public-id=\"Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_664,c_scale\/f_auto,q_auto\/v1732145462\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1.png?_i=AA\" alt=\"\" class=\"wp-post-36328 wp-image-36329\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1732145462\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145462\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1.png?_i=AA 1999w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145462\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145462\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145462\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145462\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-1.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">An example of a FashionistaAIn output. The background of the images changes to match the model\u2019s outfit.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Before starting, you should have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node 18+ and npm.<\/li>\n\n\n\n<li>A free\u00a0<a href=\"https:\/\/cloudinary.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary<\/a>\u00a0account (GenAI features may need to be enabled depending on your plan).<\/li>\n\n\n\n<li>Basic React\/TypeScript familiarity (optional but helpful).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Part 1: Set Up Cloudinary<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"400\" data-public-id=\"Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_400,c_scale\/f_auto,q_auto\/v1732145456\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2.png?_i=AA\" alt=\"\" class=\"wp-post-36328 wp-image-36330\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1732145456\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145456\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2.png?_i=AA 1999w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145456\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145456\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145456\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2.png?_i=AA 1024w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1732145456\/Web_Assets\/blog\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2\/blog-Building-a-Fashion-App-Using-Cloudinarys-GenAI-in-React-and-Node.js-2.png?_i=AA 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create\/Login<\/strong>\u00a0\u2192\u00a0<strong>Settings \u2192 Product Environments<\/strong>.<\/li>\n\n\n\n<li>Confirm your\u00a0<strong>Cloud name<\/strong>\u00a0(keep it consistent across tools).<\/li>\n\n\n\n<li><strong>Settings \u2192 Product Environments \u2192 API Keys<\/strong>\u00a0\u2192\u00a0<strong>Generate New API Key<\/strong>. Save:\u00a0<strong>Cloud name<\/strong>,\u00a0<strong>API key<\/strong>,\u00a0<strong>API secret<\/strong>\u00a0(secret stays on the server).<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Part 2: Bootstrap the React App (Vite)<\/h2>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># Create a Vite + React + TS app<\/span>\nnpm create vite@latest fashionistaai -- --template react-ts\ncd fashionistaai\n\n<span class=\"hljs-comment\"># Frontend deps<\/span>\nnpm i axios @cloudinary\/react @cloudinary\/url-gen\n\n<span class=\"hljs-comment\"># Dev tooling<\/span>\nnpm i -D @vitejs\/plugin-react\n\n<span class=\"hljs-comment\"># Backend deps (we'll use one package.json for both)<\/span>\nnpm i express cors cloudinary multer streamifier dotenv\n\n<span class=\"hljs-comment\"># Nice-to-have dev deps<\/span>\nnpm i -D nodemon concurrently\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#3-configure-vite-dev-proxy-frontend-%E2%86%92-backend\"><\/a>Part 3: Configure Vite Dev Proxy (Frontend \u2192 Backend)<\/h2>\n\n\n\n<p>Create\/replace&nbsp;<code>vite.config.js<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { defineConfig } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vite'<\/span>\n<span class=\"hljs-keyword\">import<\/span> react <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@vitejs\/plugin-react'<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> defineConfig({\n  <span class=\"hljs-attr\">plugins<\/span>: &#91;react()],\n  <span class=\"hljs-attr\">server<\/span>: {\n    <span class=\"hljs-attr\">port<\/span>: <span class=\"hljs-number\">3000<\/span>,\n    <span class=\"hljs-attr\">proxy<\/span>: {\n      <span class=\"hljs-string\">'\/api'<\/span>: {\n        <span class=\"hljs-attr\">target<\/span>: <span class=\"hljs-string\">'http:\/\/localhost:8000'<\/span>,\n        <span class=\"hljs-attr\">changeOrigin<\/span>: <span class=\"hljs-literal\">true<\/span>,\n        <span class=\"hljs-attr\">secure<\/span>: <span class=\"hljs-literal\">false<\/span>,\n      },\n    },\n  },\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This forwards any&nbsp;<code>\/api\/*<\/code>&nbsp;calls to the Express server on port&nbsp;<code>8000<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#4-environment-variables\"><\/a>Part 4: Environment Variables<\/h2>\n\n\n\n<p>Create&nbsp;<code>.env<\/code>&nbsp;in the project root:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># Server (Node) reads these:<\/span>\nCLOUDINARY_CLOUD_NAME=YOUR_CLOUD_NAME\nCLOUDINARY_API_KEY=YOUR_API_KEY\nCLOUDINARY_API_SECRET=YOUR_API_SECRET\n\n<span class=\"hljs-comment\"># Frontend (Vite) reads those prefixed with VITE_<\/span>\nVITE_CLOUDINARY_CLOUD_NAME=YOUR_CLOUD_NAME\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Never<\/strong>&nbsp;expose&nbsp;<code>CLOUDINARY_API_SECRET<\/code>&nbsp;on the frontend. That\u2019s why we\u2019re using a server.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#5-nodeexpress-backend-raw-serverjs-endraw-\"><\/a>Part 5: Node\/Express Backend (<code>server.js<\/code>)<\/h2>\n\n\n\n<p>Create&nbsp;<code>server.js<\/code>&nbsp;in the project root. You can find the complete server file&nbsp;<a href=\"https:\/\/github.com\/cloudinary-devs\/Cloudinary-FashionistaAI\/blob\/main\/server.js\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p>Below: the main pieces of&nbsp;<code>server.js<\/code>.<\/p>\n\n\n\n<p>Add to&nbsp;<code>server.js<\/code>&nbsp;(top of file) \u2014 wire up your Cloudinary credentials from&nbsp;<code>.env<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">cloudinary<\/span><span class=\"hljs-selector-class\">.config<\/span>({\n  <span class=\"hljs-attribute\">secure<\/span>: true,\n  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,\n  api_key: process.env.CLOUDINARY_API_KEY,\n  api_secret: process.env.CLOUDINARY_API_SECRET,\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This connects the server to your Cloudinary account.<\/p>\n\n\n\n<p>We use&nbsp;<strong><code>multer<\/code>&nbsp;in memory<\/strong>&nbsp;so the file never hits disk. The&nbsp;<strong>Node SDK<\/strong>&nbsp;accepts a&nbsp;<strong>stream<\/strong>;&nbsp;<strong><code>streamifier<\/code><\/strong>&nbsp;turns the in-memory&nbsp;<strong>buffer<\/strong>&nbsp;into a stream for&nbsp;<code>upload_stream<\/code>, with a&nbsp;<strong>10MB<\/strong>&nbsp;cap and&nbsp;<strong>PNG \/ JPG \/ WEBP<\/strong>&nbsp;<code>fileFilter<\/code>&nbsp;only.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> storage = multer.memoryStorage()\n<span class=\"hljs-keyword\">const<\/span> upload = multer({\n  storage,\n  <span class=\"hljs-attr\">limits<\/span>: { <span class=\"hljs-attr\">fileSize<\/span>: <span class=\"hljs-number\">10<\/span> * <span class=\"hljs-number\">1024<\/span> * <span class=\"hljs-number\">1024<\/span> }, <span class=\"hljs-comment\">\/\/ 10MB<\/span>\n  <span class=\"hljs-attr\">fileFilter<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">_req, file, cb<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> ok = <span class=\"hljs-regexp\">\/image\\\/(png|jpe?g|webp)\/i<\/span>.test(file.mimetype)\n    cb(ok ? <span class=\"hljs-literal\">null<\/span> : <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">'Only PNG\/JPG\/WEBP images are allowed'<\/span>), ok)\n  },\n})\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> uploadStream = cloudinary.uploader.upload_stream(\n  { <span class=\"hljs-attr\">resource_type<\/span>: <span class=\"hljs-string\">'image'<\/span> },\n  (error, result) =&gt; {\n    <span class=\"hljs-keyword\">if<\/span> (error) {\n      <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">'Cloudinary error:'<\/span>, error)\n      <span class=\"hljs-keyword\">return<\/span> res.status(<span class=\"hljs-number\">500<\/span>).json({ <span class=\"hljs-attr\">error<\/span>: error.message })\n    }\n    res.json(result)\n  }\n)\n\nstreamifier.createReadStream(req.file.buffer).pipe(uploadStream)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The&nbsp;<strong>SDK<\/strong>&nbsp;can take a path or a&nbsp;<strong>stream<\/strong>; here&nbsp;<strong><code>multer<\/code><\/strong>&nbsp;left the bytes in&nbsp;<strong>memory<\/strong>, we&nbsp;<strong>stream<\/strong>&nbsp;to&nbsp;<strong><code>upload_stream<\/code><\/strong>, and the handler returns the&nbsp;<strong>JSON<\/strong>&nbsp;your React app needs.<\/p>\n\n\n\n<p><strong>package.json scripts<\/strong><\/p>\n\n\n\n<p>Open&nbsp;<code>package.json<\/code>&nbsp;and add these scripts:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">{\n  <span class=\"hljs-attr\">\"type\"<\/span>: <span class=\"hljs-string\">\"module\"<\/span>,\n  <span class=\"hljs-attr\">\"scripts\"<\/span>: {\n    <span class=\"hljs-attr\">\"dev\"<\/span>: <span class=\"hljs-string\">\"vite\"<\/span>,\n    <span class=\"hljs-attr\">\"server\"<\/span>: <span class=\"hljs-string\">\"nodemon server.js\"<\/span>,\n    <span class=\"hljs-attr\">\"start:both\"<\/span>: <span class=\"hljs-string\">\"concurrently -k \\\"npm:server\\\" \\\"npm:dev\\\"\"<\/span>\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now you can run&nbsp;<strong>both<\/strong>&nbsp;servers with:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">run<\/span> <span class=\"hljs-selector-tag\">start<\/span><span class=\"hljs-selector-pseudo\">:both<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>(Or use two terminals:&nbsp;<code>npm run server<\/code>&nbsp;and&nbsp;<code>npm run dev<\/code>.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#6-react-ui-raw-srcapptsx-endraw-\"><\/a>Part 6: React UI (<code>src\/App.tsx<\/code>)<\/h2>\n\n\n\n<p>The UI is a&nbsp;<strong>drop-in<\/strong>, TypeScript-friendly&nbsp;<code>App<\/code>&nbsp;that keeps your original logic, tightens types, separates file vs. Cloudinary image state, and reads the cloud name from env.&nbsp;<a href=\"https:\/\/github.com\/cloudinary-devs\/Cloudinary-FashionistaAI\/blob\/main\/src\/App.tsx\" target=\"_blank\" rel=\"noreferrer noopener\">Full&nbsp;<code>App.tsx<\/code>&nbsp;in the repo<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#creating-the-clothing-styles\"><\/a>Creating the Clothing Styles<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">type StyleKey = <span class=\"hljs-string\">'top'<\/span> | <span class=\"hljs-string\">'bottom'<\/span>\ntype StyleConfig = {\n  <span class=\"hljs-attr\">top<\/span>: string\n  <span class=\"hljs-attr\">bottom<\/span>: string\n  <span class=\"hljs-attr\">background<\/span>: string\n  <span class=\"hljs-attr\">type<\/span>: string\n}\n\n<span class=\"hljs-keyword\">const<\/span> STYLES: StyleConfig&#91;] = &#91;\n  { <span class=\"hljs-attr\">top<\/span>: <span class=\"hljs-string\">'suit jacket for upper body'<\/span>, <span class=\"hljs-attr\">bottom<\/span>: <span class=\"hljs-string\">'suit pants for lower body'<\/span>, <span class=\"hljs-attr\">background<\/span>: <span class=\"hljs-string\">'office'<\/span>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'business casual'<\/span> },\n  { <span class=\"hljs-attr\">top<\/span>: <span class=\"hljs-string\">'sport tshirt for upper body'<\/span>, <span class=\"hljs-attr\">bottom<\/span>: <span class=\"hljs-string\">'sport shorts for lower body'<\/span>, <span class=\"hljs-attr\">background<\/span>: <span class=\"hljs-string\">'gym'<\/span>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'sporty'<\/span> },\n  { <span class=\"hljs-attr\">top<\/span>: <span class=\"hljs-string\">'streetwear shirt for upper body'<\/span>, <span class=\"hljs-attr\">bottom<\/span>: <span class=\"hljs-string\">'streetwear pants for lower body'<\/span>, <span class=\"hljs-attr\">background<\/span>: <span class=\"hljs-string\">'street'<\/span>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'streetwear'<\/span> },\n  { <span class=\"hljs-attr\">top<\/span>: <span class=\"hljs-string\">'elegant tuxedo for upper body'<\/span>, <span class=\"hljs-attr\">bottom<\/span>: <span class=\"hljs-string\">'elegant tuxedo pants for lower body'<\/span>, <span class=\"hljs-attr\">background<\/span>: <span class=\"hljs-string\">'gala'<\/span>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'elegant'<\/span> },\n]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>StyleKey<\/code>&nbsp;is&nbsp;<strong>top<\/strong>&nbsp;vs.&nbsp;<strong>bottom<\/strong>&nbsp;for&nbsp;<strong>recolor<\/strong>;&nbsp;<code>StyleConfig<\/code>&nbsp;is one full look (clothing + background + label).&nbsp;<code>STYLES<\/code>&nbsp;is the \u201cwardrobe\u201d that becomes each card (<strong>Business casual<\/strong>,&nbsp;<strong>Sporty<\/strong>,&nbsp;<strong>Streetwear<\/strong>,&nbsp;<strong>Elegant<\/strong>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#submitting-to-the-backend-and-getting-the-base-image\"><\/a>Submitting to the Backend and Getting the Base Image<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">  <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handleSubmit<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    setError(<span class=\"hljs-literal\">null<\/span>)\n    setLooks(&#91;])\n    setLoadingStatus(&#91;])\n    <span class=\"hljs-keyword\">if<\/span> (!file) <span class=\"hljs-keyword\">return<\/span>\n\n    <span class=\"hljs-keyword\">try<\/span> {\n      setLoading(<span class=\"hljs-literal\">true<\/span>)\n      <span class=\"hljs-keyword\">const<\/span> data = <span class=\"hljs-keyword\">new<\/span> FormData()\n      data.append(<span class=\"hljs-string\">'image'<\/span>, file)\n\n      <span class=\"hljs-keyword\">const<\/span> resp = <span class=\"hljs-keyword\">await<\/span> axios.post(<span class=\"hljs-string\">'\/api\/generate'<\/span>, data, {\n        <span class=\"hljs-attr\">headers<\/span>: { <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'multipart\/form-data'<\/span> },\n      })\n\n      <span class=\"hljs-keyword\">const<\/span> publicId = resp.data.public_id <span class=\"hljs-keyword\">as<\/span> string\n      <span class=\"hljs-keyword\">const<\/span> base = cld.image(publicId).resize(fill().width(<span class=\"hljs-number\">508<\/span>).height(<span class=\"hljs-number\">508<\/span>))\n      setBaseImg(base)\n      createLooks(publicId)\n    } <span class=\"hljs-keyword\">catch<\/span> (err: any) {\n      <span class=\"hljs-built_in\">console<\/span>.error(err)\n      setError(err?.message ?? <span class=\"hljs-string\">'Upload failed'<\/span>)\n    } <span class=\"hljs-keyword\">finally<\/span> {\n      setLoading(<span class=\"hljs-literal\">false<\/span>)\n    }\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>POST \/api\/generate<\/code>&nbsp;uploads the file, returns a&nbsp;<strong><code>public_id<\/code><\/strong>, the UI builds a base&nbsp;<code>CloudinaryImage<\/code>&nbsp;at 508\u00d7508, then&nbsp;<code>createLooks(publicId)<\/code>&nbsp;runs the generative stack.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#preloading-derived-images-poll-until-ready\"><\/a>Preloading Derived Images (Poll Until Ready)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">preload<\/span>(<span class=\"hljs-params\">img: CloudinaryImage, index: number, attempts = <span class=\"hljs-number\">0<\/span><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> url = img.toURL()\n    <span class=\"hljs-keyword\">const<\/span> tag = <span class=\"hljs-keyword\">new<\/span> Image()\n    tag.onload = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span>\n      setLoadingStatus(<span class=\"hljs-function\"><span class=\"hljs-params\">prev<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> copy = &#91;...prev]\n        copy&#91;index] = <span class=\"hljs-literal\">false<\/span>\n        <span class=\"hljs-keyword\">return<\/span> copy\n      })\n    tag.onerror = <span class=\"hljs-keyword\">async<\/span> () =&gt; {\n      <span class=\"hljs-comment\">\/\/ 423 means \"still deriving\" on Cloudinary<\/span>\n      <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> r = <span class=\"hljs-keyword\">await<\/span> fetch(url, { <span class=\"hljs-attr\">method<\/span>: <span class=\"hljs-string\">'HEAD'<\/span> })\n        <span class=\"hljs-keyword\">if<\/span> (r.status === <span class=\"hljs-number\">423<\/span> &amp;&amp; attempts &lt; <span class=\"hljs-number\">6<\/span>) {\n          setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> preload(img, index, attempts + <span class=\"hljs-number\">1<\/span>), <span class=\"hljs-number\">2000<\/span> * (attempts + <span class=\"hljs-number\">1<\/span>))\n          <span class=\"hljs-keyword\">return<\/span>\n        }\n      } <span class=\"hljs-keyword\">catch<\/span> {}\n      setError(<span class=\"hljs-string\">'Error loading image. Please try again.'<\/span>)\n      setLoadingStatus(<span class=\"hljs-function\"><span class=\"hljs-params\">prev<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> copy = &#91;...prev]\n        copy&#91;index] = <span class=\"hljs-literal\">false<\/span>\n        <span class=\"hljs-keyword\">return<\/span> copy\n      })\n    }\n    tag.src = url\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>preload<\/code>&nbsp;loads a derived&nbsp;<strong>URL<\/strong>&nbsp;in a hidden&nbsp;<code>Image<\/code>&nbsp;<strong>onload<\/strong>&nbsp;clears that tile\u2019s&nbsp;<strong>spinner<\/strong>.&nbsp;<strong>Onerror<\/strong>, a&nbsp;<strong>HEAD<\/strong>&nbsp;can return&nbsp;<strong>HTTP 423<\/strong>&nbsp;while Cloudinary is still&nbsp;<strong>building<\/strong>&nbsp;the&nbsp;<strong>derivative<\/strong>, so we&nbsp;<strong>back off<\/strong>&nbsp;and&nbsp;<strong>retry<\/strong>; otherwise we surface an error. That\u2019s the&nbsp;<strong>\u201c423 + retry\u201d<\/strong>&nbsp;<strong>pattern<\/strong>&nbsp;from the&nbsp;<strong>summary<\/strong>&nbsp;above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#creating-the-different-looks-generative-effects\"><\/a>Creating the Different Looks (Generative Effects)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createLooks<\/span>(<span class=\"hljs-params\">publicId: string<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> imgs = STYLES.map(<span class=\"hljs-function\"><span class=\"hljs-params\">style<\/span> =&gt;<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> i = cld.image(publicId)\n      i.effect(generativeReplace().from(<span class=\"hljs-string\">'shirt'<\/span>).to(style.top))\n      i.effect(generativeReplace().from(<span class=\"hljs-string\">'pants'<\/span>).to(style.bottom))\n      i.effect(generativeBackgroundReplace()) <span class=\"hljs-comment\">\/\/ optional: prompt with your background<\/span>\n      i.effect(generativeRestore())\n      i.resize(fill().width(<span class=\"hljs-number\">500<\/span>).height(<span class=\"hljs-number\">500<\/span>))\n      <span class=\"hljs-keyword\">return<\/span> i\n    })\n    setLooks(imgs)\n    setLoadingStatus(imgs.map(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-literal\">true<\/span>))\n    imgs.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">img, idx<\/span>) =&gt;<\/span> preload(img, idx))\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Example:<\/strong>&nbsp;for each&nbsp;<code>style<\/code>,&nbsp;<code>generativeReplace().from('shirt').to(style.top)<\/code>&nbsp;and&nbsp;<code>.from('pants').to(style.bottom)<\/code>&nbsp;map prompts like \u201csuit jacket for upper body\u201d to the&nbsp;<strong>garment<\/strong>&nbsp;swaps, then&nbsp;<strong>background<\/strong>&nbsp;+&nbsp;<strong>restore<\/strong>&nbsp;+&nbsp;<strong>resize<\/strong>&nbsp;complete the card before&nbsp;<strong>preload<\/strong>&nbsp;runs per tile.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#recolor-modal-logic\"><\/a>Recolor Modal Logic<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">openRecolorModal<\/span><span class=\"hljs-params\">(index: number)<\/span> <\/span>{\n    setSelectedLookIndex(index)\n    setOpenModal(<span class=\"hljs-keyword\">true<\/span>)\n  }\n\n  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">applyRecolor<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-keyword\">clone<\/span> = &#91;...looks]\n    <span class=\"hljs-keyword\">const<\/span> img = <span class=\"hljs-keyword\">clone<\/span>&#91;selectedLookIndex]\n    <span class=\"hljs-keyword\">if<\/span> (!img) <span class=\"hljs-keyword\">return<\/span>\n    setLoadingStatus(prev =&gt; {\n      <span class=\"hljs-keyword\">const<\/span> copy = &#91;...prev]\n      copy&#91;selectedLookIndex] = <span class=\"hljs-keyword\">true<\/span>\n      <span class=\"hljs-keyword\">return<\/span> copy\n    })\n    setOpenModal(<span class=\"hljs-keyword\">false<\/span>)\n    <span class=\"hljs-comment\">\/\/ Recolor only the chosen item for the chosen look<\/span>\n    img.effect(generativeRecolor(STYLES&#91;selectedLookIndex]&#91;selectedItem], color))\n    setLooks(<span class=\"hljs-keyword\">clone<\/span>)\n    preload(img, selectedLookIndex)\n  }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Recolor<\/strong>&nbsp;layers&nbsp;<strong><code>generativeRecolor<\/code><\/strong>&nbsp;on an already&nbsp;<strong>generated<\/strong>&nbsp;tile, then&nbsp;<strong>preload<\/strong>&nbsp;waits for the new&nbsp;<strong>derivative<\/strong>.<\/p>\n\n\n\n<p>Add styling from the&nbsp;<a href=\"https:\/\/github.com\/cloudinary-devs\/Cloudinary-FashionistaAI\" target=\"_blank\" rel=\"noreferrer noopener\">repo CSS<\/a>&nbsp;or your own.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#7-how-it-works-quick-tour\"><\/a>Part 7: How It Works (Quick Tour)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Upload<\/strong>: The file is sent to\u00a0<code>POST \/api\/generate<\/code>. The server uses\u00a0<code>cloudinary.uploader.upload_stream<\/code>\u00a0to store it and returns the\u00a0<strong><code>public_id<\/code><\/strong>.<\/li>\n\n\n\n<li><strong>Transform:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>generativeReplace().from('shirt').to(style.top)<\/code><\/li>\n\n\n\n<li><code>generativeReplace().from('pants').to(style.bottom)<\/code><\/li>\n\n\n\n<li><code>generativeBackgroundReplace()<\/code>\u00a0(optionally prompt it to steer the scene)<\/li>\n\n\n\n<li><code>generativeRestore()<\/code>\u00a0for quality<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Recolor<\/strong>: On a generated tile, open a modal and apply\u00a0<code>generativeRecolor(&lt;item>, &lt;hex>)<\/code>.<\/li>\n\n\n\n<li><strong>423 handling<\/strong>: When the first request for a derived image hits Cloudinary while it\u2019s still being generated, you might see HTTP\u00a0<strong>423<\/strong>. The preload helper retries with backoff; for heavy use, consider preparing\u00a0<em>eager transformations<\/em>\u00a0on upload.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#8-testing-locally\"><\/a>Part 8: Testing Locally<\/h2>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># Install (already done if you followed along)<\/span>\nnpm i\n\n<span class=\"hljs-comment\"># Run both servers<\/span>\nnpm run start:both\n<span class=\"hljs-comment\"># Frontend: http:\/\/localhost:3000<\/span>\n<span class=\"hljs-comment\"># Backend:  http:\/\/localhost:8000<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#production-notes-optional-but-recommended\"><\/a>Production Notes (Optional but Recommended)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Secrets.<\/strong> Keep\u00a0<code>CLOUDINARY_API_SECRET<\/code>\u00a0server-side only; use environment vars on your host.<\/li>\n\n\n\n<li><strong>Upload presets.<\/strong> Lock down transformations and content rules with a Cloudinary upload preset.<\/li>\n\n\n\n<li><strong>Limits.<\/strong> Add rate limiting to your API if you open it to the public.<\/li>\n\n\n\n<li><strong>Validation.<\/strong> Keep the Multer\u00a0<code>fileFilter<\/code>\u00a0and\u00a0<code>limits<\/code>\u00a0in place; consider scanning\/validating uploads.<\/li>\n\n\n\n<li><strong>Caching\/CDN.<\/strong> Cloudinary URLs are CDN-backed; reusing the same\u00a0<code>public_id<\/code>\u00a0improves cache hits.<\/li>\n\n\n\n<li><strong>Accessibility.<\/strong> Provide helpful\u00a0<code>alt<\/code>\u00a0text for generated images (the example includes captions).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/dev.to\/cloudinary\/building-a-fashion-app-using-cloudinarys-genai-in-react-and-nodejs-25k2#wrapup\"><\/a>Wrap Up<\/h2>\n\n\n\n<p><strong>FashionistaAI<\/strong>&nbsp;shows how a small&nbsp;<strong>React<\/strong>&nbsp;app plus&nbsp;<strong>Cloudinary<\/strong>&nbsp;<strong>GenAI<\/strong>&nbsp;can turn one&nbsp;<strong>upload<\/strong>&nbsp;into four on-brand looks, with&nbsp;<strong>background<\/strong>&nbsp;swaps and&nbsp;<strong>recolor<\/strong>. Fork it, tweak the prompts, and ship your own&nbsp;<strong>AI<\/strong>-powered try-on flow.<\/p>\n\n\n\n<p>Ready to start building? <a href=\"https:\/\/cloudinary.com\/users\/register_free\">Sign up<\/a> for a free Cloudinary account today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>FashionistaAI\u00a0is a\u00a0React + Vite + Node\u00a0sample: Upload a photo, then use\u00a0Cloudinary\u00a0GenAI\u00a0(generativeReplace,\u00a0generativeBackgroundReplace,\u00a0generativeRecolor,\u00a0generativeRestore) to build\u00a0four\u00a0styled looks, with\u00a0HTTP 423\u00a0retry logic while derivatives finish. Upload a picture \u2192 get&nbsp;four&nbsp;styled looks (elegant, streetwear, sporty, business casual). In this walkthrough we\u2019ll build&nbsp;FashionistaAI&nbsp;with&nbsp;Cloudinary GenAI,&nbsp;React (Vite)&nbsp;on the frontend, and a tiny&nbsp;Node.js\/Express&nbsp;backend for secure uploads. What You\u2019ll Build Demo (What It Looks Like) The [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":36334,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[409,383,246],"class_list":["post-36328","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-generative-ai","tag-nodejs","tag-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload<\/title>\n<meta name=\"description\" content=\"FashionistaAI\u00a0is a\u00a0React + Vite + Node\u00a0sample: Upload a photo, then\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload\" \/>\n<meta property=\"og:description\" content=\"FashionistaAI\u00a0is a\u00a0React + Vite + Node\u00a0sample: Upload a photo, then\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-20T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-01T23:03:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload\",\"datePublished\":\"2024-11-20T15:00:00+00:00\",\"dateModified\":\"2026-06-01T23:03:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js\"},\"wordCount\":968,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA\",\"keywords\":[\"Generative AI\",\"Node(JS)\",\"React\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js\",\"url\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js\",\"name\":\"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA\",\"datePublished\":\"2024-11-20T15:00:00+00:00\",\"dateModified\":\"2026-06-01T23:03:22+00:00\",\"description\":\"FashionistaAI\u00a0is a\u00a0React + Vite + Node\u00a0sample: Upload a photo, then\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload","description":"FashionistaAI\u00a0is a\u00a0React + Vite + Node\u00a0sample: Upload a photo, then","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js","og_locale":"en_US","og_type":"article","og_title":"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload","og_description":"FashionistaAI\u00a0is a\u00a0React + Vite + Node\u00a0sample: Upload a photo, then","og_url":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js","og_site_name":"Cloudinary Blog","article_published_time":"2024-11-20T15:00:00+00:00","article_modified_time":"2026-06-01T23:03:22+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload","datePublished":"2024-11-20T15:00:00+00:00","dateModified":"2026-06-01T23:03:22+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js"},"wordCount":968,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA","keywords":["Generative AI","Node(JS)","React"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js","url":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js","name":"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA","datePublished":"2024-11-20T15:00:00+00:00","dateModified":"2026-06-01T23:03:22+00:00","description":"FashionistaAI\u00a0is a\u00a0React + Vite + Node\u00a0sample: Upload a photo, then","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"parsely":{"version":"1.1.0","canonical_url":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js","smart_links":{"inbound":0,"outbound":0},"traffic_boost_suggestions_count":0,"meta":{"@context":"https:\/\/schema.org","@type":"NewsArticle","headline":"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload","url":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA&w=150&h=150&crop=1","image":{"@type":"ImageObject","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA"},"articleSection":"Uncategorized","author":[{"@type":"Person","name":"melindapham"}],"creator":["melindapham"],"publisher":{"@type":"Organization","name":"Cloudinary Blog","logo":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA"},"keywords":["generative ai","node(js)","react"],"dateCreated":"2024-11-20T15:00:00Z","datePublished":"2024-11-20T15:00:00Z","dateModified":"2026-06-01T23:03:22Z"},"rendered":"<meta name=\"parsely-title\" content=\"Generative AI Outfits in React: Cloudinary Generative Replace, Background Replace, and Node Upload\" \/>\n<meta name=\"parsely-link\" content=\"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js\" \/>\n<meta name=\"parsely-type\" content=\"post\" \/>\n<meta name=\"parsely-image-url\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA&w=150&amp;h=150&amp;crop=1\" \/>\n<meta name=\"parsely-pub-date\" content=\"2024-11-20T15:00:00Z\" \/>\n<meta name=\"parsely-section\" content=\"Uncategorized\" \/>\n<meta name=\"parsely-tags\" content=\"generative ai,node(js),react\" \/>\n<meta name=\"parsely-author\" content=\"melindapham\" \/>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/cloudinary.com\/p.js"},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1731438389\/cloudinary_fashion_app_React_Node-blog\/cloudinary_fashion_app_React_Node-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=36328"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36328\/revisions"}],"predecessor-version":[{"id":40079,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36328\/revisions\/40079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/36334"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=36328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=36328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=36328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}