Getting Started

Getting started with Photobox is really simple.

Either clone the project locally or deploy the project, then configure your environment variables to connect your Cloudinary account, and you're all set!

Let's take it step by step...

A free Cloudinary account is required to set up a new Photobox!

Step 1: Clone or Deploy a New Photobox

If setting up your project locally...

In your terminal, run the following command:

npx create-next-app@latest -e https://github.com/cloudinary-community/photobox photobox

The Photobox project will be cloned locally, dependencies installed, and your Git history will be reset to a new project.

Note: You can alternatively clone the project manually directly from GitHub.

Or if you're deploying your project...

Deploy to Vercel:

Step 2: Configure Environment Variables

Photobox requires 3 environment variables to be configured, whether setting up locally or into a deployed environment:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"

These values can be found inside of your Cloudinary dashboard.

Step 3: Start Your Project

Note: Only relevant if starting your project locally!

Navigate to your Photobox project directory in your terminal and run the following command:

npm run dev

And once your project is started, you should now see your new Photobox project!

You'll notice at first no photos will appear, but that's expected! In order to use Photobox, you need to first upload some photos, so use the Upload button, drag-and-drop or select the images you want to add to your Photobox, then sit back and watch them upload!

I hope you love your new Photobox! Have any questions or want to request a feature? Head over to the Photobox GitHub page and create a new Issue!