{"id":28383,"date":"2025-08-28T17:30:26","date_gmt":"2025-08-28T14:30:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/"},"modified":"2025-08-28T17:30:26","modified_gmt":"2025-08-28T14:30:26","slug":"react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/","title":{"rendered":"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma"},"content":{"rendered":"

React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma<\/p>\n

Bir etkinli\u011fin an\u0131lar\u0131n\u0131 \u00f6l\u00fcms\u00fczle\u015ftirmenin en iyi yolu, etkileyici bir foto\u011fraf ve video galerisi olu\u015fturmakt\u0131r. Bu makalede, React, Cloudinary, AWS Rekognition ve Firebase’i kullanarak, g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve kullan\u0131c\u0131 dostu bir etkinlik galerisi nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. G\u00f6r\u00fcnt\u00fc i\u015fleme, y\u00fcz tan\u0131ma ve veritaban\u0131 entegrasyonunu kapsayan bu kapsaml\u0131 rehber, geli\u015fmi\u015f uygulamalar i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.<\/p>\n

1. Temel Kavramlar: React, Cloudinary, AWS Rekognition ve Firebase<\/h2>\n

\u00d6ncelikle, projemizin temel yap\u0131 ta\u015flar\u0131n\u0131 anlayal\u0131m. React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Cloudinary, g\u00f6rselleri y\u00f6netmek, d\u00f6n\u00fc\u015ft\u00fcrmek ve teslim etmek i\u00e7in kullan\u0131\u015fl\u0131 bir bulut hizmetidir. AWS Rekognition, g\u00f6r\u00fcnt\u00fclerde nesneleri, y\u00fczleri ve sahneleri tan\u0131mak i\u00e7in g\u00fc\u00e7l\u00fc bir yapay zeka hizmeti sunar. Son olarak, Firebase, ger\u00e7ek zamanl\u0131 veritaban\u0131 ve kimlik do\u011frulama gibi \u00e7e\u015fitli hizmetler sunan bir Google \u00fcr\u00fcn\u00fcd\u00fcr. Bu d\u00f6rt teknolojinin birle\u015fimi, g\u00fc\u00e7l\u00fc ve esnek bir etkinlik galerisi olu\u015fturmam\u0131z\u0131 sa\u011flar.<\/p>\n

React’in bile\u015fen tabanl\u0131 yap\u0131s\u0131, galerinin mod\u00fcler ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar. Cloudinary, depolama ve optimizasyon sorunlar\u0131n\u0131 ortadan kald\u0131rarak, y\u00fcksek performansl\u0131 bir g\u00f6r\u00fcnt\u00fc deneyimi sunar. AWS Rekognition, galerideki foto\u011fraflar\u0131 otomatik olarak etiketleyerek, arama ve filtreleme \u00f6zelliklerini zenginle\u015ftirir. Firebase ise, galerinin verilerini g\u00fcvenli ve \u00f6l\u00e7eklenebilir bir \u015fekilde saklamay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n

Ba\u015flamadan \u00f6nce, bu teknolojilerin temel bilgisine sahip olman\u0131z \u00f6nemlidir. E\u011fer React, Cloudinary, AWS Rekognition veya Firebase ile ilgili deneyiminiz az ise, her birinin resmi dok\u00fcmanlar\u0131n\u0131 inceleyerek temel kavramlar\u0131 \u00f6\u011frenmeniz \u00f6nerilir. Daha sonra, bu makaledeki ad\u0131mlar\u0131 takip ederek, pratik deneyim kazanabilirsiniz. Ayr\u0131ca, Fatih Soysal’\u0131n web sitesi<\/a> gibi kaynaklardan daha fazla bilgi edinebilirsiniz.<\/p>\n

2. Proje Kurulumu ve Cloudinary Entegrasyonu<\/h2>\n

\u0130lk ad\u0131m olarak, yeni bir React projesi olu\u015ftural\u0131m. Create React App kullanarak bunu kolayca yapabilirsiniz:<\/p>\n

npx create-react-app my-event-gallery\ncd my-event-gallery<\/pre>\n
<\/code><\/p>\n
Ard\u0131ndan, Cloudinary hesab\u0131n\u0131z\u0131 olu\u015fturun ve API anahtarlar\u0131n\u0131z\u0131 al\u0131n.  Cloudinary'i projenize entegre etmek i\u00e7in, cloudinary-react<\/code> k\u00fct\u00fcphanesini y\u00fckleyin:<\/p>\n
npm install cloudinary-react<\/pre>\n
<\/code><\/p>\n
Cloudinary'i React bile\u015fenlerinizde kullanarak, foto\u011fraflar\u0131 kolayca y\u00fckleyebilir ve g\u00f6r\u00fcnt\u00fcleyebilirsiniz.  A\u015fa\u011f\u0131daki \u00f6rnekte, bir Cloudinary URL'sini kullanarak bir resim nas\u0131l g\u00f6r\u00fcnt\u00fclenir g\u00f6sterilmektedir:<\/p>\n
import React from 'react';\nimport { Cloudinary } from 'cloudinary-react';\n\nfunction MyComponent() {\n  return (\n    
\n      \n    <\/div>\n  );\n}\n\nexport default MyComponent;<\/pre>\n
<\/code><\/p>\n
Dikkat:  your_cloud_name<\/code> ve your_image_id<\/code> de\u011ferlerini kendi Cloudinary ayarlar\u0131n\u0131zla de\u011fi\u015ftirin.  Daha fazla bilgi i\u00e7in Cloudinary dok\u00fcmanlar\u0131n\u0131 inceleyin.<\/p>\n
3. AWS Rekognition ile G\u00f6r\u00fcnt\u00fc Analizi<\/h2>\n
AWS Rekognition, foto\u011fraflar\u0131 analiz ederek, y\u00fczleri, nesneleri ve sahneleri tan\u0131mlamam\u0131za olanak tan\u0131r.  Bunun i\u00e7in, \u00f6ncelikle bir AWS hesab\u0131n\u0131z olmas\u0131 ve Rekognition hizmetini etkinle\u015ftirmeniz gerekir.  Daha sonra, AWS SDK for JavaScript'i projenize ekleyin:<\/p>\n
npm install aws-sdk<\/pre>\n
<\/code><\/p>\n
AWS Rekognition'\u0131 kullanarak bir foto\u011fraf\u0131 analiz etmek i\u00e7in, a\u015fa\u011f\u0131daki gibi bir kod blo\u011fu kullanabilirsiniz:<\/p>\n
import AWS from 'aws-sdk';\n\nconst rekognition = new AWS.Rekognition({\n  region: 'YOUR_AWS_REGION', \/\/ \u00d6rne\u011fin: 'us-east-1'\n  accessKeyId: 'YOUR_ACCESS_KEY_ID',\n  secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',\n});\n\nasync function analyzeImage(imageUrl) {\n  const params = {\n    Image: {\n      S3Object: {\n        Bucket: 'YOUR_S3_BUCKET', \/\/ G\u00f6r\u00fcnt\u00fcn\u00fcn bulundu\u011fu S3 kovas\u0131\n        Name: 'YOUR_IMAGE_KEY', \/\/ G\u00f6r\u00fcnt\u00fcn\u00fcn S3'teki ad\u0131\n      },\n    },\n    Attributes: ['ALL'], \/\/ T\u00fcm \u00f6znitelikleri analiz et\n  };\n\n  try {\n    const data = await rekognition.detectLabels(params).promise();\n    console.log(data.Labels); \/\/ Analiz sonu\u00e7lar\u0131\n  } catch (error) {\n    console.error(error);\n  }\n}<\/pre>\n
<\/code><\/p>\n
Dikkat:  YOUR_AWS_REGION<\/code>, YOUR_ACCESS_KEY_ID<\/code>, YOUR_SECRET_ACCESS_KEY<\/code>, YOUR_S3_BUCKET<\/code> ve YOUR_IMAGE_KEY<\/code> de\u011ferlerini kendi AWS ayarlar\u0131n\u0131zla de\u011fi\u015ftirin.  G\u00fcvenlik nedeniyle, bu bilgileri do\u011frudan kodunuza g\u00f6mmek yerine, \u00e7evre de\u011fi\u015fkenleri kullanman\u0131z \u00f6nerilir.<\/p>\n
4. Firebase ile Veritaban\u0131 Entegrasyonu<\/h2>\n
Etkinlik galerisi i\u00e7in, foto\u011fraflar\u0131 ve meta verilerini saklamak i\u00e7in Firebase Realtime Database'i kullanaca\u011f\u0131z.  Firebase'i projenize eklemek i\u00e7in, Firebase konsolundan projenizi olu\u015fturun ve firebase<\/code> paketini y\u00fckleyin:<\/p>\n
npm install firebase<\/pre>\n
<\/code><\/p>\n
Firebase'i kullanarak foto\u011fraf verilerini eklemek ve okumak i\u00e7in, a\u015fa\u011f\u0131daki gibi bir kod \u00f6rne\u011fi kullanabilirsiniz:<\/p>\n
import { initializeApp } from \"firebase\/app\";\nimport { getDatabase, ref, set, get, child } from \"firebase\/database\";\n\n\/\/ Your web app's Firebase configuration\nconst firebaseConfig = {\n  \/\/ ...\n};\n\n\/\/ Initialize Firebase\nconst app = initializeApp(firebaseConfig);\nconst db = getDatabase(app);\n\nasync function addImage(imageUrl, labels) {\n  const newImageRef = ref(db, 'images\/' + Date.now());\n  await set(newImageRef, {\n    url: imageUrl,\n    labels: labels,\n  });\n}\n\nasync function getImages() {\n  const dbRef = ref(db, 'images');\n  const snapshot = await get(child(dbRef));\n  if (snapshot.exists()) {\n    console.log(snapshot.val());\n  } else {\n    console.log(\"No data available\");\n  }\n}<\/pre>\n
<\/code><\/p>\n
Bu kod, bir foto\u011fraf URL'sini ve AWS Rekognition taraf\u0131ndan belirlenen etiketleri Firebase veritaban\u0131na kaydeder.  getImages<\/code> fonksiyonu ise veritaban\u0131ndaki t\u00fcm foto\u011fraflar\u0131 al\u0131r.<\/p>\n
5. React Bile\u015fenleri ile Galerinin Olu\u015fturulmas\u0131<\/h2>\n
\u015eimdi, React bile\u015fenlerini kullanarak galerinin aray\u00fcz\u00fcn\u00fc olu\u015fturabiliriz.  Bu b\u00f6l\u00fcmde, Cloudinary ve Firebase'den gelen verileri kullanarak bir g\u00f6r\u00fcnt\u00fc galerisi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fiz.  \u00d6rne\u011fin, her bir foto\u011fraf i\u00e7in bir kart bile\u015feni olu\u015fturabilir ve foto\u011fraf\u0131n URL'sini, etiketlerini ve di\u011fer meta verilerini g\u00f6r\u00fcnt\u00fcleyebilirsiniz.<\/p>\n
Uzman \u0130pucu:  Performans\u0131 iyile\u015ftirmek i\u00e7in, sadece g\u00f6r\u00fcn\u00fcrdeki foto\u011fraflar\u0131 y\u00fcklemeyi d\u00fc\u015f\u00fcn\u00fcn.  Sonsuz kayd\u0131rma gibi teknikler kullanarak, kullan\u0131c\u0131 deneyimini optimize edebilirsiniz.<\/p>\n
6. Arama ve Filtreleme \u00d6zelliklerinin Eklenmesi<\/h2>\n
Kullan\u0131c\u0131lara galerideki foto\u011fraflar\u0131 arama ve filtreleme imkan\u0131 sunmak, etkinlik galerisi deneyimini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde geli\u015ftirir.  AWS Rekognition taraf\u0131ndan sa\u011flanan etiketler, bu \u00f6zelli\u011fin temelini olu\u015fturur.  Kullan\u0131c\u0131lar, etiketler veya anahtar kelimeler kullanarak foto\u011fraflar\u0131 filtreleyebilirler.<\/p>\n
\u00d6rnek olarak, bir arama \u00e7ubu\u011fu ekleyerek, kullan\u0131c\u0131lar\u0131n etiketlere g\u00f6re arama yapmalar\u0131n\u0131 sa\u011flayabilirsiniz.  Arama sonu\u00e7lar\u0131, e\u015fle\u015fen etiketlere sahip foto\u011fraflar\u0131 g\u00f6sterir.<\/p>\n
7.  Geli\u015fmi\u015f \u00d6zellikler ve \u00d6l\u00e7eklendirme<\/h2>\n
Daha geli\u015fmi\u015f bir etkinlik galerisi i\u00e7in, ek \u00f6zellikler ekleyebilirsiniz. \u00d6rne\u011fin, kullan\u0131c\u0131lara foto\u011fraflar\u0131 be\u011fenme, yorum ekleme veya payla\u015fma gibi etkile\u015fimli \u00f6zellikler sunabilirsiniz.  Ayr\u0131ca, Firebase Authentication kullanarak, kullan\u0131c\u0131lar\u0131n kendi foto\u011fraflar\u0131n\u0131 y\u00fcklemelerine izin verebilirsiniz.  Bununla birlikte, g\u00fcvenlik \u00f6nlemlerine \u00f6zellikle dikkat etmelisiniz.  Kullan\u0131c\u0131 giri\u015fi ve yetkilendirme do\u011fru \u015fekilde uygulanmal\u0131d\u0131r.<\/p>\n
Uygulaman\u0131n \u00f6l\u00e7eklenebilirli\u011fi i\u00e7in, Cloudinary'nin sunucular\u0131 \u00fczerinden g\u00f6r\u00fcnt\u00fcleri y\u00f6netmek ve Firebase'in ger\u00e7ek zamanl\u0131 veritaban\u0131 \u00f6zelli\u011fini kullanmak \u00f6nemlidir.  B\u00fcy\u00fck bir resim say\u0131s\u0131 i\u00e7in, veritaban\u0131 sorgular\u0131n\u0131 optimize etmek ve \u00f6nbelle\u011fe alma mekanizmalar\u0131 kullanmak gerekebilir.<\/p>\n
8.  \u00d6\u011frenme Yol Haritas\u0131<\/h2>\n
* Yeni Ba\u015flayan:<\/strong> React ve JavaScript temellerini \u00f6\u011frenin. Cloudinary ve Firebase'in temel kullan\u0131m\u0131n\u0131 kavray\u0131n. Basit bir statik g\u00f6r\u00fcnt\u00fc galerisi olu\u015fturarak pratik yap\u0131n.
\n* Orta:<\/strong> AWS Rekognition ile g\u00f6r\u00fcnt\u00fc analizi yapmay\u0131 \u00f6\u011frenin.  Firebase Realtime Database'i kullanarak verileri y\u00f6netin.  Ara\u015ft\u0131rma ve filtreleme \u00f6zelliklerini ekleyin.
\n* \u0130leri D\u00fczey:<\/strong>  Kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 (Firebase Authentication) ekleyin.  Geli\u015fmi\u015f g\u00f6r\u00fcnt\u00fc i\u015fleme tekniklerini uygulay\u0131n.  Uygulamay\u0131 optimize ederek \u00f6l\u00e7eklenebilirli\u011fi art\u0131r\u0131n.<\/p>\n
9. Vaka Analizi: Bir Konser Galerisi<\/h2>\n
Bir konser etkinli\u011fi i\u00e7in bir galeri d\u00fc\u015f\u00fcnelim.  Cloudinary, konser foto\u011fraflar\u0131n\u0131 y\u00fcksek kalitede saklamak ve teslim etmek i\u00e7in kullan\u0131l\u0131r.  AWS Rekognition, foto\u011fraflar\u0131 analiz ederek sanat\u00e7\u0131lar\u0131, enstr\u00fcmanlar\u0131 ve sahneyi tan\u0131mlar.  Bu etiketler, kullan\u0131c\u0131lar\u0131n konser foto\u011fraflar\u0131n\u0131 filtrelemelerini ve arama yapmalar\u0131n\u0131 sa\u011flar.  Firebase, foto\u011fraflar\u0131, etiketleri ve kullan\u0131c\u0131 yorumlar\u0131n\u0131 saklamak i\u00e7in kullan\u0131l\u0131r.  React, t\u00fcm bu bile\u015fenleri bir araya getiren etkile\u015fimli bir kullan\u0131c\u0131 aray\u00fcz\u00fc sa\u011flar.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu makalede, React, Cloudinary, AWS Rekognition ve Firebase kullanarak bir etkinlik galerisi olu\u015fturman\u0131n ad\u0131m ad\u0131m s\u00fcrecini anlatt\u0131k.  Bu g\u00fc\u00e7l\u00fc teknolojilerin birle\u015fimi, \u00f6l\u00e7eklenebilir, etkile\u015fimli ve kullan\u0131c\u0131 dostu bir galeri olu\u015fturmay\u0131 sa\u011flar.  \u00d6\u011frenme yol haritas\u0131n\u0131 takip ederek, kendi etkinlik galerilerinizi geli\u015ftirebilirsiniz.  Daha fazla bilgi i\u00e7in Fatih Soysal'\u0131n web sitesini<\/a> ziyaret edebilirsiniz.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
    \n
  • Cloudinary'nin alternatifi var m\u0131?<\/strong> Evet, Imgix, Cloudinary'ye benzer bir hizmet sunar.<\/li>\n
  • AWS Rekognition \u00fccretli mi?<\/strong> Evet, AWS Rekognition kullan\u0131m\u0131 \u00fccretlidir.  Fiyatland\u0131rma detaylar\u0131 i\u00e7in AWS dok\u00fcmanlar\u0131n\u0131 inceleyin.<\/li>\n
  • Firebase yerine ba\u015fka bir veritaban\u0131 kullanabilir miyim?<\/strong> Evet, MongoDB veya PostgreSQL gibi di\u011fer veritabanlar\u0131n\u0131 da kullanabilirsiniz.<\/li>\n
  • Uygulaman\u0131n g\u00fcvenli\u011fini nas\u0131l sa\u011flayabilirim?<\/strong> Firebase Authentication kullanarak kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 yapmal\u0131 ve verileri do\u011fru \u015fekilde \u015fifrelemelisiniz.<\/li>\n
  • Performans\u0131 nas\u0131l optimize edebilirim?<\/strong>  G\u00f6r\u00fcnt\u00fc optimizasyonu, \u00f6nbelle\u011fe alma ve lazy loading gibi teknikleri kullanmal\u0131s\u0131n\u0131z.<\/li>\n<\/ul>\n
    Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma Bir etkinli\u011fin an\u0131lar\u0131n\u0131 \u00f6l\u00fcms\u00fczle\u015ftirmenin en iyi yolu,…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-28383","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nReact ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma<\/title>\n<meta name=\"description\" content=\"Bir etkinli\u011fin an\u0131lar\u0131n\u0131 \u00f6l\u00fcms\u00fczle\u015ftirmenin en iyi yolu, etkileyici bir foto\u011fraf ve video galerisi olu\u015fturmakt\u0131r. Bu makalede, React, Cloudinary, AWS Rekognition ve Firebase'i kullanarak, g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve kullan\u0131c\u0131 dostu bir etkinlik galerisi nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. G\u00f6r\u00fcnt\u00fc i\u015fleme, y\u00fcz tan\u0131ma ve veritaban\u0131 entegrasyonunu kapsayan bu kapsaml\u0131 rehber, geli\u015fmi\u015f uygulamalar i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Bir etkinli\u011fin an\u0131lar\u0131n\u0131 \u00f6l\u00fcms\u00fczle\u015ftirmenin en iyi yolu, etkileyici bir foto\u011fraf ve video galerisi olu\u015fturmakt\u0131r. Bu makalede, React, Cloudinary, AWS Rekognition ve Firebase'i kullanarak, g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve kullan\u0131c\u0131 dostu bir etkinlik galerisi nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. G\u00f6r\u00fcnt\u00fc i\u015fleme, y\u00fcz tan\u0131ma ve veritaban\u0131 entegrasyonunu kapsayan bu kapsaml\u0131 rehber, geli\u015fmi\u015f uygulamalar i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-28T14:30:26+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma\",\"datePublished\":\"2025-08-28T14:30:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/\"},\"wordCount\":1299,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/\",\"name\":\"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-08-28T14:30:26+00:00\",\"description\":\"Bir etkinli\u011fin an\u0131lar\u0131n\u0131 \u00f6l\u00fcms\u00fczle\u015ftirmenin en iyi yolu, etkileyici bir foto\u011fraf ve video galerisi olu\u015fturmakt\u0131r. Bu makalede, React, Cloudinary, AWS Rekognition ve Firebase'i kullanarak, g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve kullan\u0131c\u0131 dostu bir etkinlik galerisi nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. G\u00f6r\u00fcnt\u00fc i\u015fleme, y\u00fcz tan\u0131ma ve veritaban\u0131 entegrasyonunu kapsayan bu kapsaml\u0131 rehber, geli\u015fmi\u015f uygulamalar i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma","description":"Bir etkinli\u011fin an\u0131lar\u0131n\u0131 \u00f6l\u00fcms\u00fczle\u015ftirmenin en iyi yolu, etkileyici bir foto\u011fraf ve video galerisi olu\u015fturmakt\u0131r. Bu makalede, React, Cloudinary, AWS Rekognition ve Firebase'i kullanarak, g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve kullan\u0131c\u0131 dostu bir etkinlik galerisi nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. G\u00f6r\u00fcnt\u00fc i\u015fleme, y\u00fcz tan\u0131ma ve veritaban\u0131 entegrasyonunu kapsayan bu kapsaml\u0131 rehber, geli\u015fmi\u015f uygulamalar i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma","og_description":"Bir etkinli\u011fin an\u0131lar\u0131n\u0131 \u00f6l\u00fcms\u00fczle\u015ftirmenin en iyi yolu, etkileyici bir foto\u011fraf ve video galerisi olu\u015fturmakt\u0131r. Bu makalede, React, Cloudinary, AWS Rekognition ve Firebase'i kullanarak, g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve kullan\u0131c\u0131 dostu bir etkinlik galerisi nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. G\u00f6r\u00fcnt\u00fc i\u015fleme, y\u00fcz tan\u0131ma ve veritaban\u0131 entegrasyonunu kapsayan bu kapsaml\u0131 rehber, geli\u015fmi\u015f uygulamalar i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-08-28T14:30:26+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"7 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma","datePublished":"2025-08-28T14:30:26+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/"},"wordCount":1299,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/","name":"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-08-28T14:30:26+00:00","description":"Bir etkinli\u011fin an\u0131lar\u0131n\u0131 \u00f6l\u00fcms\u00fczle\u015ftirmenin en iyi yolu, etkileyici bir foto\u011fraf ve video galerisi olu\u015fturmakt\u0131r. Bu makalede, React, Cloudinary, AWS Rekognition ve Firebase'i kullanarak, g\u00fc\u00e7l\u00fc, \u00f6l\u00e7eklenebilir ve kullan\u0131c\u0131 dostu bir etkinlik galerisi nas\u0131l in\u015fa edece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. G\u00f6r\u00fcnt\u00fc i\u015fleme, y\u00fcz tan\u0131ma ve veritaban\u0131 entegrasyonunu kapsayan bu kapsaml\u0131 rehber, geli\u015fmi\u015f uygulamalar i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-ile-cloudinary-aws-rekognition-ve-firebase-kullanarak-etkinlik-galerisi-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React ile Cloudinary, AWS Rekognition ve Firebase Kullanarak Etkinlik Galerisi Olu\u015fturma"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/28383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=28383"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/28383\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=28383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=28383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=28383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}