{"id":2744,"date":"2024-11-02T17:45:26","date_gmt":"2024-11-02T14:45:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/"},"modified":"2024-11-02T17:45:26","modified_gmt":"2024-11-02T14:45:26","slug":"olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/","title":{"rendered":"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile"},"content":{"rendered":"<p>\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile<\/p>\n<p>Merhaba, bu makalede React, Node.js ve Google Kimlik Do\u011frulamas\u0131 kullanarak \u00f6l\u00e7eklenebilir, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu makale, teknoloji merakl\u0131lar\u0131 ve deneyimli geli\u015ftiriciler i\u00e7in bir rehber g\u00f6revi g\u00f6recektir.<\/p>\n<h2>Neden Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu?<\/h2>\n<p> Geleneksel i\u015f kurullar\u0131n\u0131n aksine, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu, i\u015f arayanlar\u0131n ve i\u015fverenlerin ger\u00e7ek zamanl\u0131 olarak ileti\u015fim kurmas\u0131na olanak tan\u0131r. Bu, yeni i\u015f ilanlar\u0131n\u0131n an\u0131nda yay\u0131nlanmas\u0131n\u0131, adaylar\u0131n ba\u015fvurular\u0131n\u0131 hemen g\u00f6ndermesini ve i\u015fverenlerin uygun adaylarla an\u0131nda ileti\u015fime ge\u00e7mesini sa\u011flar. Bu \u00f6zellik, hem i\u015f arayanlar i\u00e7in zaman kazand\u0131r\u0131r hem de i\u015fverenler i\u00e7in verimlilik sa\u011flar. <\/p>\n<h2>Projenin Temel Bile\u015fenleri<\/h2>\n<p>Projemizde a\u015fa\u011f\u0131daki temel bile\u015fenleri kullanaca\u011f\u0131z:<\/p>\n<ul>\n<li> **React:** Kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturmak i\u00e7in kullanaca\u011f\u0131m\u0131z bir JavaScript kitapl\u0131\u011f\u0131.<\/li>\n<li> **Node.js:** Sunucu taraf\u0131 geli\u015ftirme i\u00e7in kullanaca\u011f\u0131m\u0131z JavaScript \u00e7al\u0131\u015fma zaman\u0131.<\/li>\n<li> **Express.js:** Node.js i\u00e7in bir web uygulamas\u0131 \u00e7er\u00e7evesi.<\/li>\n<li> **MongoDB:** Veri depolama i\u00e7in kullanaca\u011f\u0131m\u0131z bir NoSQL veritaban\u0131.<\/li>\n<li> **Socket.IO:** Ger\u00e7ek zamanl\u0131 ileti\u015fim sa\u011flamak i\u00e7in kullanaca\u011f\u0131m\u0131z bir JavaScript k\u00fct\u00fcphanesi.<\/li>\n<li> **Google Kimlik Do\u011frulamas\u0131:** Kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 i\u00e7in kullanaca\u011f\u0131m\u0131z bir hizmet.<\/li>\n<\/ul>\n<h2>Proje Yap\u0131s\u0131<\/h2>\n<p>Proje yap\u0131m\u0131z a\u015fa\u011f\u0131daki gibi olacakt\u0131r:<\/p>\n<pre>\njob-board\/\n\u251c\u2500\u2500 client\/\n\u2502   \u251c\u2500\u2500 src\/\n\u2502   \u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 JobCard.js\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 JobList.js\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 LoginForm.js\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 SignupForm.js\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Navbar.js\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 Footer.js\n\u2502   \u2502   \u251c\u2500\u2500 App.js\n\u2502   \u2502   \u251c\u2500\u2500 services\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 auth.js\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 job.js\n\u2502   \u2502   \u251c\u2500\u2500 utils\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 axios.js\n\u2502   \u2502   \u251c\u2500\u2500 styles\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 App.css\n\u2502   \u2502   \u251c\u2500\u2500 index.js\n\u2502   \u251c\u2500\u2500 public\/\n\u2502   \u2502   \u251c\u2500\u2500 index.html\n\u2502   \u2502   \u2514\u2500\u2500 manifest.json\n\u2502   \u2514\u2500\u2500 webpack.config.js\n\u2514\u2500\u2500 server\/\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 config\/\n    \u2502   \u2514\u2500\u2500 database.js\n    \u251c\u2500\u2500 models\/\n    \u2502   \u251c\u2500\u2500 Job.js\n    \u2502   \u2514\u2500\u2500 User.js\n    \u251c\u2500\u2500 routes\/\n    \u2502   \u251c\u2500\u2500 auth.js\n    \u2502   \u251c\u2500\u2500 job.js\n    \u2502   \u2514\u2500\u2500 user.js\n    \u251c\u2500\u2500 services\/\n    \u2502   \u251c\u2500\u2500 auth.js\n    \u2502   \u251c\u2500\u2500 job.js\n    \u2502   \u2514\u2500\u2500 user.js\n    \u2514\u2500\u2500 sockets\/\n        \u2514\u2500\u2500 index.js\n<\/pre>\n<h2>Ad\u0131m 1: Projenin Kurulmas\u0131<\/h2>\n<p>Projenin temel yap\u0131s\u0131n\u0131 olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyece\u011fiz:<\/p>\n<ol>\n<li>Yeni bir proje dizini olu\u015fturun: <code>mkdir job-board<\/code><\/li>\n<li>Proje dizinine gidin: <code>cd job-board<\/code><\/li>\n<li>\u0130stemci taraf\u0131 projesini olu\u015fturun: <code>npx create-react-app client<\/code><\/li>\n<li>Sunucu taraf\u0131 projesini olu\u015fturun: <code>mkdir server<\/code><\/li>\n<li>Sunucu taraf\u0131 projesi i\u00e7in gerekli paketleri y\u00fckleyin: <code>npm install express mongoose socket.io cors dotenv<\/code><\/li>\n<\/ol>\n<h2>Ad\u0131m 2: Veritaban\u0131 Kurulumu<\/h2>\n<p>MongoDB&#8217;yi veri depolama i\u00e7in kullanaca\u011f\u0131z. MongoDB&#8217;yi kurmak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyin:<\/p>\n<ol>\n<li>MongoDB&#8217;yi indirin ve kurun. <\/li>\n<li>MongoDB&#8217;yi ba\u015flat\u0131n: <code>mongod<\/code><\/li>\n<li>MongoDB&#8217;ye ba\u011flan\u0131n: <code>mongo<\/code><\/li>\n<li>Bir veritaban\u0131 olu\u015fturun: <code>use jobboard<\/code><\/li>\n<li>Bir koleksiyon olu\u015fturun: <code>db.jobs.insertOne({})<\/code><\/li>\n<\/ol>\n<h2>Ad\u0131m 3: Modellerin Tan\u0131mlanmas\u0131<\/h2>\n<p>Veritaban\u0131m\u0131zda kullan\u0131lacak modelleri tan\u0131mlayaca\u011f\u0131z. <code>server\/models<\/code> dizininde <code>Job.js<\/code> ve <code>User.js<\/code> dosyalar\u0131 olu\u015fturun.<\/p>\n<h3>Job Model<\/h3>\n<pre>\nconst mongoose = require('mongoose');\n\nconst jobSchema = new mongoose.Schema({\n  title: { type: String, required: true },\n  company: { type: String, required: true },\n  location: { type: String, required: true },\n  description: { type: String, required: true },\n  createdAt: { type: Date, default: Date.now },\n});\n\nmodule.exports = mongoose.model('Job', jobSchema);\n<\/pre>\n<h3>User Model<\/h3>\n<pre>\nconst mongoose = require('mongoose');\n\nconst userSchema = new mongoose.Schema({\n  name: { type: String, required: true },\n  email: { type: String, required: true, unique: true },\n  password: { type: String, required: true },\n  role: { type: String, default: 'user' },\n  createdAt: { type: Date, default: Date.now },\n});\n\nmodule.exports = mongoose.model('User', userSchema);\n<\/pre>\n<h2>Ad\u0131m 4: Sunucu Taraf\u0131 Kodunu Yazma<\/h2>\n<p>Sunucu taraf\u0131 kodunu yazmaya ba\u015flayal\u0131m. <code>server\/index.js<\/code> dosyas\u0131n\u0131 d\u00fczenleyece\u011fiz.<\/p>\n<pre>\nconst express = require('express');\nconst mongoose = require('mongoose');\nconst cors = require('cors');\nconst dotenv = require('dotenv');\nconst http = require('http');\nconst socketIO = require('socket.io');\n\nconst authRoutes = require('.\/routes\/auth');\nconst jobRoutes = require('.\/routes\/job');\nconst userRoutes = require('.\/routes\/user');\n\nconst app = express();\ndotenv.config();\n\n\/\/ Veritaban\u0131na ba\u011flanma\nmongoose.connect(process.env.DATABASE_URI, {\n  useNewUrlParser: true,\n  useUnifiedTopology: true,\n})\n  .then(() => console.log('Veritaban\u0131na ba\u011flan\u0131ld\u0131.'))\n  .catch(err => console.error(err));\n\n\/\/ Ortam ayarlar\u0131\napp.use(cors());\napp.use(express.json());\n\n\/\/ Rota tan\u0131mlamalar\u0131\napp.use('\/api\/auth', authRoutes);\napp.use('\/api\/jobs', jobRoutes);\napp.use('\/api\/users', userRoutes);\n\n\/\/ Sunucu ba\u015flatma\nconst server = http.createServer(app);\nconst io = socketIO(server, {\n  cors: {\n    origin: 'http:\/\/localhost:3000',\n    methods: ['GET', 'POST'],\n  },\n});\n\nio.on('connection', (socket) => {\n  console.log('Bir kullan\u0131c\u0131 ba\u011fland\u0131.');\n\n  \/\/ Yeni i\u015f ilan\u0131 eklendi\u011finde soket \u00fczerinden yay\u0131n yapma\n  socket.on('new-job', (job) => {\n    io.emit('new-job', job);\n  });\n\n  socket.on('disconnect', () => {\n    console.log('Bir kullan\u0131c\u0131 ba\u011flant\u0131s\u0131n\u0131 kesti.');\n  });\n});\n\n\/\/ Sunucuyu ba\u015flatma\nconst port = process.env.PORT || 5000;\nserver.listen(port, () => console.log(`Sunucu ${port} portunda \u00e7al\u0131\u015f\u0131yor.`));\n<\/pre>\n<h2>Ad\u0131m 5: Rota Tan\u0131mlamalar\u0131<\/h2>\n<p>Kullan\u0131c\u0131 kimlik do\u011frulamas\u0131, i\u015f ilanlar\u0131 ve kullan\u0131c\u0131larla ilgili i\u015flemleri ele alacak rotalar\u0131 tan\u0131mlayaca\u011f\u0131z. <code>server\/routes<\/code> dizininde <code>auth.js<\/code>, <code>job.js<\/code> ve <code>user.js<\/code> dosyalar\u0131 olu\u015fturun.<\/p>\n<h3>Auth Routes<\/h3>\n<pre>\nconst express = require('express');\nconst router = express.Router();\nconst authController = require('..\/controllers\/auth');\n\n\/\/ Kay\u0131t olma\nrouter.post('\/signup', authController.signup);\n\n\/\/ Giri\u015f yapma\nrouter.post('\/login', authController.login);\n\nmodule.exports = router;\n<\/pre>\n<h3>Job Routes<\/h3>\n<pre>\nconst express = require('express');\nconst router = express.Router();\nconst jobController = require('..\/controllers\/job');\n\n\/\/ T\u00fcm i\u015f ilanlar\u0131n\u0131 listeleme\nrouter.get('\/', jobController.getJobs);\n\n\/\/ Yeni i\u015f ilan\u0131 ekleme\nrouter.post('\/', jobController.createJob);\n\n\/\/ Belirli bir i\u015f ilan\u0131n\u0131 alma\nrouter.get('\/:id', jobController.getJob);\n\n\/\/ \u0130\u015f ilan\u0131n\u0131 g\u00fcncelleme\nrouter.put('\/:id', jobController.updateJob);\n\n\/\/ \u0130\u015f ilan\u0131n\u0131 silme\nrouter.delete('\/:id', jobController.deleteJob);\n\nmodule.exports = router;\n<\/pre>\n<h3>User Routes<\/h3>\n<pre>\nconst express = require('express');\nconst router = express.Router();\nconst userController = require('..\/controllers\/user');\n\n\/\/ T\u00fcm kullan\u0131c\u0131lar\u0131 listeleme\nrouter.get('\/', userController.getUsers);\n\n\/\/ Belirli bir kullan\u0131c\u0131y\u0131 alma\nrouter.get('\/:id', userController.getUser);\n\n\/\/ Kullan\u0131c\u0131 bilgilerini g\u00fcncelleme\nrouter.put('\/:id', userController.updateUser);\n\n\/\/ Kullan\u0131c\u0131y\u0131 silme\nrouter.delete('\/:id', userController.deleteUser);\n\nmodule.exports = router;\n<\/pre>\n<h2>Ad\u0131m 6: Denetleyicilerin Tan\u0131mlanmas\u0131<\/h2>\n<p>Rotalar i\u00e7in gerekli i\u015f mant\u0131\u011f\u0131n\u0131 i\u00e7eren denetleyicileri tan\u0131mlayaca\u011f\u0131z. <code>server\/controllers<\/code> dizininde <code>auth.js<\/code>, <code>job.js<\/code> ve <code>user.js<\/code> dosyalar\u0131 olu\u015fturun.<\/p>\n<h3>Auth Controller<\/h3>\n<pre>\nconst User = require('..\/models\/User');\nconst bcrypt = require('bcryptjs');\nconst jwt = require('jsonwebtoken');\n\n\/\/ Kay\u0131t olma\nexports.signup = async (req, res) => {\n  try {\n    const { name, email, password } = req.body;\n\n    \/\/ Kullan\u0131c\u0131 ad\u0131 ve e-posta adresi zaten mevcut mu kontrol et\n    const existingUser = await User.findOne({ email });\n    if (existingUser) {\n      return res.status(400).json({ message: 'Kullan\u0131c\u0131 ad\u0131 veya e-posta adresi zaten mevcut.' });\n    }\n\n    \/\/ \u015eifreyi hashleyin\n    const hashedPassword = await bcrypt.hash(password, 10);\n\n    \/\/ Yeni kullan\u0131c\u0131 kayd\u0131 olu\u015fturun\n    const newUser = new User({ name, email, password: hashedPassword });\n    await newUser.save();\n\n    \/\/ JWT olu\u015fturun\n    const token = jwt.sign({ userId: newUser._id }, process.env.JWT_SECRET);\n\n    res.status(201).json({ token, userId: newUser._id });\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n\n\/\/ Giri\u015f yapma\nexports.login = async (req, res) => {\n  try {\n    const { email, password } = req.body;\n\n    \/\/ Kullan\u0131c\u0131y\u0131 bulun\n    const user = await User.findOne({ email });\n    if (!user) {\n      return res.status(401).json({ message: 'Ge\u00e7ersiz e-posta adresi veya \u015fifre.' });\n    }\n\n    \/\/ \u015eifreyi do\u011frulay\u0131n\n    const isMatch = await bcrypt.compare(password, user.password);\n    if (!isMatch) {\n      return res.status(401).json({ message: 'Ge\u00e7ersiz e-posta adresi veya \u015fifre.' });\n    }\n\n    \/\/ JWT olu\u015fturun\n    const token = jwt.sign({ userId: user._id }, process.env.JWT_SECRET);\n\n    res.status(200).json({ token, userId: user._id });\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n<\/pre>\n<h3>Job Controller<\/h3>\n<pre>\nconst Job = require('..\/models\/Job');\n\n\/\/ T\u00fcm i\u015f ilanlar\u0131n\u0131 listeleme\nexports.getJobs = async (req, res) => {\n  try {\n    const jobs = await Job.find().sort({ createdAt: -1 });\n    res.status(200).json(jobs);\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n\n\/\/ Yeni i\u015f ilan\u0131 ekleme\nexports.createJob = async (req, res) => {\n  try {\n    const { title, company, location, description } = req.body;\n\n    \/\/ Yeni i\u015f ilan\u0131 olu\u015fturun\n    const newJob = new Job({ title, company, location, description });\n    await newJob.save();\n\n    \/\/ Yeni i\u015f ilan\u0131n\u0131 soket \u00fczerinden yay\u0131nlay\u0131n\n    io.emit('new-job', newJob);\n\n    res.status(201).json(newJob);\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n\n\/\/ Belirli bir i\u015f ilan\u0131n\u0131 alma\nexports.getJob = async (req, res) => {\n  try {\n    const job = await Job.findById(req.params.id);\n    if (!job) {\n      return res.status(404).json({ message: '\u0130\u015f ilan\u0131 bulunamad\u0131.' });\n    }\n    res.status(200).json(job);\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n\n\/\/ \u0130\u015f ilan\u0131n\u0131 g\u00fcncelleme\nexports.updateJob = async (req, res) => {\n  try {\n    const { title, company, location, description } = req.body;\n    const updatedJob = await Job.findByIdAndUpdate(\n      req.params.id,\n      { title, company, location, description },\n      { new: true },\n    );\n    if (!updatedJob) {\n      return res.status(404).json({ message: '\u0130\u015f ilan\u0131 bulunamad\u0131.' });\n    }\n    res.status(200).json(updatedJob);\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n\n\/\/ \u0130\u015f ilan\u0131n\u0131 silme\nexports.deleteJob = async (req, res) => {\n  try {\n    const deletedJob = await Job.findByIdAndDelete(req.params.id);\n    if (!deletedJob) {\n      return res.status(404).json({ message: '\u0130\u015f ilan\u0131 bulunamad\u0131.' });\n    }\n    res.status(200).json({ message: '\u0130\u015f ilan\u0131 silindi.' });\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n<\/pre>\n<h3>User Controller<\/h3>\n<pre>\nconst User = require('..\/models\/User');\n\n\/\/ T\u00fcm kullan\u0131c\u0131lar\u0131 listeleme\nexports.getUsers = async (req, res) => {\n  try {\n    const users = await User.find();\n    res.status(200).json(users);\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n\n\/\/ Belirli bir kullan\u0131c\u0131y\u0131 alma\nexports.getUser = async (req, res) => {\n  try {\n    const user = await User.findById(req.params.id);\n    if (!user) {\n      return res.status(404).json({ message: 'Kullan\u0131c\u0131 bulunamad\u0131.' });\n    }\n    res.status(200).json(user);\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n\n\/\/ Kullan\u0131c\u0131 bilgilerini g\u00fcncelleme\nexports.updateUser = async (req, res) => {\n  try {\n    const { name, email, password } = req.body;\n    const updatedUser = await User.findByIdAndUpdate(\n      req.params.id,\n      { name, email, password },\n      { new: true },\n    );\n    if (!updatedUser) {\n      return res.status(404).json({ message: 'Kullan\u0131c\u0131 bulunamad\u0131.' });\n    }\n    res.status(200).json(updatedUser);\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n\n\/\/ Kullan\u0131c\u0131y\u0131 silme\nexports.deleteUser = async (req, res) => {\n  try {\n    const deletedUser = await User.findByIdAndDelete(req.params.id);\n    if (!deletedUser) {\n      return res.status(404).json({ message: 'Kullan\u0131c\u0131 bulunamad\u0131.' });\n    }\n    res.status(200).json({ message: 'Kullan\u0131c\u0131 silindi.' });\n  } catch (err) {\n    console.error(err);\n    res.status(500).json({ message: 'Bir hata olu\u015ftu.' });\n  }\n};\n<\/pre>\n<h2>Ad\u0131m 7: \u0130stemci Taraf\u0131 Kodunu Yazma<\/h2>\n<p>\u0130stemci taraf\u0131 kodunu yazmaya ba\u015flayal\u0131m. <code>client\/src<\/code> dizininde <code>App.js<\/code> dosyas\u0131n\u0131 d\u00fczenleyece\u011fiz.<\/p>\n<pre>\nimport React, { useState, useEffect } from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nimport JobList from '.\/components\/JobList';\nimport JobDetails from '.\/components\/JobDetails';\nimport LoginForm from '.\/components\/LoginForm';\nimport SignupForm from '.\/components\/SignupForm';\nimport Navbar from '.\/components\/Navbar';\nimport Footer from '.\/components\/Footer';\nimport AuthContext from '.\/context\/AuthContext';\nimport axios from '.\/utils\/axios';\n\nfunction App() {\n  const [authTokens, setAuthTokens] = useState(null);\n  const [user, setUser] = useState(null);\n\n  const setTokens = (data) => {\n    localStorage.setItem('tokens', JSON.stringify(data));\n    setAuthTokens(data);\n  };\n\n  const getUser = async () => {\n    const response = await axios.get('\/api\/users\/me', {\n      headers: {\n        Authorization: `Bearer ${authTokens.access_token}`,\n      },\n    });\n    setUser(response.data);\n  };\n\n  useEffect(() => {\n    const tokens = JSON.parse(localStorage.getItem('tokens'));\n    if (tokens) {\n      setTokens(tokens);\n      getUser();\n    }\n  }, []);\n\n  const logout = () => {\n    localStorage.removeItem('tokens');\n    setAuthTokens(null);\n    setUser(null);\n  };\n\n  return (\n    <AuthContext.Provider value={{ authTokens, setAuthTokens, user, setUser, logout }}>\n      <Router>\n        <Navbar \/>\n        <Routes>\n          <Route path=\"\/\" element={<JobList \/>} \/>\n          <Route path=\"\/jobs\/:id\" element={<JobDetails \/>} \/>\n          <Route path=\"\/login\" element={<LoginForm \/>} \/>\n          <Route path=\"\/signup\" element={<SignupForm \/>} \/>\n        <\/Routes>\n        <Footer \/>\n      <\/Router>\n    <\/AuthContext.Provider>\n  );\n}\n\nexport default App;\n<\/pre>\n<h2>Ad\u0131m 8: Google Kimlik Do\u011frulamas\u0131<\/h2>\n<p>Google Kimlik Do\u011frulamas\u0131&#8217;n\u0131 kullanarak kullan\u0131c\u0131lar\u0131n giri\u015f yapmas\u0131n\u0131 ve kaydolmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z.<\/p>\n<ol>\n<li>Google Cloud Console&#8217;da bir proje olu\u015fturun.<\/li>\n<li>Proje i\u00e7in OAuth 2.0 kimlik bilgisi olu\u015fturun.\n<ul>\n<li>Uygulama t\u00fcr\u00fc: Web uygulamas\u0131<\/li>\n<li>Yetkilendirme URL&#8217;si: <code>http:\/\/localhost:3000\/api\/auth\/google\/callback<\/code><\/li>\n<li>Onaylanm\u0131\u015f k\u00f6ken URL&#8217;si: <code>http:\/\/localhost:3000<\/code><\/li>\n<li>Geli\u015fmi\u015f ayarlar:\n<ul>\n<li>JWT yay\u0131nlay\u0131c\u0131s\u0131: Google&#8217;\u0131n yay\u0131nlay\u0131c\u0131s\u0131n\u0131 se\u00e7in.<\/li>\n<li>JWT al\u0131c\u0131s\u0131: <code>YOUR_CLIENT_ID.apps.googleusercontent.com<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Google Kimlik Do\u011frulamas\u0131 kimlik bilgilerini <code>server\/config\/database.js<\/code> dosyas\u0131nda saklay\u0131n.<\/li>\n<li>Sunucu taraf\u0131nda Google Kimlik Do\u011frulamas\u0131 i\u00e7in rotalar\u0131 ayarlay\u0131n.<\/li>\n<li>\u0130stemci taraf\u0131nda Google Kimlik Do\u011frulamas\u0131 i\u00e7in k\u00fct\u00fcphaneyi kullanarak Google&#8217;a giri\u015f yapma se\u00e7ene\u011fi ekleyin.<\/li>\n<\/ol>\n<h2>Ad\u0131m 9: Ger\u00e7ek Zamanl\u0131 \u0130\u015flevselli\u011fi Uygulama<\/h2>\n<p>Socket.IO kullanarak ger\u00e7ek zamanl\u0131 i\u015flevselli\u011fi uygulayaca\u011f\u0131z. <code>server\/sockets\/index.js<\/code> dosyas\u0131n\u0131 d\u00fczenleyerek yeni i\u015f ilanlar\u0131 eklendi\u011finde ger\u00e7ek zamanl\u0131 g\u00fcncellemeleri iletece\u011fiz.<\/p>\n<h2>Ad\u0131m 10: \u00d6l\u00e7eklenebilirlik<\/h2>\n<p>Projenin \u00f6l\u00e7eklenebilirli\u011fini art\u0131rmak i\u00e7in a\u015fa\u011f\u0131daki ipu\u00e7lar\u0131n\u0131 kullanabilirsiniz:<\/p>\n<ul>\n<li> **Veritaban\u0131 \u00f6l\u00e7ekleme:** MongoDB&#8217;de sharding ve replica setleri kullanarak veritaban\u0131n\u0131 \u00f6l\u00e7ekleyebilirsiniz. <\/li>\n<li> **Sunucu taraf\u0131 \u00f6l\u00e7ekleme:** Sunucuyu Node.js cluster modunu veya bir y\u00fck dengeleyici kullanarak \u00f6l\u00e7ekleyebilirsiniz. <\/li>\n<li> **\u0130stemci taraf\u0131 performans optimizasyonu:** \u0130stemci taraf\u0131 performans\u0131n\u0131 art\u0131rmak i\u00e7in React&#8217;in \u00f6zelliklerini kullan\u0131n.<\/li>\n<li> **\u0130stemci taraf\u0131 \u00f6nbellekleme:** \u0130stemci taraf\u0131nda \u00f6nbellekleme kullanarak sunucuya yap\u0131lan istek say\u0131s\u0131n\u0131 azaltabilirsiniz.<\/li>\n<\/ul>\n<h2>Sonu\u00e7<\/h2>\n<p>Bu makalede, React, Node.js ve Google Kimlik Do\u011frulamas\u0131 kullanarak \u00f6l\u00e7eklenebilir, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m ele ald\u0131k. Projede kullan\u0131lan teknolojileri ve tasar\u0131m desenlerini derinlemesine inceleyerek projenin yap\u0131 ta\u015flar\u0131n\u0131 olu\u015fturduk. <\/p>\n<p> Bu projede, ger\u00e7ek zamanl\u0131 i\u015flevsellik, Google Kimlik Do\u011frulamas\u0131 ve \u00f6l\u00e7eklenebilirlik gibi \u00f6nemli konulara de\u011finildi. Bu makaleyi bir ba\u015flang\u0131\u00e7 noktas\u0131 olarak kabul ederek projenizi kendi ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u00f6zelle\u015ftirebilirsiniz. Daha fazla bilgi ve \u00f6rnek i\u00e7in <a href=\"https:\/\/fatihsoysal.com\">fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.<\/p>\n<p> Umar\u0131m bu makale, kendi ger\u00e7ek zamanl\u0131 i\u015f kurulunuzu olu\u015fturman\u0131za yard\u0131mc\u0131 olur! Ba\u015far\u0131lar!<\/p>\n","protected":false},"excerpt":{"rendered":"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile Merhaba, bu makalede React,&hellip;","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-2744","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile<\/title>\n<meta name=\"description\" content=\"Merhaba, bu makalede React, Node.js ve Google Kimlik Do\u011frulamas\u0131 kullanarak \u00f6l\u00e7eklenebilir, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu makale, teknoloji merakl\u0131lar\u0131 ve deneyimli geli\u015ftiriciler i\u00e7in bir rehber g\u00f6revi g\u00f6recektir.\" \/>\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\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile\" \/>\n<meta property=\"og:description\" content=\"Merhaba, bu makalede React, Node.js ve Google Kimlik Do\u011frulamas\u0131 kullanarak \u00f6l\u00e7eklenebilir, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu makale, teknoloji merakl\u0131lar\u0131 ve deneyimli geli\u015ftiriciler i\u00e7in bir rehber g\u00f6revi g\u00f6recektir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-02T14:45: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=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile\",\"datePublished\":\"2024-11-02T14:45:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/\"},\"wordCount\":846,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/\",\"name\":\"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-02T14:45:26+00:00\",\"description\":\"Merhaba, bu makalede React, Node.js ve Google Kimlik Do\u011frulamas\u0131 kullanarak \u00f6l\u00e7eklenebilir, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu makale, teknoloji merakl\u0131lar\u0131 ve deneyimli geli\u015ftiriciler i\u00e7in bir rehber g\u00f6revi g\u00f6recektir.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile\"}]},{\"@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":"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile","description":"Merhaba, bu makalede React, Node.js ve Google Kimlik Do\u011frulamas\u0131 kullanarak \u00f6l\u00e7eklenebilir, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu makale, teknoloji merakl\u0131lar\u0131 ve deneyimli geli\u015ftiriciler i\u00e7in bir rehber g\u00f6revi g\u00f6recektir.","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\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/","og_locale":"tr_TR","og_type":"article","og_title":"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile","og_description":"Merhaba, bu makalede React, Node.js ve Google Kimlik Do\u011frulamas\u0131 kullanarak \u00f6l\u00e7eklenebilir, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu makale, teknoloji merakl\u0131lar\u0131 ve deneyimli geli\u015ftiriciler i\u00e7in bir rehber g\u00f6revi g\u00f6recektir.","og_url":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-02T14:45:26+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile","datePublished":"2024-11-02T14:45:26+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/"},"wordCount":846,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/","url":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/","name":"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-02T14:45:26+00:00","description":"Merhaba, bu makalede React, Node.js ve Google Kimlik Do\u011frulamas\u0131 kullanarak \u00f6l\u00e7eklenebilir, ger\u00e7ek zamanl\u0131 bir i\u015f kurulu olu\u015fturma s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu makale, teknoloji merakl\u0131lar\u0131 ve deneyimli geli\u015ftiriciler i\u00e7in bir rehber g\u00f6revi g\u00f6recektir.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-gercek-zamanli-bir-is-kurulu-olusturmak-react-node-js-ve-google-kimlik-dogrulamasi-ile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00d6l\u00e7eklenebilir Ger\u00e7ek Zamanl\u0131 Bir \u0130\u015f Kurulu Olu\u015fturmak: React, Node.js ve Google Kimlik Do\u011frulamas\u0131 ile"}]},{"@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\/2744","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=2744"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/2744\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=2744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=2744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=2744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}