DEV Community

Cover image for Ship Your Next Great Web App in Record Time with create-cloudinary-react
Eric Portis for Cloudinary

Posted on

Ship Your Next Great Web App in Record Time with create-cloudinary-react

Over the past year or two, we've been having a lot of conversations about the future of Cloudinary's Libraries and SDKs. The conversations have been wide-ranging: the future of front-end frameworks, coding, and AI. It's all been a bit dizzying, and hard to wrap our heads around.

Late last year, my colleague Raya Straus brought us back down to earth with some good old-fashioned user research. By engaging users in conversations about their current day-to-day experiences, Raya got us to stop worrying about the future, and start thinking about ways we could make developers more successful with Cloudinary right now.

We released the first fruit of Raya's research last month: Cloudinary's React Starter Kit. If you're building a green-field, media-focused React app, and you're using LLM-powered development tools, we think npx create-cloudinary-react is the best way to get started.

Before we get into what it is, let's talk about how and why we built it.

What We Learned From React SDK User Research

We limited our research scope to two of our most popular SDKs: React and Next.js. We looked at every piece of user feedback for those two SDKs that we could find: support tickets, GitHub issues, chat transcripts, survey responses, and even a number of individual conversations held over email and Zoom, after we reached out to top SDK users.

Once we'd collected and digested it all, three things stuck out:

  1. Many developers struggle to get started. The least fun part of any development project is setting up a working development environment; a handful of common config problems are tripping up many developers before they can take their first steps with Cloudinary.
  2. Once set up, features that solve common use cases were straightforward and people were quickly successful. Cloudinary and our SDKs do a great job of solving common use cases with a minimum of fuss. Great!
  3. But once use cases get more advanced, developers start to struggle again. Cloudinary is a mature product, and can do all sorts of things, but advanced features are more complicated to use. Niche functionality often has fiddlier syntax, less clear error messages, and trickier-to-find documentation. So even though the features are there, developers run into walls when trying to use them.

A line chart. The x axis is labelled,

How the React Starter Kit Works

So, the question we ended up with, was: How can we help developers who are just getting started with Cloudinary, and folks with complex use cases?

We think we can address both with one new tool: npx create-cloudinary-react.

Type that into a terminal near you and you'll be led through a wizard, which will ask you a few questions about your environment. Then, it will spin up a working React project for you, using Vite as a build tool, and handle all of the configuration that people who are just starting to use Cloudinary with React so often get stuck on. The resulting project starts with a simple, one-page website that accepts and displays user-generated image uploads.

In addition to doing basic configuration, the wizard also installs Cloudinary's LLM-specific tools, and puts a bunch of rules and troubleshooting guidance to help LLMs with Cloudinary's APIs wherever your particular LLM-powered coding environment looks for context.

We derived these rules from our user research, by feeding all of the feedback we received about using Cloudinary's React SDK into an LLM and asking it to write rules to address that feedback. From there, we refined, added, and subtracted rules based on our experiences of using and helping other folks use Cloudinary.

Those rules, in addition to our other LLM-specific tools, significantly improve LLMs' results when prompted with complex tasks. To show off those capabilities, the initial built project offers a handful of example prompts which you can copy, paste into your agent, and hit the ground running.

With create-cloudinary-react, we believe we've built something that helps everyone get started, and also helps folks who have gone beyond common use cases use all of the nooks and crannies of Cloudinary's extensive feature set.

See the React Starter Kit in Action

Here's create-cloudinary-react in action:

How the React Starter Kit performed at Hack Canada 2026

After a few rounds of internal development and testing, we soft-launched the React Starter Kit a few weeks ago -- just before we participated as a sponsor in this year's Hack Canada.

A hackathon is a perfect environment for this kind of tool, and the results blew us away. Participants leveraged the Starter Kit to produce some truly incredible projects, and cited create-cloudinary-react as part of their success.

That was all the validation we needed to add a React Starter Kit walk through to our documentation and announce it in this very blog post.

So, go! Try it out! And tell us what you think in the comments.

Top comments (0)