About the project

A complete Cloudinary workflow you can see.

Media Quest is the companion app for “Build a Media Portfolio in 30 Minutes with Cloudinary Upload Widget, Next.js App Router, and Server Actions.” It starts on the working studio because the workflow is the story.

Open the studio

The four-part media loop

Each stage leaves visible evidence in the interface.

1. Upload

Upload media directly with an unsigned preset, or generate a managed image through a protected server route.

2. Describe

Cloudinary AI Vision generates distinct alt text and a caption, then the app stores both with the asset.

3. Transform

CldImage produces smart crops, responsive variants, effects, and an opt-in generative fill.

4. Deliver

Automatic format and quality reduce bytes while Cloudinary delivers cached derivatives at the edge.

Browser

Public upload and delivery values

The cloud name, unsigned preset, public IDs, and delivery URLs can be present in browser code.

The Upload Widget is a Client Component. It never imports the Cloudinary Node.js software development kit or receives the API secret.

Server

Authenticated analysis and metadata writes

Admin API credentials and the edit token remain server-only.

New uploads use Cloudinary's signed response as short-lived proof. The Server Action handles older assets by validating the edit token before AI Vision analyzes and updates context metadata.

Why unsigned uploads here?

A restricted unsigned preset keeps this public tutorial focused. Use signed uploads and real user authentication when uploads are private, account-specific, or sensitive.