Hosting an event with cool merch? Running a printing business? In this article, we review how we can create a t-shirt design visualizer with some dynamic features such as color options.


Clothing design visualizer with Nuxt .Js

In this Mediajam, we’ll explore a simple way to receive and display the tweets in real-time as they are sent using Pusher, Zapier, and Cloudinary.


Realtime tweets visualizer with Pusher and Zappier

Build an image gallery with remote optimized images sourced from Cloudinary in a Gatsby.js site.

Create an Image Gallery with Remote Images in Gatsby.js

Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.

Creating Custom User Reports with Redwood

Promoting your content on social media is an important part of the publishing process, but as anyone who has attempted to share their work online knows, social media is a black hole of content. It's really easy to publish, and then see your work lost in the endless stream of tweets and posts. But by sharing images or "Open Graph Images" for your content, you can stand out more!

Automatically Generate Social Sharing Images

The question is, of course, how can we obtain the image data? There are various ways that we can utilise. For this project, a serverless function was deployed to Vercel which uses the Cloudinary Search API to return 20 images from a pre-defined folder. Calling this API returns resource JSON objects from Cloudinary which contains all the data that we need.

Image Gallery React

When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we’ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.


Add a Branding Watermark to Video With React

Users like it when they have access to customization for their videos so it's important that we give them things that make their experience better.

Making User Generated Video Slideshows in Redwood with Cloudinary

How to upload images in Angular with a Drag & Drop component - Part II

How to serve responsive images more easily using Eleventy shortcodes and  Cloudinary.

Responsive Images using Eleventy Shortcodes

In this article, we will see how to create a web app that generates social images automatically. The service will generate HTML content dynamically, based on a request, generate a "snapshot" of the content, and return it to the requester as an image.

Automate Social Images with Next.js and Puppeteer

Boost e-commerce conversion using shoppable videos. Learn to utilize a shoppable video in Next.js

Using Shoppable Video in Next.js

This post discusses how to lazy-load videos on Gatsby.js pages for improved web performance.

 Lazy-loading Videos in Gatsby.js Pages

In this Mediajam, we shall create an eCommerce sample application and add stripe integration to it. Once the transaction is successful an email containing the transaction receipt and the product images will be sent to a user's email as proof of purchase.  


Stripe-Cloudinary Transaction Receipts Generator

Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.

How To Make A Custom Video Player in Redwood

A video streaming application that leverages Cloudinary for video and image manipulation and storage, Next.js and Airtables

Video Streaming the Jamstack way

In this media jam, we will see how to build an Image Gallery with Next.js using Cloudinary. We will also see how to use Adobe Photoshop Lightroom add-on with Cloudinary to transform the images.


How to use Lightroom with Next.js

Generating thumbnails for a photo gallery can feel tedious if you have to do it all by hand. With Cloudinary, we can automatically generate thumbnails from our full-size images that focus in on faces. In this tutorial, we’ll learn how to automatically generate both full-sized and thumbnail images for a React-powered photo gallery.

Photo Gallery With Automatic Thumbnails Using React & Cloudinary

Signed Image Uploading to Cloudinary with Angular and NestJS

For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we’ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we'll learn how to display it all together in a React component.

Add Custom Video Transitions with React

Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.

Building a User Dashboard with Redwood

In this post, we discussed how to trigger a form display once a vidnce a video is done playing.la eois done yping

Feedback Form Trigger from Video Events in Gatsby.js

Navigating Videos With Auto Tagged Markers Using Next.js, Cloudinary, and Google's Video Intelligence Api

Navigating Videos With Googles Video Intelligence 

How to use virtual scrolling to load images in Angular

In this media jam, we will discuss how to build an ecommerce app in React using Airtable, Cloudinary, and Snipcart. 

We will use Airtable to store product data and use Cloudinary's Product Gallery to showcase different product images. In this tutorial, we will build an ecommerce site for a cake shop named Sweet Tooth and use various cakes as products.

How To Build an Ecommerce App With React

Learn to create a blog with Gatsby.js and interactive content including Video with MDX

Dynamic Video blogs with Gatsby.js and MDX

In this media jam, we will build a Gatsby Theme for an Image Gallery. The images will be stored and fetched from Cloudinary. We will conclude this jam by publishing our theme to the npm registry.

How to build a Gatsby Image Gallery Theme

Learn to build a video blog in Next.js using Markdown and Cloudinary

Creating a Video Blog in Next.js

Netflix uses optimized transitions to autoplay a movie when it's highlighted. Learn how to do this in React.js.

Creating Netflix Style Overlay Transitions

This post discussed how to lazy-load videos in Next.js pages for improved web performance.

Lazy-load Videos in Next.js Pages

This article explains how to use Nuxt.js to lazy-load videos for better web performance.

lazy loading videos in nuxt.js

In this post, we explore how to transform image IDs in a blog post frontmatter into gatsby-image compatible fluid or fixed image objects.

Using Remote Image specified in a Blog Post’s Markdown Frontmatter

In this media jam, we will discuss how to build a Video to GIF converter in Next.js using Cloudinary. We will use Next.js API routes to upload the video to Cloudinary and then fetch the converted GIF. We will also see how to build a download button to download the GIF and a clear button to delete the video from Cloudinary.

How To Convert Video to GIF in Next.js

In this Mediajam we will learn how to use Tagged Markers in navigating specific sections in videos using Cloudinary and the different addons they provide. We'll use the Next.js framework to build the application.

Navigating Real-Estate Videos With Tagged Markers 

How to change SVG color on interaction with LitElement

In this media jam series, we will build a clone of Product Hunt, a website to share and discover new products with Next.js. In addition, we will use Auth0 for authentication, Airtable for storing product data, and Cloudinary for storing product images.

How to build a Product Hunt Clone with Next.js - Part 2 of 2

An events poster generator using Next.js, Cloudinary & Faunadb as the database.

Automatic Poster Generator With Next.js & Faunadb

Learn to utilize a robust video uploader in a Gatsby.js application

Handling Robust Video Uploads in Gatsby.js

Learn how to build a responsive image carousel using the Next.js  and Cloudinary.

Animating Next.js Images With Framer Motion 

Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.

Making a Media Library with Redwood

You can create your own custom video slideshows with images you already have quickly using Cloudinary. In this article, we'll set up a few different slideshows showing you how to create your own videos.

Video Slideshow Generation with Cloudinary

Learn how to optimize and transform videos using the Cloudinary video player.

Utilizing Product Videos in Gatsby.js Commerce

Serverless Image Storage & Manipulation Using React, Airtable and Netlify functions


Serverless Image Storage & Manipulation

How to build a Product Hunt Clone with Next.js - Part 1 of 2

Whenever we need to deliver image content to our users, depending on business requirements and the user’s device configurations, we may need to switch formats. This is especially true for image/PDF formats. In this article, we review how we can easily achieve this.

Nuxt.js Image to Pdf Converter

Every business always has a change in staff on an annual basis. Contacting the graphic designer for new designs and new cards is always a hustle. In this article, we review how we can develop a digital business card generator to remove the hustle from this process.


Digital business card generator using Nuxt.Js

According to Stack Overflow 2020 survey, Vue.js was one of the Most Loved Web frameworks of the developers. In this media jam, we will see how to upload an image to Cloudinary with a drag and drop operation.

How to Upload Images in Vue.js with Drag N Drop

This tutorial will explore how to create a secured upload component with Cloudinary, and enhance the power of serverless in your Jamstack application.

Build serverless upload with Cloudinary

The Automatic Image Optimization in Next.js allows for resizing, optimizing, and serving images in modern formats. This avoids shipping large images to devices with a smaller viewport. By setting up a next.js config file one time with a cloud provider, you can can ensure that this happens by default, and that you get all of the benefits without all of the pain of loading multiple image source sets.

Options For Next.js Image Providers

Setup a Developer Blog with Social Images using SvelteKit

How to add a YouTube Video Player in Angular

Sometimes you need to display your images in a format that allows people to visualize what a product would look like when they purchase it. Creating 3D canvases out of images can help give your customers a better experience when considering buying things from you. In this article, you'll learn how to generate 3D canvases of any size using Cloudinary transformations.

Transforming Images in Cloudinary to 3D Canvases

In this media jam, we will build a discord bot to send GIFs with Node.js.

How to build Discord GIF Bot with Nodejs

Sometimes you need to handle and manage images linked to information that is stored in the database of your web application. We can improve and simplify both image management, and data storage, using two helpful products: Prisma and Cloudinary.

Upload and display images using Prisma

Handling image files in a JAMStack application can be tricky. You have to decide whether you want to upload them to your own database, use a third party, or store them in another way. This article will go over how you can upload images to a PostgreSQL database using the RedwoodJS JAMStack framework.

Handling image uploads with PostgreSQL in RedwoodJS

Learn to trigger UI interactions using Video events with videos from Cloudinary on a Next.js page

Video events trigger on a Next.js Page

In this Media Jam you will learn how to create a native web component that replaces the default YouTube iframe embed. 

Create a performant YouTube embed with a native web component

In this jam, we discussed how to use remote images from Cloudinary in a Gatsby project using gatsby-image and without the need for Grapql image queries.

Serving Remote Images in Gatsby.js using Gatsby-image w/o GraphQL

In this Media Jam, we learn how to build a Video Gallery using Next.js and Cloudinary. We also look at how to integrate the 'react-awesome-slider' library with your Video Gallery. 

How to build a Video Gallery with Next.js

Custom bumpers at the beginning of videos can create a consistent experience that makes your content feel more professional and branded. In this tutorial, we’ll learn how to use Cloudinary to insert a bumper into any video. Then, we'll display the generated video in a React component.


Add a Video Bumper with React & Cloudinary

In this jam, we discuss how to utilize optimized remote images in a Gatsby.js project while utilizing gatsby-image's performance benefits.

Serving Remote Optimized Images w/ gatsby-image

How to upload images in Angular with a Drag & Drop component

In this Media Jam, we will build an Image Gallery and use the Next.js Image component to optimize the images fetched from the Pexels API. 

This gallery will show the list of curated photos by the Pexels team and has a dynamic route to them. The users will also be able to search for images using this gallery.

Build an Image Gallery with Next.js

Use product Images to create a video slideshow 

Showcase Images In Video-slideshow using Next.js

VR is a relatively new area of tech and now's a good time to learn about how to make AR apps with JavaScript. This tutorial will take you through everything you need to get started with VR in Redwood.

Creating a VR App with Redwood


In this Mediajam, we will learn how we can leverage Google's Dialogflow to analyze voice commands and use these commands to control video playback. We will look at how to create Dialogflow intents that translate to basic video commands such as play, pause, stop and seek video forwards or backward.

Control video playback with voice using Dialogflow

In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js.

Creating a Custom Video Player in Vue.js

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est quam, fermentum sed varius vitae, consectetur sed nunc. Integer sed libero pellentesque, finibus arcu eget, interdum odio. Morbi in pretium dui, ut vehicula orci. Donec bibendum vulputate est sit amet scelerisque. Vestibulum ac rutrum metus. Integer placerat odio massa, finibus. 

Browser Compression

In this Media Jam, we will discuss how to build an Image Gallery in Sapper with Cloudinary and upload images to Cloudinary with drag and drop operation.

How To Upload Images in Sapper With Drag and Drop

Track analytics on your video content on Gatsby.js sites using Google analytics on the Cloudinary video player

Capture Video Analytics in Gatsby.js Sites

Learn to autoplay a video when scrolled into view on a Next.js landing page

Autoplay a Video on a Next.js Landing page

In this jam, we discuss how to make a Gatsby.js app into a progressive web app and implement dark mode using Chakra-ui

Gatsby-image w/ PWA and Dark Mode Support 

In this media jam, you will create a Discord Bot to send memes to the discord channel. You will select a random image from your Cloudinary account, add the meme or the text message by the user to it and send it to the discord channel.

How to build a Discord Meme Bot with Cloudinary

How to set a favicon in your website in just 5 steps

A meme generator is a video or image maker that allows you to add custom resizable text to images. In this Mediajam we shall build one using Next.js and Cloudinary.

Meme generator using Next.js Images and videos

MDX, the powerful authoring format that lets you write JSX content inside of your markdown content, is an amazing tool to deliver interactive experiences to your readers. 

There are a few problems that you can encounter when using Gatsby and MDX, however. For example, if you want to use Gatsby image preprocessing capabilities with a featured image from your `frontmatter`, you need to tap into the Gatsby build system through the `gatsby-node.js` file to retrieve the image and create the corresponding Node. But what if you want to use the filesystem routing API from Gatsby instead?


Learn Media

for apps

What are Media Jams?

Bite-size Tutorials

Run & Play Sandboxes

Authored by Experts

Tech Stack Mashups

Practical Use-Cases

Program with Media

Jam Authors

As a free member...

Featured Jams