https://github.com/cloudinary-devs/javascript-photo-album
https://github.com/cloudinary-devs/javascript-photo-album
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/cloudinary-devs/javascript-photo-album
- Owner: cloudinary-devs
- Created: 2023-12-19T06:48:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-01T09:17:06.000Z (about 2 years ago)
- Last Synced: 2025-01-25T16:32:07.180Z (over 1 year ago)
- Language: JavaScript
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introduction
This project demonstrates how to use the [Cloudinary JavaScript SDK](https://cloudinary.com/documentation/javascript_integration) to create a photo album app.
The sample project showcases the following functionality:
* Using the [Upload Widget](https://cloudinary.com/documentation/upload_widget) to upload images to your product environment
* Using the [REST API](https://cloudinary.com/documentation/client_side_uploading#direct_call_to_the_api) to upload images to your product environment
* [Transforming](https://cloudinary.com/documentation/image_transformations) and [displaying](https://cloudinary.com/documentation/javascript_image_transformations#plugins) images
# Setup
[Create an unsigned upload preset](https://cloudinary.com/documentation/upload_presets#creating_and_managing_upload_presets) 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'
```
# Run
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.
# Explore
* Take a look at the source code to understand how it works.
* Discover more features in the [Cloudinary Docs](https://cloudinary.com/documentation).
* Ask for help in our [Community Forum](https://community.cloudinary.com/), in [Discord](https://discord.gg/Cloudinary), or [raise a support request](https://support.cloudinary.com/hc/en-us/requests/new).
Feel free to fork this repo as a starting point for your own JavaScript app, contribute to it, or star it if you like it!