- \n
- GitHub repository: Cloudinary Event Gallery<\/a><\/li>\n\n\n\n
- Live demo: https:\/\/eventographyapp.com\/<\/a><\/li>\n<\/ul>\n\n\n\n
1. Set Up Firebase<\/h2>\n\n\n\n
To begin, log in to your Firebase account or create a free account<\/a>. Then, click Create a project<\/strong> to configure your Firebase project.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_399,c_scale\/f_auto,q_auto\/v1719860975\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-1\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-1.png?_i=AA\")
<\/figure>\n\n\n\nGive a name to your Firebase project. I named mine Eventography<\/strong>. Check the boxes and click Continue<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_933,c_scale\/f_auto,q_auto\/v1719860971\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-2\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-2.png?_i=AA\")
<\/figure>\n\n\n\nEnabling Google Analytics on your project is optional. I disabled it. Then click Create project<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_1009,c_scale\/f_auto,q_auto\/v1719860963\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-3\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-3.png?_i=AA\")
<\/figure>\n\n\n\nHosting Configuration<\/h3>\n\n\n\n
Inside the Firebase console, on the left-hand panel, click Hosting<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_625,c_scale\/f_auto,q_auto\/v1719860958\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-4\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-4.png?_i=AA\")
<\/figure>\n\n\n\nNow, inside the hosting page, click Get Started<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_319,c_scale\/f_auto,q_auto\/v1719860954\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-5\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-5.png?_i=AA\")
<\/figure>\n\n\n\nTime to set Firebase CLI in your machine. Run the following command in your terminal:<\/p>\n\n\n
npm install -g firebase-tools<\/code><\/span><\/pre>\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_907,c_scale\/f_auto,q_auto\/v1719860950\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-6\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-6.png?_i=AA\")
<\/figure>\n\n\n\nThen click Next <\/strong>to initialize your Firebase project.<\/p>\n\n\n\n
Initialize your Firebase project by logging into your Firebase account in your terminal. This is the same email you used to create your Firebase website<\/a>.<\/p>\n\n\n\n
In your terminal, run:<\/p>\n\n\n
firebase login<\/code><\/span><\/pre>\n\n\nRun the following command from your app\u2019s root directory, then click Next<\/strong>.<\/p>\n\n\n
firebase init<\/code><\/span><\/pre>\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_637,c_scale\/f_auto,q_auto\/v1719860944\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-7\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-7.png?_i=AA\")
<\/figure>\n\n\n\nTo deploy your app to Firebase Hosting, you can use the following command. We aren\u2019t ready to deploy our app, but we will later on. Then click Continue to console<\/strong>.<\/p>\n\n\n
firebase deploy<\/code><\/span><\/pre>\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_866,c_scale\/f_auto,q_auto\/v1719860939\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-8\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-8.png?_i=AA\")
<\/figure>\n\n\n\nSingle Sign-On Configuration<\/h3>\n\n\n\n
On the left navigation, click All products<\/strong>, then click Authentication.<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_481,c_scale\/f_auto,q_auto\/v1719860933\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-9\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-9.png?_i=AA\")
<\/figure>\n\n\n\nOn the Authentication page, click Get Started. <\/strong> Go to Sign-in method<\/strong> and select Google<\/strong>. You can add different sign-in methods, but for this app, we\u2019ll only do Google.<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_525,c_scale\/f_auto,q_auto\/v1719860928\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-10\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-10.png?_i=AA\")
<\/figure>\n\n\n\nThen you\u2019ll enable Google, add a support email for your project, and finish the configuration by clicking Save<\/strong>.<\/p>\n\n\n\n
Firestore Configuration<\/h3>\n\n\n\n
On the left-hand panel, click All products<\/strong>, then Cloud Firestore.<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_482,c_scale\/f_auto,q_auto\/v1719860921\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-11\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-11.png?_i=AA\")
<\/figure>\n\n\n\nOn the Cloud Firestore page, click Create database. <\/strong><\/p>\n\n\n\n
Set the name and location of your project. I left everything as is. Then click Next<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_400,c_scale\/f_auto,q_auto\/v1719860916\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-12\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-12.png?_i=AA\")
<\/figure>\n\n\n\nClick Start in test mode<\/strong> (make sure to come back and set the production mode after 30 days and update your security settings), then Create<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_730,c_scale\/f_auto,q_auto\/v1719860909\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-13\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-13.png?_i=AA\")
<\/figure>\n\n\n\n2. <\/strong>Set Up Cloudinary<\/h2>\n\n\n\n
To begin, log in to your Cloudinary account or create a free account<\/a>. If prompted with the question, \u201cWhat\u2019s your main interest?\u201d, select Coding with APIs and SDKs<\/strong> or Skip<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_400,c_scale\/f_auto,q_auto\/v1719860904\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-14\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-14.png?_i=AA\")
<\/figure>\n\n\n\nCloudinary Cloud<\/h3>\n\n\n\n
In your account, select Settings > Product Environments<\/strong>. Here you\u2019ll see the cloud that you created. Let\u2019s click the three-dot menu to edit your Cloudinary Cloud Name.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_595,c_scale\/f_auto,q_auto\/v1719860900\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-15\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-15.png?_i=AA\")
<\/figure>\n\n\n\nEdit the product environment and name your cloud, then click Save Changes<\/strong>.<\/p>\n\n\n\n
It\u2019s important to keep the same cloud name across different tools to be consistent.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_534,c_scale\/f_auto,q_auto\/v1719860895\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-16\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-16.png?_i=AA\")
<\/figure>\n\n\n\nCloudinary Presets<\/h3>\n\n\n\n
Cloudinary Presets<\/a> is one of my favorite Cloudinary features. Upload Presets<\/strong> allow you to centrally establish a collection of asset upload configurations rather than configuring them individually with each upload request. You can create multiple upload presets and employ distinct presets for various upload scenarios.<\/p>\n\n\n\n
To create your first preset, go to Settings > Upload,<\/strong> then click Add Upload preset.<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_595,c_scale\/f_auto,q_auto\/v1719860889\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-17\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-17.png?_i=AA\")
<\/figure>\n\n\n\nIn your preset, make sure you\u2019re using Unsigned<\/a> as the signing mode.<\/strong> Lastly, you\u2019ll turn on the option of Use filename or externally defined Public ID<\/strong> and Unique filename<\/strong>, then click Save<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_595,c_scale\/f_auto,q_auto\/v1719860882\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-18\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-18.png?_i=AA\")
<\/figure>\n\n\n\nCloudinary also provides the Signed<\/a> as the signing mode. This mode allows you to enhance security around your uploads.<\/p>\n\n\n\n
Content Moderation With AWS Rekognition<\/h3>\n\n\n\n
AWS Rekognition<\/a> is a machine learning technology that analyzes image and video, and while it has different features, the one we\u2019re using with Cloudinary is the content moderation integration. This integration can help us detect potentially unsafe, inappropriate, or unwanted content.<\/p>\n\n\n\n
On the left-hand panel, click Settings<\/strong> > Upload<\/strong> > Your newly created preset > Edit.<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_595,c_scale\/f_auto,q_auto\/v1719860877\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-19\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-19.png?_i=AA\")
<\/figure>\n\n\n\nIn your preset, click Upload Control, <\/strong>and in the Auto moderation<\/strong> section, selectAWS Rekognition<\/strong>. You can adjust the confidence level, but I\u2019ll leave the default settings as 0.5. After configuring your preset, click Save<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_595,c_scale\/f_auto,q_auto\/v1719860871\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-20\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-20.png?_i=AA\")
<\/figure>\n\n\n\n3. Build the React App<\/h2>\n\n\n\n
Firebase Configuration<\/h3>\n\n\n\n
- Live demo: https:\/\/eventographyapp.com\/<\/a><\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_595,c_scale\/f_auto,q_auto\/v1719860865\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-21\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-21.png?_i=AA\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_608,c_scale\/f_auto,q_auto\/v1719860860\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-22\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-22.png?_i=AA\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_608,c_scale\/f_auto,q_auto\/v1719860855\/Web_Assets\/blog\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-23\/blog-How-to-Build-an-Event-Gallery-in-React-With-Cloudinary-AWS-Rekognition-and-Firebase-23.png?_i=AA\")
<\/figure>\n\n\n\n