This project demonstrates how to use the Cloudinary React SDK to create a photo album app.
The sample project showcases the following functionality:
- Using the Upload Widget to upload images to your product environment
- Using the REST API to upload images to your product environment
- Transforming and displaying images
Create an unsigned upload preset in your Cloudinary product environment and make a note of the name of the unsigned upload preset as well as your Cloudinary cloud name.
Create a .env
file with the following content at the root of the project:
VITE_CLOUD_NAME='YOUR-CLOUD-NAME'
VITE_UPLOAD_PRESET='YOUR-UNSIGNED-UPLOAD-PRESET'
From your terminal, in the root folder of your project, run:
npm i
npm run dev
Then, click the localhost link to open the app in your browser, or open a browser and navigate to localhost:5173 or to the port displayed in the terminal.
Try uploading images using each of the upload tabs, then see your images displayed in the Photo Album tab.
- Take a look at the source code to understand how it works.
- Discover more features in the Cloudinary Docs.
- Ask for help in our Community Forum, in Discord, or raise a support request.
Feel free to fork this repo as a starting point for your own React app, contribute to it, or star it if you like it!