Welcome to Cloudinary’s App Gallery!

Introducing Cloudinary’s App Gallery: your one-stop shop for exploring real-world applications that showcase the powerful capabilities of Cloudinary. Discover automation, AI-powered enhancements, and CMS integrations to help you optimize, manage, and deliver visual media with less effort. 

The home page has useful sections that make exploring the gallery easy and engaging. Here’s what you’ll find:

We highlight the core technologies used in the showcased apps. Choose a technology, like React, and you’ll be redirected to the gallery page with a prefiltered view, displaying all apps built with that technology. For example, clicking React updates the URL like so:

https://app-gallery.cloudinary.com/gallery?tag=ReactCode language: JavaScript (javascript)

Now, you’re only seeing the apps built with React. Neat, right?

A quick teaser featuring four highlighted apps from the gallery. Just a taste of what’s available!

This section contains:

• Documentation. Access guides, quick starts, and reference materials.
• Blog. Read up on best practices, how-tos, and deep dives into dev tech.
• Cloudinary Academy. Interactive courses and tutorials for managing your images, videos, and other assets.

The App Gallery page showcases real-world applications built using Cloudinary.

Filters:

• Search by “frontend”, “backend”, or “technology”.
• Apps can belong to multiple categories. For instance, an “AI-powered React” app fits both “AI” and “frontend.”

All images in the gallery are hosted and optimized using Cloudinary’s React SDK, ensuring blazing-fast performance and stunning visuals.

We’ve streamlined how Cloudinary loads across the app by creating a custom React hook using React Context. This means no redundant code — just simple and efficient Cloudinary access anywhere in your app.

Here’s how it works:

import React, { createContext, useContext } from 'react';

import { Cloudinary } from '@cloudinary/url-gen';

const CloudinaryContext = createContext<Cloudinary | undefined>(undefined);

export const CloudinaryProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {

  const cld = new Cloudinary({

    cloud: { cloudName: 'app-gallery' },

  });

  return <CloudinaryContext.Provider value={cld}>{children}</CloudinaryContext.Provider>;

};

export const useCloudinary = (): Cloudinary => {

  const context = useContext(CloudinaryContext);

  if (!context) {

    throw new Error('useCloudinary must be used within a CloudinaryProvider');

  }

  return context;

};Code language: JavaScript (javascript)

Now, using it in a component to fetch and optimize images is simple:

const cld = useCloudinary();

const myImage = cld.image(imageSrc).delivery(quality(autoEco()));

<AdvancedImage cldImg={myImage} alt={description} className="card-image"/>Code language: JavaScript (javascript)

The autoEco setting (q_auto:eco) ensures an optimized balance between quality and file size — perfect for efficiently handling massive amounts of traffic.

Clicked an app? Here’s where you’ll get all the juicy details:

• Full markdown documentation.
• Instructions to clone the repo.
• Steps to run it locally.

All the apps are open source, so feel free to fork, modify, and enhance them.

Browse Cloudinary’s App Gallery and find the right apps to build your workflow today!