There is beauty in data even though we don't get to see it often. If you're wanting to learn how to make data visualizations with d3.js, let's start by making simple art.

Generate Custom Art with React

It is estimated that 66 percent of workers claim their firms have little or no explicit data protection policies or technology in place, despite expanding data privacy requirements for how information is gathered, saved, used, and shared. As a result, most organizations continue to use non-standard techniques to obfuscate content, relying on manual methods to anonymise sensitive data and thereby nullifying the chance for analysis and insights.

Reducing Data from Scanned Document with Next.js 

Many times, we render multiple images in a slideshow or gallery format. However, the user experience and interface are not normally the best requiring additional HTML code, user navigation, and complex animation settings. Let us explore how to easily create video slideshows to provide a better user experience for our customers.

Creating video slideshows in NuxtJS

This article uses nextjs to create a turbulence effect on an image element to create a water ripple effect using html and css effect. Cloudinary online storage will be used for our final result storage.

 Create a Water Ripple Effect in Next.js

This article demonstrates Nextjs framework can be used to generate a rich css and HTML infinite frame.

Infinity Framing with Next.js

Document processors like Microsoft Office are the de facto standard for producing and formatting documents. When transmitting information such as statements or invoices, even its most passionate customers seek extra features and usefulness from online file converters to make PDFs. The reason for this is that word documents can be edited, whereas PDF documents cannot. The same may be said about how PDF documents maintain their formatting across numerous devices.

How to Convert Documents to Images

In this post, we'll look at three common problems with image optimization, and then we'll see how to solve these problems using the Next.js Image component.

How to Optimize Next.js Images

In this post, we'll learn how to embed an HTML5 video player on an HTML document and define custom controls that are independent of the browser defaults.

Build a Custom HTML5 Video Player with JavaScript

This article demonstrates how to identify and maintain focus on a person's face in a scene while they move. It gives for more focus mobility when capturing a webcam video with people.

Auto-Focusing Faces in Web-Cam Videos in Next.js

Blur Faces in Images in Next.js

In this article, we use an awesome free face generator api to create human face photos. This can be used to make database demos and site mockups.

Mockups Face Generator Using Next.js

There are a lot of ways we interact with our cameras these days and using filters is one of them. In this tutorial, we'll go through the process of adding a custom filter to a camera using the p5.js library.

Make a Custom Camera Filter in React

This article describes how to read text characters from a webcam and save them online for future use.

Extracting Webcam Text with Next.JS

An article about creating custom video ads with text and images in next.js.

Create Custom Video Ads

Creating Custom Video Ads in Next.js

In this Mediajam, we use nextjs to demonstrate a rich javascript and CSS background animation effect that can be used in product marketing or website design.

Background Animation Effect with Next.js

When you're about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you'd see a button at the top left corner for unmuting the video.

This article will walk you through implementing that feature using video events in Next.js.

Youtube-like "Click to Unmute" Feature in Next.js

Learn how to create a custom meetup banner in Nuxt.js using the Cloudinary transformation features on an image.

Create a Custom Meetup Banner in NuxtJS

This post demonstrated how to create in-video ads in Next.js.

Create In-Video Ads in Next.js

Blur out Text in Images Using OCR in NuxtJS

A web application for transforming restaurant URLs into QR codes.

Create a Restaurant QR Code Menu in Next.js

Learn how to encode a contact card in a barcode and upload it on Cloudinary.

Create a Contact Card Barcode Generator NuxtJS

In this article, we will build a fully optimized and robust image gallery with Next.js and Cloudinary's Product Gallery widget.

Create an Optimized Image Gallery in Next.js

In this article, you will learn how to create a custom music album cover art using text and any image of your choice and enhance it using Cloudinary’s Neural Art Style Transfer add-on.

Create Music Art Covers Using AI in Next.js

Create Easter Greeting Cards in Next.js

This article will teach you how to implement Cloudinary’s OCR add-on in your Next.js project to detect and extract text from images.


Handle Quick AI Text Detection in Images in Next.js

A YouTube-Like video plays a muted video when the video first loads and subsequently allows you to unmute the sound with the click of a button giving the user control.

YouTube-Like Unmute Button in NuxtJS

Using a QR code for your customer experience in a restaurant acts as a way of formatting an image so that cameras can read the image and translate it into text.


Create a Restaurant QR Code Menu in NuxtJS

Embed OpenStreetMap in a Next.js Project

This article addressed Blur Faces in Images in Nuxt.js

Blur Faces in Images in NuxtJS

A digital event meetup banner built with React JS

Create a Custom Meetup Banner in Next.js

3 Ways to Implement a Carousel in Nextjs

Depending on the type of experience we aim for, normal videos might not be adequate for our users. We might need additional interactivity in our videos for a better experience. Let us explore how we can achieve this in an easy way. 

Interactive Videos in NuxtJS

Many times, we have different images with varying characteristics such as width, height, aspect ratio, metadata, etc. Let us learn how we can dynamically only manipulate images that satisfy custom conditions without additional code logic.

Conditional Image Transformations in NuxtJS

This article will go through how to implement the Cloudinary Google auto-tagging add-on to automatically generate tags for images, fetch the generated image tags, and access image resources based on a specified tag.

Auto-Tag and Categorize Images Using Cloudinary

This post will describe how to use Multer — a Node.js middleware used to handle multipart/form-data. First, we would create an API route, write some logic describing how Multer can be used to parse files, and then upload the said file(s) to Cloudinary.

How to Parse Media Files with Multer

In this article, we'll see how to add google analytics to our application to provide valuable insights about our website's visitors, like track critical data about how and when customers watch our videos.

Add Google Analytics to Your Cloudinary Video

This post describes how to upload images using the react-dropzone package. We’ll go through the implementation process by building a basic Next.js application that lets us select images and upload them to Cloudinary. We’ll also look at the various ways to customize the dropzone.

Upload Images with React-Dropzone

In this post, we'll look at how to enhance the visual quality of images with the Cloudinary the Viesus add-on for a more crisp and enhanced appearance, automatically detecting and improving brightness, saturation, etc.


Enhance Image Quality with Cloudinary and Viesus

In this article, we'll look at how to optimize images for various screen sizes using the srcSet and sizes HTML attributes by building a simple photo album application with React. We will also take advantage of Cloudinary's URL transformation feature to automatically generate images of different sizes without duplicating or modifying the images for each screen size.

Image Optimization with Cloudinary

Create a nextjs face detector app that uses cloudinary transformation feature to detect faces in images as well as cloudinary online storage services to store the generated images for future reference.

Creating a Face Detector with Next.js 

Implement Drag and Drop for Media Upload in React

How to Validate Media Uploads in JavaScript

This article demonstrates how to track video impressions using Next.js and Supabase — a serverless database.

Track Video Impressions in Next.js with Supabase

How to Add FX to Images before Uploading

How to Crop and Resize Image in the Browser

Add Movement to Your Landing Page with Videos

Avoid trying to share long URLs in the physical world by programmatically generating QR codes in JavaScript with Cloudinary and the Google Charts API.

Generate QR Codes in JavaScript with Cloudinary

When building a weather app with weather sharing capabilities, it is important we allow our users to easily share brief insightful images of the weather conditions. In this article, we explore how we can achieve this using open weather APIs.

Dynamic Weather Cards in NuxtJS

Consuming APIs and generating custom images from the data received is a wholesome task. Let us explore how we can generate dynamic movie posters for films in the movie database.

Generating Movie Posters in NuxtJS

Device Pixel Ratio (DPR) is the ratio between an image's physical and logical pixels. Let us explore how to manually change an image’s DPR as well as adjust the DPR automatically based on the client device.

Managing Image Device Pixel Ratio in NuxtJS

Sometimes you need to take a quick look at what you have available, whether it's at a store level or a home level. We're going to build a quick inventory app to handle this for us.

Build an Inventory Tracker

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


Serverless Image Storage & Manipulation with Netlify

Managing company-wide docs can get messy quickly when everyone is using slightly different systems and standards to access and maintain everything. That's why we're going to make a small internal documentation managemenet system template with Next.

Make an Internal Docs System

If you've ever been frustrated about missing something going on in your community or city, this might be a way that you solve the problem. We're going to build an events calendar that people can add information to!

Make a Community Events Calendar

Embed a Static Map with OpenStreetMap in NuxtJS

Open Graph is an internet protocol created by Facebook that uses metadata in your code to enable your website to become a rich object on a social graph.

This article explores how to manage Open Graph images on your NuxtJS website.

How to Add Open Graph Images in NuxtJS

How to create an e-commerce product image carousel with Next.js and Swiper.js.

Create a Robust Product Image Gallery in Next.js

This post will discuss how to build a customizable product component using Nuxt.js and Cloudinary.

E-commerce product customization page in NuxtJS

This article discussed how to track video impressions in Nuxtjs with Supabase. You can track and store various data points in Supabase using this pattern.

Track Video Impressions in NuxtJS with Supabase

How to use react-intersection-observer to track image impressions and then how to store them in our browser’s localStorage.

Track Image impressions in Next.js

Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.

Simulate a Streaming Event in NuxtJS

The post explains how to blur out text in images using Optical character recognition using on-the-fly URL transformations on Cloudinary


Blur out Text in Images Using OCR in Next.js

This article enables a user to have different colored versions of an image by using resizable partitions created from the split-screen effect. Users can store any version of this image online using cloudinary online services.

Create a split effect using Next.js and splitJS

Learn how to create art images using neural artwork style transfer and Cloudinary transformations.

Art Gallery with Neural Style Transfer in NuxtJS

This article demonstrates how to track image impressions using Intersection Observer API and store impression counts in your browser’s local storage.

Track Image Impressions in LocalStorage and NuxtJS

This article demonstrates how a human character can be extracted from a video using nextjs and TensorFlow.

Character Remover from video in Next.js

This article shows how to build reusable, customizable, and responsive card components using Chakra UI.

Build Airbnb-style image cards with Chakra UI

This article addresses how to build an e-commerce product image zoom lens in NuxtJS.

Build an E-commerce Product Image Zoom Lens in NuxtJS

This article demonstrates how to implement static maps image embedding with Google maps in Next.js. Google Maps is a web platform that offers satellite imagery, aerial photography, street maps, real-time traffic conditions, and route planning.

Static Maps Image Embedding with Google Maps

This article covers creating a dynamic preview of shared web applications using Open Graph.

Manage Open Graph Images in NextJS

Signing documents is supposed to be an easy task that has become more than necessary as digital documents and remote work thrives. However, many apps make this complex by storing your signature on remote servers or requiring you to download remote apps. Let us explore how to create a simple website to sign single-page pdf documents.

Easy document signing in NuxtJS

This post demonstrated how to create a video player and handle player events with React Player using Gatsby.js.

Simulate a Streaming Event in Gatsby.js

Learn how to generate shipping label barcodes using CODE128 barcodes in a Nuxt.js application.

Generate a shipping label barcode image in NuxtJS

This post will discuss optimizing and delivering image assets with Netlify-plugin-cloudinary in a Next.js application.

Optimize with Netlify-plugin-cloudinary in Next.js

In this Mediajam, we create an app that accepts any picture and pixellates it using Cloudinary transformation feature inside nextjs

Pixellating Images using Cloudinary and Next.js

This post discusses creating custom video adverts using Cloudinary and Nuxt. 

Create custom video ads in NuxtJS

This is an article about using the Next.js next/image component to produce responsive images.

Implementing images using Next.js Image Component

Implementing robust optimization and delivery on hosted images is all about modifying and reusing images hosted publicly on the internet by applying Cloudinary transformation and optimization parameters.

Robust optimization and delivery on hosted images

In our complex world of constant user-generated content, you may want to analyze images to determine many things from quality to accessibility to semantic data. This is a complex task for a JAMStack website, but nonetheless possible. Let us build a simple Nuxt.Js app to do this

Analyzing images in a NuxtJS app

This post explores how to enable Cloudinary extension in Magento UI to manage products' assets and use GraphQL to query assets directly from Cloudinary. 

Manage a Magento store with Cloudinary and GraphQL

Remove the background from images and change to something else programmatically using Cloudinary AI.

Change a Background with Cloudinary & Next.js

This post will discuss how to create responsive emails with Images in MJML in Nodejs

Responsive emails with Images in MJML in Nodejs

This Mediajam demonstrates how we can change a webcam background color to grayscale.

Create a gray-scale webcam with Next.js

In this article, we create an application that facilitates real-time audio and video communication using a peer-to-peer (webrtc) protocol. The application will also contain cloudinary online storage relevant for a user’s future reference.


Real Time Communication Web App

The standard web streaming platforms such as Zoom and Google Meets are good platforms but there are many cases we want to have control over the user experience our event hosts and attendees have. Let us see how we can create our own live stream using WebRTC.

Creating a live stream on WebRTC using NuxtJS

In this post, we will go through how to asynchronously load and decode images on your website to improve page load performance and user experience.

How to asynchronously load and decode images

In this article, you will learn about asset modules in webpack, and how you can customize image bundling. You will also learn to manage media content loaded in a React application and the transition from url/file loaders.

Customizing image bundling in webpack

 This Mediajam demonstrates how to omit a specific character from the webcam view. The final video will also be made available for future reference through cloudinary integration

Webcam character remover with Tensorflow 

Build An E-commerce App Using React and Cloudinary

This article discussed using Chakra-ui for image grid responsiveness in Next.js. The Grid and SimpleGrid component of Chakra-ui is used respectively. It explains what Chakra-ui is, gives a brief introduction to Next.js, and show how to use Chakra-ui Grid and SimpleGrid component respectively to build a responsive image grid. 

Build a Responsive Image with Chakra-ui in Next.js

Learn how to create an infinite scroll image gallery using the intersection observer web API.

Infinite scroll images with Intersection Observer

In this article, we'll build a responsive and optimized video playlist application using Next.js and Cloudinary.

Build a Responsive Video Playlist with Next.js 

There are a lot of considerations that go into building an online store. Things like security and user experience are at the top of that list. In this tutorial, we'll take a look at doing server-side rendering with NextJS to help address both of these concerns.

Building a Clothing Store App

We explore how we can use CSS grids to design a colorful business card as well as include forms for a user to fill in their details and have their own card copy, stored and uploadable through the Cloudinary online platform

Business card design with Next.js and Emotion CSS

This article explains how to optimize images in React.js applications using image-webpack-loader, enhancing our application speed and providing a better user experience.

Optimize images using webpack in React

In this article, you will build a full-featured e-commerce product-image gallery with Nuxtjs and Cloudinary’s Product Gallery widget.

Build a robust e-commerce image gallery in NuxtJS

Video thumbnail with a preview on hover in Next.js

There are plenty of times we see something we don't recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we're looking at.

Using Machine Learning to Classify User Images

Learn how to handle image asset bundling with Vite in Vuejs. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Handle Image Asset Bundling using Vite in Vuejs

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

Learn to simulate a live event using recorded video.

Build a Live Event Simulator with Recorded Video

This article shows how to create a screen recording software that turns screen output to video that is stored and retrievable from Cloudinary. The videos can be used to teach an application or to promote a product by demonstrating its features.

Discover Jams

Featured Tags

Set up an account to unlock more learning resources!

Latest Jams