{"id":3481,"date":"2024-11-10T05:15:18","date_gmt":"2024-11-10T02:15:18","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/"},"modified":"2024-11-10T05:15:18","modified_gmt":"2024-11-10T02:15:18","slug":"mern-yigini-ile-urun-magazasi-gelistirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/","title":{"rendered":"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme"},"content":{"rendered":"<p>MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme<\/p>\n<p>Merhaba, bug\u00fcn sizlere MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. MERN y\u0131\u011f\u0131n\u0131, MongoDB, Express.js, React ve Node.js&#8217;in bir araya gelmesiyle olu\u015fan pop\u00fcler bir web geli\u015ftirme y\u0131\u011f\u0131n\u0131d\u0131r. Bu y\u0131\u011f\u0131n, g\u00fc\u00e7l\u00fc sunucu taraf\u0131 ve istemci taraf\u0131 yetenekleri sunarak dinamik ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturmak i\u00e7in ideal bir tercihtir. Bu makalede, MERN y\u0131\u011f\u0131n\u0131yla bir e-ticaret uygulamas\u0131 geli\u015ftirmek i\u00e7in gereken ad\u0131mlar\u0131, temel kavramlar\u0131 ve \u00f6rnek kodlar\u0131 inceleyece\u011fiz.<\/p>\n<h2>MERN Y\u0131\u011f\u0131n\u0131: Temel Bile\u015fenler<\/h2>\n<p>MERN y\u0131\u011f\u0131n\u0131, her bir bile\u015feninin benzersiz i\u015flevlere sahip oldu\u011fu d\u00f6rt ana teknolojiden olu\u015fur:<\/p>\n<ul>\n<li><strong>MongoDB:<\/strong> Veritaban\u0131m\u0131z olarak kullanaca\u011f\u0131m\u0131z NoSQL veritaban\u0131 y\u00f6netim sistemidir. MongoDB, esnek veri modeli ve \u00f6l\u00e7eklenebilirli\u011fi ile bilinir. <\/li>\n<li><strong>Express.js:<\/strong> Node.js i\u00e7in bir web uygulama \u00e7er\u00e7evesidir. Express.js, REST API&#8217;leri olu\u015fturmak, rota i\u015flemek ve orta yaz\u0131l\u0131m kullanmak i\u00e7in kullan\u0131\u015fl\u0131 ara\u00e7lar sunar.<\/li>\n<li><strong>React:<\/strong> Kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirmek i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. React, bile\u015fen tabanl\u0131 bir yakla\u015f\u0131m sunar ve performans\u0131 art\u0131rmak i\u00e7in sanal DOM kullan\u0131r.<\/li>\n<li><strong>Node.js:<\/strong> JavaScript kodunu sunucu taraf\u0131nda \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131lan bir JavaScript \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131d\u0131r. Node.js, y\u00fcksek performansl\u0131 ve \u00f6l\u00e7eklenebilir sunucu taraf\u0131 uygulamalar\u0131 geli\u015ftirmeyi sa\u011flar.<\/li>\n<\/ul>\n<h2>Proje Kurulumu<\/h2>\n<p>\u00d6ncelikle, yeni bir MERN proje klas\u00f6r\u00fc olu\u015fturun ve i\u00e7inde bir paket y\u00f6neticisi kullanarak gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyin. Bu \u00f6rnekte npm kullanaca\u011f\u0131z:<\/p>\n<p>&#8220;`bash<br \/>\nmkdir my-product-store<br \/>\ncd my-product-store<br \/>\nnpm init -y<br \/>\n&#8220;`<\/p>\n<p>Ard\u0131ndan, Express.js, React ve MongoDB ile ilgili ba\u011f\u0131ml\u0131l\u0131klar\u0131 proje klas\u00f6r\u00fcne ekleyin:<\/p>\n<p>&#8220;`bash<br \/>\nnpm install express mongoose react react-dom react-router-dom axios<br \/>\n&#8220;`<\/p>\n<h2>Sunucu Taraf\u0131 Geli\u015ftirme (Node.js ve Express.js)<\/h2>\n<p>Sunucu taraf\u0131n\u0131 geli\u015ftirmek i\u00e7in \u00f6ncelikle Node.js ve Express.js kullanarak bir API olu\u015fturman\u0131z gerekir. API, veritaban\u0131ndan \u00fcr\u00fcn verilerini al\u0131p React uygulamas\u0131yla payla\u015facak. Bu ad\u0131mda MongoDB ile etkile\u015fim kurmak i\u00e7in <strong>mongoose<\/strong> k\u00fct\u00fcphanesini kullanaca\u011f\u0131z.<\/p>\n<h3>1. Model Tan\u0131mlama<\/h3>\n<p>Bir <strong>Product<\/strong> modeli olu\u015fturarak MongoDB&#8217;de hangi verilerin saklanaca\u011f\u0131n\u0131 belirleyece\u011fiz. <strong>models\/Product.js<\/strong> dosyas\u0131na a\u015fa\u011f\u0131daki kodu ekleyebilirsiniz:<\/p>\n<p>&#8220;`javascript<br \/>\nconst mongoose = require(&#8216;mongoose&#8217;);<\/p>\n<p>const productSchema = new mongoose.Schema({<br \/>\n  name: {<br \/>\n    type: String,<br \/>\n    required: true<br \/>\n  },<br \/>\n  description: {<br \/>\n    type: String,<br \/>\n    required: true<br \/>\n  },<br \/>\n  price: {<br \/>\n    type: Number,<br \/>\n    required: true<br \/>\n  },<br \/>\n  image: {<br \/>\n    type: String,<br \/>\n    required: true<br \/>\n  }<br \/>\n});<\/p>\n<p>module.exports = mongoose.model(&#8216;Product&#8217;, productSchema);<br \/>\n&#8220;`<\/p>\n<h3>2. Veritaban\u0131 Ba\u011flant\u0131s\u0131<\/h3>\n<p>MongoDB veritaban\u0131na ba\u011flant\u0131 kurmak i\u00e7in bir <strong>database.js<\/strong> dosyas\u0131 olu\u015fturun ve a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n<p>&#8220;`javascript<br \/>\nconst mongoose = require(&#8216;mongoose&#8217;);<\/p>\n<p>const connectDB = async () => {<br \/>\n  try {<br \/>\n    await mongoose.connect(process.env.MONGO_URI, {<br \/>\n      useNewUrlParser: true,<br \/>\n      useUnifiedTopology: true<br \/>\n    });<br \/>\n    console.log(&#8216;MongoDB Ba\u011flant\u0131s\u0131 Ba\u015far\u0131l\u0131&#8217;);<br \/>\n  } catch (err) {<br \/>\n    console.error(err.message);<br \/>\n    process.exit(1);<br \/>\n  }<br \/>\n};<\/p>\n<p>module.exports = connectDB;<br \/>\n&#8220;`<\/p>\n<p><strong>.env<\/strong> dosyas\u0131na <strong>MONGO_URI<\/strong> de\u011fi\u015fkenini ekleyin ve MongoDB ba\u011flant\u0131 dizgininizi ayarlay\u0131n:<\/p>\n<p>&#8220;`<br \/>\nMONGO_URI=mongodb:\/\/localhost:27017\/my-product-store<br \/>\n&#8220;`<\/p>\n<h3>3. API Rotalar\u0131<\/h3>\n<p>\u015eimdi, \u00fcr\u00fcn verilerini i\u015fleyecek API rotalar\u0131n\u0131 tan\u0131mlayaca\u011f\u0131z. Bir <strong>routes\/products.js<\/strong> dosyas\u0131 olu\u015fturun ve a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n<p>&#8220;`javascript<br \/>\nconst express = require(&#8216;express&#8217;);<br \/>\nconst router = express.Router();<br \/>\nconst Product = require(&#8216;..\/models\/Product&#8217;);<\/p>\n<p>\/\/ T\u00fcm \u00fcr\u00fcnleri listele<br \/>\nrouter.get(&#8216;\/&#8217;, async (req, res) => {<br \/>\n  try {<br \/>\n    const products = await Product.find();<br \/>\n    res.json(products);<br \/>\n  } catch (err) {<br \/>\n    res.status(500).json({ message: err.message });<br \/>\n  }<br \/>\n});<\/p>\n<p>\/\/ Yeni \u00fcr\u00fcn ekle<br \/>\nrouter.post(&#8216;\/&#8217;, async (req, res) => {<br \/>\n  const newProduct = new Product(req.body);<\/p>\n<p>  try {<br \/>\n    const savedProduct = await newProduct.save();<br \/>\n    res.status(201).json(savedProduct);<br \/>\n  } catch (err) {<br \/>\n    res.status(400).json({ message: err.message });<br \/>\n  }<br \/>\n});<\/p>\n<p>\/\/ Tek bir \u00fcr\u00fcn getir<br \/>\nrouter.get(&#8216;\/:id&#8217;, async (req, res) => {<br \/>\n  try {<br \/>\n    const product = await Product.findById(req.params.id);<br \/>\n    res.json(product);<br \/>\n  } catch (err) {<br \/>\n    res.status(404).json({ message: err.message });<br \/>\n  }<br \/>\n});<\/p>\n<p>\/\/ \u00dcr\u00fcn g\u00fcncelle<br \/>\nrouter.patch(&#8216;\/:id&#8217;, async (req, res) => {<br \/>\n  try {<br \/>\n    const updatedProduct = await Product.findByIdAndUpdate(req.params.id, req.body);<br \/>\n    res.json(updatedProduct);<br \/>\n  } catch (err) {<br \/>\n    res.status(400).json({ message: err.message });<br \/>\n  }<br \/>\n});<\/p>\n<p>\/\/ \u00dcr\u00fcn sil<br \/>\nrouter.delete(&#8216;\/:id&#8217;, async (req, res) => {<br \/>\n  try {<br \/>\n    await Product.findByIdAndDelete(req.params.id);<br \/>\n    res.json({ message: &#8216;\u00dcr\u00fcn silindi.&#8217; });<br \/>\n  } catch (err) {<br \/>\n    res.status(500).json({ message: err.message });<br \/>\n  }<br \/>\n});<\/p>\n<p>module.exports = router;<br \/>\n&#8220;`<\/p>\n<h3>4. Ana Sunucu Dosyas\u0131<\/h3>\n<p>Son olarak, API&#8217;yi ba\u015flatacak bir ana sunucu dosyas\u0131 olu\u015fturun. <strong>server.js<\/strong> dosyas\u0131na a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n<p>&#8220;`javascript<br \/>\nconst express = require(&#8216;express&#8217;);<br \/>\nconst dotenv = require(&#8216;dotenv&#8217;);<br \/>\nconst connectDB = require(&#8216;.\/database&#8217;);<br \/>\nconst productRouter = require(&#8216;.\/routes\/products&#8217;);<\/p>\n<p>dotenv.config();<br \/>\nconst app = express();<\/p>\n<p>\/\/ Orta yaz\u0131l\u0131m<br \/>\napp.use(express.json());<\/p>\n<p>\/\/ Veritaban\u0131 ba\u011flant\u0131s\u0131<br \/>\nconnectDB();<\/p>\n<p>\/\/ Rotalar<br \/>\napp.use(&#8216;\/api\/products&#8217;, productRouter);<\/p>\n<p>const PORT = process.env.PORT || 5000;<\/p>\n<p>app.listen(PORT, () => console.log(`Sunucu ${PORT} numaral\u0131 portta \u00e7al\u0131\u015f\u0131yor&#8230;`));<br \/>\n&#8220;`<\/p>\n<p>Bu kod par\u00e7as\u0131, Express.js uygulamas\u0131n\u0131 ba\u015flat\u0131r, MongoDB&#8217;ye ba\u011flan\u0131r, API rotalar\u0131n\u0131 ayarlar ve belirtilen portta sunucuyu dinler.<\/p>\n<h2>\u0130stemci Taraf\u0131 Geli\u015ftirme (React)<\/h2>\n<p>\u015eimdi, React kullanarak \u00fcr\u00fcn ma\u011fazam\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturaca\u011f\u0131z. React bile\u015fenleri, API&#8217;den veri alarak \u00fcr\u00fcnleri g\u00f6r\u00fcnt\u00fclememizi, aramam\u0131z\u0131 ve filtrelememizi sa\u011flayacak.<\/p>\n<h3>1. Bile\u015fenler<\/h3>\n<p>\u00d6ncelikle, \u00fcr\u00fcn ma\u011fazam\u0131z\u0131n temel bile\u015fenlerini olu\u015ftural\u0131m. <strong>src<\/strong> klas\u00f6r\u00fc alt\u0131nda a\u015fa\u011f\u0131daki bile\u015fenleri olu\u015fturun:<\/p>\n<ul>\n<li><strong>components\/Product.js<\/strong>: Tek bir \u00fcr\u00fcn\u00fc temsil eden bile\u015fen.<\/li>\n<li><strong>components\/ProductList.js<\/strong>: T\u00fcm \u00fcr\u00fcnleri listeleyen bile\u015fen.<\/li>\n<li><strong>components\/AddProduct.js<\/strong>: Yeni \u00fcr\u00fcn eklemek i\u00e7in bir form.<\/li>\n<li><strong>components\/Navbar.js<\/strong>: Site \u00e7ubu\u011fu.<\/li>\n<li><strong>components\/Footer.js<\/strong>: Site alt bilgisi.<\/li>\n<\/ul>\n<h3>2. Veri Al\u0131m\u0131 ve Durum Y\u00f6netimi<\/h3>\n<p>React bile\u015fenlerine veri sa\u011flamak i\u00e7in <strong>useState<\/strong> ve <strong>useEffect<\/strong> hook&#8217;lar\u0131n\u0131 kullanarak API&#8217;den \u00fcr\u00fcn verilerini alaca\u011f\u0131z. <strong>components\/ProductList.js<\/strong> dosyas\u0131na a\u015fa\u011f\u0131daki kodu ekleyebilirsiniz:<\/p>\n<p>&#8220;`javascript<br \/>\nimport React, { useState, useEffect } from &#8216;react&#8217;;<br \/>\nimport axios from &#8216;axios&#8217;;<br \/>\nimport Product from &#8216;.\/Product&#8217;;<\/p>\n<p>const ProductList = () => {<br \/>\n  const [products, setProducts] = useState([]);<\/p>\n<p>  useEffect(() => {<br \/>\n    const fetchProducts = async () => {<br \/>\n      try {<br \/>\n        const response = await axios.get(&#8216;\/api\/products&#8217;);<br \/>\n        setProducts(response.data);<br \/>\n      } catch (err) {<br \/>\n        console.error(err);<br \/>\n      }<br \/>\n    };<\/p>\n<p>    fetchProducts();<br \/>\n  }, []);<\/p>\n<p>  return (<\/p>\n<div className=\"product-list\">\n      {products.map(product => (<br \/>\n        <Product key={product._id} product={product} \/><br \/>\n      ))}\n    <\/div>\n<p>  );<br \/>\n};<\/p>\n<p>export default ProductList;<br \/>\n&#8220;`<\/p>\n<h3>3. Y\u00f6nlendirme<\/h3>\n<p>Farkl\u0131 sayfalara ge\u00e7i\u015f sa\u011flamak i\u00e7in <strong>react-router-dom<\/strong> k\u00fct\u00fcphanesini kullanaca\u011f\u0131z. <strong>src\/App.js<\/strong> dosyas\u0131na a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n<p>&#8220;`javascript<br \/>\nimport React from &#8216;react&#8217;;<br \/>\nimport { BrowserRouter as Router, Routes, Route } from &#8216;react-router-dom&#8217;;<br \/>\nimport ProductList from &#8216;.\/components\/ProductList&#8217;;<br \/>\nimport AddProduct from &#8216;.\/components\/AddProduct&#8217;;<br \/>\nimport Navbar from &#8216;.\/components\/Navbar&#8217;;<br \/>\nimport Footer from &#8216;.\/components\/Footer&#8217;;<\/p>\n<p>function App() {<br \/>\n  return (<br \/>\n    <Router><br \/>\n      <Navbar \/><br \/>\n      <Routes><br \/>\n        <Route path=\"\/\" element={<ProductList \/>} \/><br \/>\n        <Route path=\"\/add\" element={<AddProduct \/>} \/><br \/>\n      <\/Routes><br \/>\n      <Footer \/><br \/>\n    <\/Router><br \/>\n  );<br \/>\n}<\/p>\n<p>export default App;<br \/>\n&#8220;`<\/p>\n<h3>4. Stillendirilme<\/h3>\n<p>Son olarak, \u00fcr\u00fcn ma\u011fazam\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc iyile\u015ftirmek i\u00e7in CSS stilleri ekleyebiliriz. <strong>src\/index.css<\/strong> dosyas\u0131na veya her bir bile\u015fen i\u00e7in ayr\u0131 CSS dosyalar\u0131 olu\u015fturarak stillendirebilirsiniz. \u00d6rne\u011fin, <strong>components\/Product.js<\/strong> i\u00e7in CSS stilleri a\u015fa\u011f\u0131daki gibi olabilir:<\/p>\n<p>&#8220;`css<br \/>\n.product {<br \/>\n  border: 1px solid #ccc;<br \/>\n  padding: 20px;<br \/>\n  margin: 10px;<br \/>\n  border-radius: 5px;<br \/>\n  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);<br \/>\n}<\/p>\n<p>.product-image {<br \/>\n  width: 200px;<br \/>\n  height: 200px;<br \/>\n  object-fit: cover;<br \/>\n}<br \/>\n&#8220;`<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Bu makalede, MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m inceledik. Sunucu taraf\u0131 API&#8217;sini, React bile\u015fenlerini ve stillemeyi olu\u015fturarak temel bir e-ticaret uygulamas\u0131 olu\u015fturduk. Bu temel yap\u0131 \u00fczerine ek \u00f6zellikler ve i\u015flevsellikler ekleyerek daha geli\u015fmi\u015f bir ma\u011faza olu\u015fturabilirsiniz. MERN y\u0131\u011f\u0131n\u0131, esnekli\u011fi ve performans\u0131 ile \u00e7e\u015fitli web uygulamalar\u0131 geli\u015ftirmek i\u00e7in harika bir tercihtir. <\/p>\n<p> Daha fazla bilgi i\u00e7in, <a href=\"https:\/\/fatihsoysal.com\">web sitemi<\/a> ziyaret edebilirsiniz.<\/p>\n<p>#Etiketler<br \/>\nMERN Y\u0131\u011f\u0131n\u0131, React, MongoDB, Express.js, Node.js, E-ticaret, Web Geli\u015ftirme, API, Bile\u015fenler, Kullan\u0131c\u0131 Aray\u00fcz\u00fc, Veri Al\u0131m\u0131, Y\u00f6nlendirme, Stillendirilme<\/p>\n","protected":false},"excerpt":{"rendered":"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme Merhaba, bug\u00fcn sizlere MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m&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-3481","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>MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme<\/title>\n<meta name=\"description\" content=\"Merhaba, bug\u00fcn sizlere MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. MERN y\u0131\u011f\u0131n\u0131, MongoDB, Express.js, React ve Node.js&#039;in bir araya gelmesiyle olu\u015fan pop\u00fcler bir web geli\u015ftirme y\u0131\u011f\u0131n\u0131d\u0131r. Bu y\u0131\u011f\u0131n, g\u00fc\u00e7l\u00fc sunucu taraf\u0131 ve istemci taraf\u0131 yetenekleri sunarak dinamik ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturmak i\u00e7in ideal bir tercihtir. Bu makalede, MERN y\u0131\u011f\u0131n\u0131yla bir e-ticaret uygulamas\u0131 geli\u015ftirmek i\u00e7in gereken ad\u0131mlar\u0131, temel kavramlar\u0131 ve \u00f6rnek kodlar\u0131 inceleyece\u011fiz.\" \/>\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\/mern-yigini-ile-urun-magazasi-gelistirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme\" \/>\n<meta property=\"og:description\" content=\"Merhaba, bug\u00fcn sizlere MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. MERN y\u0131\u011f\u0131n\u0131, MongoDB, Express.js, React ve Node.js&#039;in bir araya gelmesiyle olu\u015fan pop\u00fcler bir web geli\u015ftirme y\u0131\u011f\u0131n\u0131d\u0131r. Bu y\u0131\u011f\u0131n, g\u00fc\u00e7l\u00fc sunucu taraf\u0131 ve istemci taraf\u0131 yetenekleri sunarak dinamik ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturmak i\u00e7in ideal bir tercihtir. Bu makalede, MERN y\u0131\u011f\u0131n\u0131yla bir e-ticaret uygulamas\u0131 geli\u015ftirmek i\u00e7in gereken ad\u0131mlar\u0131, temel kavramlar\u0131 ve \u00f6rnek kodlar\u0131 inceleyece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-10T02:15:18+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\/mern-yigini-ile-urun-magazasi-gelistirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme\",\"datePublished\":\"2024-11-10T02:15:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/\"},\"wordCount\":1300,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/\",\"name\":\"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-10T02:15:18+00:00\",\"description\":\"Merhaba, bug\u00fcn sizlere MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. MERN y\u0131\u011f\u0131n\u0131, MongoDB, Express.js, React ve Node.js'in bir araya gelmesiyle olu\u015fan pop\u00fcler bir web geli\u015ftirme y\u0131\u011f\u0131n\u0131d\u0131r. Bu y\u0131\u011f\u0131n, g\u00fc\u00e7l\u00fc sunucu taraf\u0131 ve istemci taraf\u0131 yetenekleri sunarak dinamik ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturmak i\u00e7in ideal bir tercihtir. Bu makalede, MERN y\u0131\u011f\u0131n\u0131yla bir e-ticaret uygulamas\u0131 geli\u015ftirmek i\u00e7in gereken ad\u0131mlar\u0131, temel kavramlar\u0131 ve \u00f6rnek kodlar\u0131 inceleyece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme\"}]},{\"@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":"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme","description":"Merhaba, bug\u00fcn sizlere MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. MERN y\u0131\u011f\u0131n\u0131, MongoDB, Express.js, React ve Node.js'in bir araya gelmesiyle olu\u015fan pop\u00fcler bir web geli\u015ftirme y\u0131\u011f\u0131n\u0131d\u0131r. Bu y\u0131\u011f\u0131n, g\u00fc\u00e7l\u00fc sunucu taraf\u0131 ve istemci taraf\u0131 yetenekleri sunarak dinamik ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturmak i\u00e7in ideal bir tercihtir. Bu makalede, MERN y\u0131\u011f\u0131n\u0131yla bir e-ticaret uygulamas\u0131 geli\u015ftirmek i\u00e7in gereken ad\u0131mlar\u0131, temel kavramlar\u0131 ve \u00f6rnek kodlar\u0131 inceleyece\u011fiz.","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\/mern-yigini-ile-urun-magazasi-gelistirme\/","og_locale":"tr_TR","og_type":"article","og_title":"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme","og_description":"Merhaba, bug\u00fcn sizlere MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. MERN y\u0131\u011f\u0131n\u0131, MongoDB, Express.js, React ve Node.js'in bir araya gelmesiyle olu\u015fan pop\u00fcler bir web geli\u015ftirme y\u0131\u011f\u0131n\u0131d\u0131r. Bu y\u0131\u011f\u0131n, g\u00fc\u00e7l\u00fc sunucu taraf\u0131 ve istemci taraf\u0131 yetenekleri sunarak dinamik ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturmak i\u00e7in ideal bir tercihtir. Bu makalede, MERN y\u0131\u011f\u0131n\u0131yla bir e-ticaret uygulamas\u0131 geli\u015ftirmek i\u00e7in gereken ad\u0131mlar\u0131, temel kavramlar\u0131 ve \u00f6rnek kodlar\u0131 inceleyece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-10T02:15:18+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\/mern-yigini-ile-urun-magazasi-gelistirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme","datePublished":"2024-11-10T02:15:18+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/"},"wordCount":1300,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/","url":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/","name":"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-10T02:15:18+00:00","description":"Merhaba, bug\u00fcn sizlere MERN y\u0131\u011f\u0131n\u0131 kullanarak bir \u00fcr\u00fcn ma\u011fazas\u0131 geli\u015ftirme s\u00fcrecini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. MERN y\u0131\u011f\u0131n\u0131, MongoDB, Express.js, React ve Node.js'in bir araya gelmesiyle olu\u015fan pop\u00fcler bir web geli\u015ftirme y\u0131\u011f\u0131n\u0131d\u0131r. Bu y\u0131\u011f\u0131n, g\u00fc\u00e7l\u00fc sunucu taraf\u0131 ve istemci taraf\u0131 yetenekleri sunarak dinamik ve etkile\u015fimli web uygulamalar\u0131 olu\u015fturmak i\u00e7in ideal bir tercihtir. Bu makalede, MERN y\u0131\u011f\u0131n\u0131yla bir e-ticaret uygulamas\u0131 geli\u015ftirmek i\u00e7in gereken ad\u0131mlar\u0131, temel kavramlar\u0131 ve \u00f6rnek kodlar\u0131 inceleyece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/mern-yigini-ile-urun-magazasi-gelistirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"MERN Y\u0131\u011f\u0131n\u0131 ile \u00dcr\u00fcn Ma\u011fazas\u0131 Geli\u015ftirme"}]},{"@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\/3481","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=3481"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3481\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=3481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=3481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=3481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}