{"id":37205,"date":"2025-03-10T07:00:00","date_gmt":"2025-03-10T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=37205"},"modified":"2025-11-06T15:12:30","modified_gmt":"2025-11-06T23:12:30","slug":"how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading","title":{"rendered":"How to Build a Project for TanStack Start Image Optimization and Uploading"},"content":{"rendered":"

If you\u2019ve been working in the React ecosystem for a while, you\u2019re probably familiar with some of the TanStack libraries<\/a> like Router or Query<\/a>. TanStack Start<\/a> is a new full-stack React framework powered by TanStack Router<\/a>. It doesn\u2019t yet have all the bells and whistles that a more established framework like Next.js<\/a> has, so there isn\u2019t a component that automatically handles optimizing images on your site or a third-party Cloudinary framework integration. Still, we can add image\/video optimization and much more to our TanStack Start website with the Cloudinary React SDK<\/a>.<\/p>\n

Tanstack Router vs. React Router<\/h2>\n

Just to give a little context, a TanStack Router and React Router are both routing libraries for React applications, but they differ in design philosophy and flexibility. React Router is the long-established standard, providing a straightforward way to manage navigation and dynamic routes within React apps. TanStack Router, a newer alternative from the creators of React Query, is designed for type safety, data loading, and better integration with modern React features like hooks and suspense. It focuses on predictable, data-driven routing with built-in support for loaders, optimistic updates, and URL state management. In essence, React Router is simpler and widely used, while TanStack Router is more advanced and tailored for complex, data-heavy applications.<\/p>\n

So far we\u2019ve given context for what is Tanstack Start and a comparison of Tanstack router vs React router. Now, we\u2019ll create a simple TanStack Start project and add image optimization and uploading features using the Cloudinary React SDK.<\/p>\n

If you don\u2019t have Cloudinary, you can sign up now for free and for life<\/a>. You\u2019ll get access to be able to follow along here as well as all of Cloudinary.<\/p>\n

Getting Started With TanStack Start<\/h2>\n

There isn\u2019t a fancy tool for starting a new TanStack Start project like you might get with Next or Astro quite yet. The easiest way to get started is to copy one of the example projects available in the project repository. For this demo, I\u2019ll copy over the start-basic<\/code> example project.<\/p>\n

Once you have the start-basic<\/code> directory copied over to your computer, navigate to the directory in your terminal. We can install the dependencies and start the dev server to see what the basic project looks like.<\/p>\n

npm i\n<\/code><\/span><\/pre>\n
npm run dev\n<\/code><\/span><\/pre>\n
The dev server will start at http:\/\/localhost:3000<\/a>. We get a basic web page with a navigation bar that we can use to navigate to some of the example pages.<\/p>\n
\"Image<\/p>\n
Project Structure<\/h3>\n
Now that we know what the site looks like, we\u2019ll dive into how the project is structured. All the code lives in the app<\/code> directory.<\/p>\n
Here are the important parts that we\u2019ll do most of our work in:<\/p>\n
- components # directory for our React components<\/span>\n- routes # TanStack Start\/Router file-based routing<\/span>\n- styles # css styles<\/span>\n- utils # js utilities<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Integrating Cloudinary<\/h2>\n
Now that we\u2019re familiar with our new TanStack Start website, let\u2019s plan out our new features.<\/p>\n
First, we want to be able to upload images of our users to our Media Library.<\/p>\n
Next, we\u2019ll create an Avatar component to serve optimized avatar images of our users.<\/p>\n
Because we haven\u2019t set up a real database yet, our avatar images won\u2019t be linked to any specific users on the demo site. In this post, they\u2019re purely for illustration, but you can easily configure them to use real data.<\/p>\n
Initial Setup<\/h3>\n
To get started, we\u2019ll need to install our Cloudinary dependencies:<\/p>\n
npm<\/span> i<\/span> @cloudinary<\/span>\/url-gen @cloudinary\/react\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Add Types for the Cloudinary Upload Widget<\/h4>\n
npm<\/span> i<\/span> -D<\/span> @types<\/span>\/cloudinary-uploadwidget-browser\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Add the following key to your compilerOptions<\/code> in tsconfig.json<\/code><\/p>\n
    \"types\"<\/span>: [\"@types\/cloudinary-uploadwidget-browser\"<\/span>],\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, let\u2019s create a file named cloudinary.ts<\/code> in our app<\/code> directory. This file will create and export our configured Cloudinary instance:<\/p>\n
import<\/span> { Cloudinary } from<\/span> \"@cloudinary\/url-gen\"<\/span>;\n\nexport<\/span> const<\/span> cld = new<\/span> Cloudinary({\n  cloud<\/span>: {\n    cloudName<\/span>: 'demo'<\/span>\n  }\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Replace \u2018demo\u2019 with your own cloud name.<\/em><\/p>\n
To use the Upload widget, we\u2019ll need to add the script to our RootDocument component \/app\/routes\/__root.tsx<\/code>. We can put it right below the framework\u2019s <Scripts \/><\/code> tag:<\/p>\n
        {children}\n        <ScrollRestoration<\/span> \/><\/span>\n        <TanStackRouterDevtools<\/span> position<\/span>=\"bottom-right\"<\/span> \/><\/span>\n        <Scripts<\/span> \/><\/span>\n        <script<\/span>\n          src<\/span>=\"https:\/\/upload-widget.cloudinary.com\/latest\/global\/all.js\"<\/span>\n          type<\/span>=\"text\/javascript\"<\/span>\n        ><\/span><\/script<\/span>><\/span>\n      <\/body<\/span>><\/span>\n    <\/html<\/span>><\/span>\n  ) \n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Adding the Avatar Uploader<\/h3>\n
We\u2019ll use the Upload widget to handle uploading avatar images to our media library. Let\u2019s create the file for our component app\/components\/CloudinaryUploadWidget.tsx<\/code>.<\/p>\n
We\u2019ll need to add our cloud name and an upload preset to the Upload widget config. If you\u2019re not familiar with upload presets, you can learn how to set one up here<\/a>.<\/p>\n
import<\/span> { useEffect, useRef } from<\/span> 'react'<\/span>;\n\ndeclare global {\n  interface Window {\n    cloudinary<\/span>: CloudinaryBase;\n  }\n}\n\ninterface CloudinaryUploadWidgetProps {\n onUpload?: (publicId: string<\/span>) =><\/span> void<\/span>;\n}\n\nexport<\/span> const<\/span> CloudinaryUploadWidget: React.FC<CloudinaryUploadWidgetProps> = ({ uwConfig, setPublicId }<\/span>) =><\/span> {\n  const<\/span> uploadWidgetRef = useRef<any>(null<\/span>);\n  const<\/span> uploadButtonRef = useRef<HTMLButtonElement>(null<\/span>);\n\n  useEffect(()<\/span> =><\/span> {\n    const<\/span> initializeUploadWidget = ()<\/span> =><\/span> {\n      if<\/span> (window<\/span>.cloudinary && uploadButtonRef.current) {\n        \/\/ Create upload widget<\/span>\n        uploadWidgetRef.current = window<\/span>.cloudinary.createUploadWidget(\n          {\n\t          cloudName<\/span>: \"your_cloud_name\"<\/span>,\n\t          uploadPreset<\/span>: \"upload_preset_id\"<\/span>\n          },\n          (error: any, result<\/span>: any) => {\n            if<\/span> (!error && result && result.event === 'success'<\/span>) {\n              console<\/span>.log('Upload successful:'<\/span>, result.info);\n              onUpload?.(result.info.public_id);\n            }\n          }\n        );\n\n        \/\/ Add click event to open widget<\/span>\n        const<\/span> handleUploadClick = ()<\/span> =><\/span> {\n          if<\/span> (uploadWidgetRef.current) {\n            uploadWidgetRef.current.open();\n          }\n        };\n\n        const<\/span> buttonElement = uploadButtonRef.current;\n        buttonElement.addEventListener('click'<\/span>, handleUploadClick);\n\n        \/\/ Cleanup<\/span>\n        return<\/span> ()<\/span> =><\/span> {\n          buttonElement.removeEventListener('click'<\/span>, handleUploadClick);\n        };\n      }\n    };\n\n    initializeUploadWidget();\n  }, [onUpload]);\n\n  return<\/span> (\n    <button<\/span>\n      ref<\/span>={uploadButtonRef}<\/span>\n      id<\/span>=\"upload_widget\"<\/span>\n      className<\/span>=\"px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600\"<\/span>\n    ><\/span>\n      Upload\n    <\/button<\/span>><\/span><\/span>\n  );\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The component we created will display a button that opens the Upload Widget.<\/p>\n
Add Upload Widget to User Page<\/h3>\n
Now that we have our Upload widget ready, we can add it to our user page. Let\u2019s open the page up in our routes directory app\/routes\/users.$userId.tsx<\/code><\/p>\n
Currently, this page just shows the user name and email. Let\u2019s add our uploader button below them:<\/p>\n
\/\/ existing code...<\/span>\nimport<\/span> { CloudinaryUploadWidget } from<\/span> '~\/components\/CloudinaryUploadWidget'<\/span>\n\n\/\/ exisiting code...<\/span>\n\nfunction<\/span> UserComponent<\/span>(<\/span>) <\/span>{\n  const<\/span> user = Route.useLoaderData()\n  \n  const<\/span> handleUpload = (publicId: string<\/span>) =><\/span> {\n    \/\/ In our real application we could update the user to set the avatar value in the database<\/span>\n    \/\/ IE: updateUser({ avatarPublicId: publicId });<\/span>\n    console<\/span>.log(publicId);\n  }\n\n  return<\/span> (\n    <div<\/span> className<\/span>=\"space-y-2\"<\/span>><\/span>\n      <h4<\/span> className<\/span>=\"text-xl font-bold underline\"<\/span>><\/span>{user.name}<\/h4<\/span>><\/span>\n      <div<\/span> className<\/span>=\"text-sm\"<\/span>><\/span>{user.email}<\/div<\/span>><\/span>\n      <CloudinaryUploadWidget<\/span> \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n  )\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You can imagine using the onUpload<\/code> prop to our CloudinaryUploadWidget<\/code> to save the avatar id to our user record in the database. We added an example in the comments. We\u2019ll use this example field to add avatar images to our User route.<\/p>\n
\"Image<\/p>\n
Creating a UserAvatar<\/code> component<\/h3>\n
Next we\u2019ll create a UserAvatar<\/code> component and use it to render optimized avatar images on our user route. We\u2019ll use the AdvancedImage<\/code> component from the @cloudinary\/react<\/code> SDK to render the image after we apply some transformations with @cloudinary\/url-gen<\/code> to optimize the image for user avatars.<\/p>\n
import<\/span> { AdvancedImage } from<\/span> '@cloudinary\/react'<\/span>\nimport<\/span> { thumbnail } from<\/span> '@cloudinary\/url-gen\/actions\/resize'<\/span>\nimport<\/span> { focusOn } from<\/span> '@cloudinary\/url-gen\/qualifiers\/gravity'<\/span>\nimport<\/span> { FocusOn } from<\/span> '@cloudinary\/url-gen\/qualifiers\/focusOn'<\/span>\nimport<\/span> { cld } from<\/span> '..\/cloudinary'<\/span>\n\ninterface UserAvatarProps {\n  publicId?: string\n  size?: number\n  className?: string\n}\n\nexport<\/span> function<\/span> UserAvatar<\/span>({ publicId, size = 150<\/span>, className = ''<\/span> }: UserAvatarProps<\/span>) <\/span>{\n  if<\/span> (!publicId) {\n    return<\/span> (\n      <div<\/span> \n        className<\/span>={<\/span>`bg-gray-200<\/span> rounded-full<\/span> flex<\/span> items-center<\/span> justify-center<\/span> ${className<\/span>}`}\n        style<\/span>={{<\/span> width:<\/span> size<\/span>, height:<\/span> size<\/span> }}\n      ><\/span>\n        <span<\/span> className<\/span>=\"text-gray-500 text-2xl\"<\/span>><\/span>?<\/span<\/span>><\/span>\n      <\/div<\/span>><\/span><\/span>\n    )\n  }\n\n  const<\/span> image = cld.image(publicId)\n    .resize(thumbnail().width(size).height(size).gravity(focusOn(FocusOn.face())))\n\n  return<\/span> (\n    <div<\/span> className<\/span>={className}<\/span>><\/span>\n      <AdvancedImage<\/span> cldImg<\/span>={image}<\/span> \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n  )\n} \n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Adding an Avatar Image to User Route<\/h3>\n
Now that we have our UserAvatar<\/code> component, we can use it to add avatar images to our Users route.<\/p>\n
\/\/ existing code...<\/span>\nimport<\/span> { UserAvatar } from<\/span> '~\/components\/UserAvatar'<\/span>\n\n\/\/ exisiting code...<\/span>\n\nfunction<\/span> UserComponent<\/span>(<\/span>) <\/span>{\n  const<\/span> user = Route.useLoaderData()\n\n  return<\/span> (\n    <div<\/span> className<\/span>=\"space-y-4\"<\/span>><\/span>\n      <div<\/span> className<\/span>=\"flex items-center gap-4\"<\/span>><\/span>\n        <UserAvatar<\/span> publicId<\/span>={user.avatarPublicId}<\/span> size<\/span>={100}<\/span> \/><\/span>\n        <div<\/span>><\/span>\n          <h4<\/span> className<\/span>=\"text-xl font-bold underline\"<\/span>><\/span>{user.name}<\/h4<\/span>><\/span>\n          <div<\/span> className<\/span>=\"text-sm\"<\/span>><\/span>{user.email}<\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n      <CloudinaryUploadWidget<\/span> onUpload<\/span>={handleUpload}<\/span> \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n  )\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\"Image<\/p>\n
Summary<\/h2>\n
Cloudinary\u2019s React SDK and Upload widget make integrating media optimizations and uploads a quick and simple process for any React framework. TanStack Start is a powerful new framework for building React applications and has quite a few stand-out features and a lot in common with the popular Remix framework.<\/p>\n
In this post, we added the Cloudinary Upload widget to upload user avatar images in our application. After that, we created an optimized UserAvatar<\/code> component using Cloudinary\u2019s transformations and the AdvancedImage<\/code> component.<\/p>\n
This is a great starting point, so you can easily add optimizations for other images throughout your application. Check out other React sample projects<\/a> to help you get started integrating Cloudinary and sign up for a free account today<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":37206,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[227,246,373],"class_list":["post-37205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-performance-optimization","tag-react","tag-upload"],"acf":[],"yoast_head":"\nTanStack Start Image | Upload and Optimize Images Using Cloudinary React SDK<\/title>\n<meta name=\"description\" content=\"Learn how to create a TanStack Start project with image optimization and uploading features using the Cloudinary React SDK for free.\" \/>\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\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Project for TanStack Start Image Optimization and Uploading\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a TanStack Start project with image optimization and uploading features using the Cloudinary React SDK for free.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-10T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-06T23:12:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.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\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"How to Build a Project for TanStack Start Image Optimization and Uploading\",\"datePublished\":\"2025-03-10T14:00:00+00:00\",\"dateModified\":\"2025-11-06T23:12:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA\",\"keywords\":[\"Performance Optimization\",\"React\",\"Upload\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading\",\"url\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading\",\"name\":\"TanStack Start Image | Upload and Optimize Images Using Cloudinary React SDK\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA\",\"datePublished\":\"2025-03-10T14:00:00+00:00\",\"dateModified\":\"2025-11-06T23:12:30+00:00\",\"description\":\"Learn how to create a TanStack Start project with image optimization and uploading features using the Cloudinary React SDK for free.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing graphic representation of Tanstack Start image optimization using an image of a tennis player, a screenshot of code and the Cloudinary logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build a Project for TanStack Start Image Optimization and Uploading\"}]},{\"@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":"TanStack Start Image | Upload and Optimize Images Using Cloudinary React SDK","description":"Learn how to create a TanStack Start project with image optimization and uploading features using the Cloudinary React SDK for free.","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\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading","og_locale":"en_US","og_type":"article","og_title":"How to Build a Project for TanStack Start Image Optimization and Uploading","og_description":"Learn how to create a TanStack Start project with image optimization and uploading features using the Cloudinary React SDK for free.","og_url":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading","og_site_name":"Cloudinary Blog","article_published_time":"2025-03-10T14:00:00+00:00","article_modified_time":"2025-11-06T23:12:30+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.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\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"How to Build a Project for TanStack Start Image Optimization and Uploading","datePublished":"2025-03-10T14:00:00+00:00","dateModified":"2025-11-06T23:12:30+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading"},"wordCount":12,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA","keywords":["Performance Optimization","React","Upload"],"inLanguage":"en-US","copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading","url":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading","name":"TanStack Start Image | Upload and Optimize Images Using Cloudinary React SDK","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA","datePublished":"2025-03-10T14:00:00+00:00","dateModified":"2025-11-06T23:12:30+00:00","description":"Learn how to create a TanStack Start project with image optimization and uploading features using the Cloudinary React SDK for free.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing graphic representation of Tanstack Start image optimization using an image of a tennis player, a screenshot of code and the Cloudinary logo"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how-to-build-a-tanstack-start-project-for-image-optimization-and-uploading#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build a Project for TanStack Start Image Optimization and Uploading"}]},{"@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"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1741633811\/Blog_Upload_and_optimize_images_in_TanStack_Start\/Blog_Upload_and_optimize_images_in_TanStack_Start.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37205","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=37205"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37205\/revisions"}],"predecessor-version":[{"id":39124,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/37205\/revisions\/39124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/37206"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=37205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=37205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=37205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
We\u2019ll create a transformation pipeline<\/a> for our user avatar images that uses AI to detect faces, crops the image to focus on the detected face, and resizes it to the specified dimensions. The AdvancedImage<\/code> component serves and renders this image through Cloudinary\u2019s CDN.<\/p>\n
If you open up the routes directory, the naming convention may look a little strange at first. You can find all the details on the file-based routing conventions here<\/a>.<\/p>\n