User-Generated Content (UGC) with Cloudinary

Environment Setup

Install Node.js and NPM

You will need to install Node.js on your machine, version 10 or higher.
Installing Node.js will also install npm, the package manager for Node.js.

Mac Users:

🍺 Using Homebrew:

$ brew install node

Windows Users:

Node Download for Windows

Verify Node/NPM install:

$ node --version
v18.18.1

$ npm --version
9.8.1

Choose an IDE or text editor:

Download this Repository:

UGC GitHub Repository

Node scripts for this module are located in the /moderation, /foldering, /transformations, /upload /upload-presets, /upload-widget and /transformations directories
Assets are located in /assets directory
Run code from root directory

Account Setup and Credentials:

If you don't have one already, create a free Cloudinary account at: https://www.cloudinary.com/signup.
Navigate to the Dashboard. Copy the CLOUDINARY_URL into your clipboard (see yellow arrow).

Create a .env file in the root of the project. Paste the CLOUDINARY_URL environment variable into your .env file.

There should be one line of code in your .env file, which should look like this:

CLOUDINARY_URL=cloudinary://YOUR_API_KEY:YOUR_API_SECRET@YOUR_CLOUD_NAME

Key: CLOUDINARY_URL
Value: cloudinary://API_KEY:API_SECRET@CLOUD_NAME

Doing this step properly is essential, as it will let Cloudinary know who you are and provide access to your cloud.

Run Code: Install Node Libraries

npm i

(You will be using the cloudinary and the dotenv libraries.)

Run Code: Test Credentials

node testCredentials.js

The output should look like this:

your Cloud Name
your API Key

Your API_SECRET is part of your CLOUDINARY_URL
Remember to always keep your API_SECRET a secret!
- This is why we programmed testCredentials.js to only output your cloud name and API Key (no need to keep these two credentials private)

Run Code: Optional Upload Check

node upload/local-upload.js

(You can optionally run the local image upload script to make sure you see the asset appear in your cloud)

Introduction to Material:

There is an accompanying slide deck that will walk you through the following topics related to UGC.

First we review where one might see UGC in the wild
Then, in the context of a food delivery app, we discuss ways Cloudinary can help with the management of said UGC