{"id":37101,"date":"2025-12-27T12:00:47","date_gmt":"2025-12-27T09:00:47","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/"},"modified":"2025-12-27T12:00:47","modified_gmt":"2025-12-27T09:00:47","slug":"mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/","title":{"rendered":"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi"},"content":{"rendered":"<h2>MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi<\/h2>\n<p>Statik HTML sayfalar\u0131yla olu\u015fturulmu\u015f bir portfolyo, ba\u015flang\u0131\u00e7 i\u00e7in harika olabilir. Ancak projelerinizi, yeteneklerinizi veya blog yaz\u0131lar\u0131n\u0131z\u0131 s\u00fcrekli g\u00fcncellemeniz gerekti\u011finde, her seferinde kodu d\u00fczenlemek yorucu ve zaman al\u0131c\u0131 hale gelir. \u0130\u015fte tam bu noktada, MERN Stack (MongoDB, Express.js, React, Node.js) kullanarak kendi portfolyonuz i\u00e7in dinamik bir y\u00f6netim paneli olu\u015fturmak devreye giriyor. Bu makalede, bu s\u00fcreci ad\u0131m ad\u0131m nas\u0131l ger\u00e7ekle\u015ftirebilece\u011finizi, teknik detaylar\u0131 ve en iyi uygulamalar\u0131 ele alaca\u011f\u0131z. Kendi projelerinizi kolayca y\u00f6netebilece\u011finiz, g\u00fc\u00e7l\u00fc ve esnek bir yap\u0131 kurmaya haz\u0131r olun!<\/p>\n<h3>Neden Dinamik Bir Y\u00f6netim Paneli?<\/h3>\n<p>Geli\u015ftiriciler olarak portfolyolar\u0131m\u0131z, dijital kimli\u011fimizin ve yeteneklerimizin bir yans\u0131mas\u0131d\u0131r. Bu yans\u0131may\u0131 g\u00fcncel tutmak, yeni projeler eklemek veya mevcut olanlar\u0131 d\u00fczenlemek kritik \u00f6neme sahiptir.<\/p>\n<h4>Statik Portfolyolar\u0131n S\u0131n\u0131rlar\u0131<\/h4>\n<p>Statik HTML, CSS ve JavaScript dosyalar\u0131yla olu\u015fturulan portfolyolar, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve d\u00fc\u015f\u00fck maliyet gibi avantajlara sahip olsa da, i\u00e7erik y\u00f6netimi konusunda ciddi k\u0131s\u0131tlamalar sunar. Herhangi bir de\u011fi\u015fiklik yapmak istedi\u011finizde, genellikle kod dosyalar\u0131n\u0131 a\u00e7\u0131p manuel olarak d\u00fczenlemeniz, ard\u0131ndan sunucuya yeniden y\u00fcklemeniz gerekir. Bu s\u00fcre\u00e7, \u00f6zellikle teknik bilgiye sahip olmayan bir kullan\u0131c\u0131 i\u00e7in veya s\u0131k g\u00fcncellemeler yap\u0131lmas\u0131 gereken durumlarda verimsizdir.<\/p>\n<h4>Dinamik Yap\u0131n\u0131n Avantajlar\u0131<\/h4>\n<p>Dinamik bir y\u00f6netim paneli, portfolyonuzun i\u00e7eri\u011fini (projeler, blog yaz\u0131lar\u0131, yetenekler, ileti\u015fim bilgileri vb.) bir veritaban\u0131nda saklayarak, bu verilere bir kullan\u0131c\u0131 aray\u00fcz\u00fc \u00fczerinden kolayca eri\u015fmenizi ve d\u00fczenlemenizi sa\u011flar. Bu yakla\u015f\u0131m\u0131n ba\u015fl\u0131ca avantajlar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li><b>Kolay \u0130\u00e7erik Y\u00f6netimi:<\/b> Kod bilgisine ihtiya\u00e7 duymadan i\u00e7erik ekleme, d\u00fczenleme ve silme.<\/li>\n<li><b>Zaman Tasarrufu:<\/b> G\u00fcncellemeleri an\u0131nda yay\u0131nlama imkan\u0131.<\/li>\n<li><b>Esneklik:<\/b> Yeni i\u00e7erik t\u00fcrleri veya alanlar eklemek i\u00e7in kolayca geni\u015fletilebilir yap\u0131.<\/li>\n<li><b>SEO Dostu:<\/b> Dinamik i\u00e7eriklerle sitenizi s\u00fcrekli g\u00fcncel tutarak arama motoru s\u0131ralamalar\u0131n\u0131z\u0131 iyile\u015ftirme potansiyeli.<\/li>\n<\/ul>\n<h4>Hedef Kitle ve Kullan\u0131m Senaryolar\u0131<\/h4>\n<p>Bu y\u00f6netim paneli, \u00f6zellikle serbest \u00e7al\u0131\u015fan geli\u015ftiriciler, tasar\u0131mc\u0131lar veya i\u00e7erik \u00fcreticileri i\u00e7in idealdir. Kendi portfolyolar\u0131n\u0131, bloglar\u0131n\u0131 veya k\u00fc\u00e7\u00fck i\u015fletme sitelerini y\u00f6netmek isteyen herkes bu yap\u0131dan faydalanabilir. Kullan\u0131m senaryolar\u0131 aras\u0131nda yeni bir proje detay\u0131n\u0131 eklemek, mevcut bir projenin a\u00e7\u0131klamas\u0131n\u0131 g\u00fcncellemek, blog yaz\u0131lar\u0131 yazmak veya yetenek setinizi g\u00fcncel tutmak say\u0131labilir.<\/p>\n<h3>MERN Stack Se\u00e7imi ve Temel Mimari<\/h3>\n<p>MERN Stack, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler ve g\u00fc\u00e7l\u00fc bir teknolojidir. Y\u00f6netim paneli projemiz i\u00e7in neden bu stack&#8217;i tercih etti\u011fimizi ve genel mimarisini inceleyelim.<\/p>\n<h4>Neden MERN Stack?<\/h4>\n<p>MERN, MongoDB, Express.js, React ve Node.js&#8217;in ba\u015f harflerinden olu\u015fur. Bu stack&#8217;i se\u00e7memizin temel nedenleri \u015funlard\u0131r:<\/p>\n<ul>\n<li><b>JavaScript Everywhere:<\/b> T\u00fcm stack boyunca (frontend, backend, veritaban\u0131 sorgular\u0131) JavaScript kullan\u0131lmas\u0131, geli\u015ftirme s\u00fcrecini basitle\u015ftirir ve \u00f6\u011frenme e\u011frisini d\u00fc\u015f\u00fcr\u00fcr.<\/li>\n<li><b>Performans ve \u00d6l\u00e7eklenebilirlik:<\/b> Node.js&#8217;in asenkron, olay tabanl\u0131 yap\u0131s\u0131 y\u00fcksek performansl\u0131 ve \u00f6l\u00e7eklenebilir backend&#8217;ler olu\u015fturmaya olanak tan\u0131r.<\/li>\n<li><b>Modern Frontend:<\/b> React, dinamik ve interaktif kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in sekt\u00f6r standard\u0131 bir k\u00fct\u00fcphanedir.<\/li>\n<li><b>Esnek Veritaban\u0131:<\/b> MongoDB, \u015femas\u0131z (NoSQL) yap\u0131s\u0131yla h\u0131zl\u0131 geli\u015ftirme ve esnek veri modellemesi sunar.<\/li>\n<\/ul>\n<h4>Genel Mimari Tasar\u0131m\u0131<\/h4>\n<p>Y\u00f6netim paneli projemizin mimarisi \u00fc\u00e7 ana katmandan olu\u015facakt\u0131r:<\/p>\n<ol>\n<li><b>Frontend (React):<\/b> Kullan\u0131c\u0131lar\u0131n i\u00e7eriklerini y\u00f6netece\u011fi web tabanl\u0131 aray\u00fcz. Bu, portfolyo uygulamas\u0131ndan ayr\u0131 bir React uygulamas\u0131 olabilir veya ayn\u0131 monorepo i\u00e7inde y\u00f6netilebilir.<\/li>\n<li><b>Backend (Node.js &#038; Express.js):<\/b> Frontend&#8217;den gelen istekleri i\u015fleyen, veritaban\u0131 ile etkile\u015fime giren ve API endpoint&#8217;lerini sa\u011flayan sunucu taraf\u0131 uygulama.<\/li>\n<li><b>Veritaban\u0131 (MongoDB):<\/b> Portfolyo i\u00e7eri\u011fini (projeler, yaz\u0131lar, kullan\u0131c\u0131lar vb.) saklayan NoSQL veritaban\u0131.<\/li>\n<\/ol>\n<p>Bu katmanlar, RESTful API&#8217;ler arac\u0131l\u0131\u011f\u0131yla birbiriyle ileti\u015fim kurar.<\/p>\n<h4>Geli\u015ftirme Ortam\u0131n\u0131n Haz\u0131rlanmas\u0131<\/h4>\n<p>Projeye ba\u015flamadan \u00f6nce gerekli ara\u00e7lar\u0131 kurman\u0131z gerekir:<\/p>\n<ul>\n<li><b>Node.js ve npm\/Yarn:<\/b> JavaScript \u00e7al\u0131\u015fma zaman\u0131 ve paket y\u00f6neticisi.<\/li>\n<li><b>MongoDB:<\/b> Yerel bir kurulum veya MongoDB Atlas gibi bulut tabanl\u0131 bir hizmet.<\/li>\n<li><b>Kod D\u00fczenleyici:<\/b> VS Code gibi bir IDE.<\/li>\n<li><b>Postman\/Insomnia:<\/b> API testleri i\u00e7in.<\/li>\n<\/ul>\n<p>\u0130lk olarak, projeniz i\u00e7in bir klas\u00f6r olu\u015fturun ve <code>npm init -y<\/code> ile <code>package.json<\/code> dosyas\u0131n\u0131 ba\u015flat\u0131n. Ard\u0131ndan, backend ve frontend i\u00e7in ayr\u0131 klas\u00f6rler olu\u015fturarak her birini kendi <code>package.json<\/code> dosyalar\u0131yla ba\u015flat\u0131n.<\/p>\n<h3>Backend Geli\u015ftirme: API ve Veritaban\u0131<\/h3>\n<p>Y\u00f6netim panelinin kalbi, veritaban\u0131 ile etkile\u015fim kuran ve frontend&#8217;e veri sa\u011flayan backend&#8217;dir. Node.js ve Express.js ile RESTful API&#8217;ler olu\u015fturaca\u011f\u0131z.<\/p>\n<h4>MongoDB ile Veri Modelleri<\/h4>\n<p>MongoDB, verileri esnek JSON benzeri belgeler (documents) olarak saklar. Mongoose ORM (Object Data Modeling) k\u00fct\u00fcphanesi, Node.js uygulamalar\u0131nda MongoDB ile \u00e7al\u0131\u015fmay\u0131 kolayla\u015ft\u0131r\u0131r. Projeler, yetenekler ve kullan\u0131c\u0131lar i\u00e7in modeller tan\u0131mlayaca\u011f\u0131z.<\/p>\n<pre><code class=\"language-javascript\">\/\/ models\/Project.js\nconst mongoose = require('mongoose');\n\nconst projectSchema = new mongoose.Schema({\n    title: { type: String, required: true },\n    description: { type: String, required: true },\n    imageUrl: { type: String },\n    githubUrl: { type: String },\n    liveUrl: { type: String },\n    technologies: [{ type: String }],\n    createdAt: { type: Date, default: Date.now }\n});\n\nmodule.exports = mongoose.model('Project', projectSchema);<\/pre>\n<p><\/code><br \/>\nBenzer \u015fekilde <code>Skill<\/code> ve <code>User<\/code> modelleri de olu\u015fturulabilir.<\/p>\n<h4>Express.js ile RESTful API Olu\u015fturma<\/h4>\n<p>Express.js, Node.js i\u00e7in minimalist bir web \u00e7er\u00e7evesidir. API endpoint'lerini tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. <code>app.js<\/code> veya <code>server.js<\/code> dosyan\u0131zda Express uygulamas\u0131n\u0131 ba\u015flat\u0131r\u0131z:<\/p>\n<pre><code class=\"language-javascript\">\/\/ server.js\nconst express = require('express');\nconst mongoose = require('mongoose');\nconst dotenv = require('dotenv');\nconst cors = require('cors'); \/\/ Frontend ile ileti\u015fim i\u00e7in\n\ndotenv.config();\nconst app = express();\n\n\/\/ Middleware'ler\napp.use(express.json()); \/\/ JSON body parse etmek i\u00e7in\napp.use(cors()); \/\/ CORS politikalar\u0131n\u0131 y\u00f6netmek i\u00e7in\n\n\/\/ Veritaban\u0131 ba\u011flant\u0131s\u0131\nmongoose.connect(process.env.MONGO_URI, {\n    useNewUrlParser: true,\n    useUnifiedTopology: true\n})\n.then(() => console.log('MongoDB Connected'))\n.catch(err => console.error(err));\n\n\/\/ Rota tan\u0131mlamalar\u0131\nconst projectRoutes = require('.\/routes\/projects');\napp.use('\/api\/projects', projectRoutes);\n\nconst PORT = process.env.PORT || 5000;\napp.listen(PORT, () => console.log(<code>Server running on port ${PORT}<\/code>));<\/pre>\n<p><\/code><\/p>\n<h4>CRUD Operasyonlar\u0131 ve Router Yap\u0131s\u0131<\/h4>\n<p>Her model i\u00e7in (\u00f6rn. <code>Project<\/code>), temel CRUD (Create, Read, Update, Delete) operasyonlar\u0131n\u0131 ger\u00e7ekle\u015ftiren rotalar tan\u0131mlayaca\u011f\u0131z. Express Router, rotalar\u0131 d\u00fczenli tutmak i\u00e7in harika bir yoldur.<\/p>\n<pre><code class=\"language-javascript\">\/\/ routes\/projects.js\nconst express = require('express');\nconst router = express.Router();\nconst Project = require('..\/models\/Project');\nconst auth = require('..\/middleware\/auth'); \/\/ Kimlik do\u011frulama middleware'i\n\n\/\/ Yeni proje olu\u015fturma (POST)\nrouter.post('\/', auth, async (req, res) => {\n    try {\n        const newProject = new Project(req.body);\n        const project = await newProject.save();\n        res.status(201).json(project);\n    } catch (err) {\n        res.status(400).json({ message: err.message });\n    }\n});\n\n\/\/ T\u00fcm projeleri getirme (GET)\nrouter.get('\/', async (req, res) => {\n    try {\n        const projects = await Project.find();\n        res.json(projects);\n    } catch (err) {\n        res.status(500).json({ message: err.message });\n    }\n});\n\n\/\/ Belirli bir projeyi getirme (GET by ID)\nrouter.get('\/:id', async (req, res) => {\n    try {\n        const project = await Project.findById(req.params.id);\n        if (!project) return res.status(404).json({ message: 'Project not found' });\n        res.json(project);\n    } catch (err) {\n        res.status(500).json({ message: err.message });\n    }\n});\n\n\/\/ Projeyi g\u00fcncelleme (PUT)\nrouter.put('\/:id', auth, async (req, res) => {\n    try {\n        const project = await Project.findByIdAndUpdate(req.params.id, req.body, { new: true });\n        if (!project) return res.status(404).json({ message: 'Project not found' });\n        res.json(project);\n    } catch (err) {\n        res.status(400).json({ message: err.message });\n    }\n});\n\n\/\/ Projeyi silme (DELETE)\nrouter.delete('\/:id', auth, async (req, res) => {\n    try {\n        const project = await Project.findByIdAndDelete(req.params.id);\n        if (!project) return res.status(404).json({ message: 'Project not found' });\n        res.json({ message: 'Project deleted' });\n    } catch (err) {\n        res.status(500).json({ message: err.message });\n    }\n});\n\nmodule.exports = router;<\/pre>\n<p><\/code><\/p>\n<h4>API G\u00fcvenli\u011fi ve Do\u011frulama<\/h4>\n<p>API'lerinizi korumak i\u00e7in kimlik do\u011frulama (authentication) ve yetkilendirme (authorization) mekanizmalar\u0131 eklemelisiniz. Genellikle JWT (JSON Web Tokens) kullan\u0131l\u0131r. Kullan\u0131c\u0131 kay\u0131t ve giri\u015f rotalar\u0131 olu\u015fturulur, ard\u0131ndan korumal\u0131 rotalara eri\u015fim i\u00e7in bir middleware kullan\u0131l\u0131r.<\/p>\n<h3>Frontend Geli\u015ftirme: React ile Y\u00f6netim Paneli<\/h3>\n<p>Y\u00f6netim panelinin kullan\u0131c\u0131 aray\u00fcz\u00fc, React ile geli\u015ftirilecektir. Bu b\u00f6l\u00fcm, kullan\u0131c\u0131lar\u0131n backend API'leriyle etkile\u015fim kurmas\u0131n\u0131 sa\u011flayacak g\u00f6rsel bir aray\u00fcz olu\u015fturmaya odaklan\u0131r.<\/p>\n<h4>React Uygulamas\u0131n\u0131n Temelleri<\/h4>\n<p><code>create-react-app<\/code> veya Vite gibi ara\u00e7larla h\u0131zl\u0131ca bir React projesi ba\u015flatabilirsiniz. Uygulama, kullan\u0131c\u0131n\u0131n projeleri, yetenekleri ve di\u011fer i\u00e7erikleri listeleyebilece\u011fi, d\u00fczenleyebilece\u011fi ve yeni \u00f6\u011feler ekleyebilece\u011fi sayfalar i\u00e7erecektir. React Router DOM, sayfalar aras\u0131 ge\u00e7i\u015fi y\u00f6netmek i\u00e7in kullan\u0131lacakt\u0131r.<\/p>\n<h4>Bile\u015fen Yap\u0131s\u0131 ve Durum Y\u00f6netimi (State Management)<\/h4>\n<p>React, bile\u015fen tabanl\u0131 bir yap\u0131ya sahiptir. Y\u00f6netim paneliniz i\u00e7in a\u015fa\u011f\u0131daki gibi bile\u015fenler d\u00fc\u015f\u00fcnebilirsiniz:<\/p>\n<ul>\n<li><code>Dashboard<\/code>: Genel bak\u0131\u015f sayfas\u0131.<\/li>\n<li><code>ProjectList<\/code>: T\u00fcm projeleri listeleyen sayfa.<\/li>\n<li><code>ProjectForm<\/code>: Yeni proje ekleme veya mevcut projeyi d\u00fczenleme formu.<\/li>\n<li><code>SkillList<\/code>, <code>SkillForm<\/code>, <code>UserList<\/code>, <code>UserForm<\/code> vb.<\/li>\n<\/ul>\n<p>Durum y\u00f6netimi i\u00e7in React'\u0131n kendi <code>useState<\/code> ve <code>useContext<\/code> hook'lar\u0131 yeterli olabilir. Daha karma\u015f\u0131k uygulamalar i\u00e7in Redux veya Zustand gibi k\u00fct\u00fcphaneler d\u00fc\u015f\u00fcn\u00fclebilir.<\/p>\n<h4>API Entegrasyonu ve Veri G\u00f6sterimi<\/h4>\n<p>Frontend, <code>axios<\/code> gibi bir HTTP istemcisi kullanarak backend API'leriyle ileti\u015fim kurar. \u00d6rne\u011fin, projeleri listelemek i\u00e7in <code>useEffect<\/code> hook'u i\u00e7inde bir <code>GET<\/code> iste\u011fi yap\u0131l\u0131r:<\/p>\n<pre><code class=\"language-javascript\">\/\/ components\/ProjectList.js\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nconst ProjectList = () => {\n    const [projects, setProjects] = useState([]);\n\n    useEffect(() => {\n        const fetchProjects = async () => {\n            try {\n                const res = await axios.get('http:\/\/localhost:5000\/api\/projects');\n                setProjects(res.data);\n            } catch (err) {\n                console.error(err);\n            }\n        };\n        fetchProjects();\n    }, []);\n\n    const handleDelete = async (id) => {\n        try {\n            await axios.delete(<code>http:\/\/localhost:5000\/api\/projects\/${id}<\/code>, {\n                headers: { 'x-auth-token': localStorage.getItem('token') }\n            });\n            setProjects(projects.filter(project => project._id !== id));\n        } catch (err) {\n            console.error(err);\n        }\n    };\n\n    return (\n        <div>\n            <h3>Projeler<\/h3>\n            <ul>\n                {projects.map(project => (\n                    <li key={project._id}>\n                        {project.title} - <button onClick={() => handleDelete(project._id)}>Sil<\/button>\n                        {\/* D\u00fczenleme linki veya butonu *\/}\n                    <\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n};\n\nexport default ProjectList;<\/pre>\n<p><\/code><\/p>\n<h4>Kullan\u0131c\u0131 Aray\u00fcz\u00fc Tasar\u0131m\u0131 ve K\u00fct\u00fcphaneler<\/h4>\n<p>Y\u00f6netim panelinin kullan\u0131c\u0131 dostu ve estetik olmas\u0131 \u00f6nemlidir. Ant Design, Material-UI veya Chakra UI gibi UI k\u00fct\u00fcphaneleri, haz\u0131r bile\u015fenler sunarak geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve tutarl\u0131 bir tasar\u0131m sa\u011flar. Bu k\u00fct\u00fcphaneler, tablolar, formlar, butonlar ve navigasyon men\u00fcleri gibi bir\u00e7ok bile\u015feni kolayca entegre etmenize olanak tan\u0131r.<\/p>\n<h3>Kimlik Do\u011frulama ve Yetkilendirme<\/h3>\n<p>Y\u00f6netim paneli, hassas verileri i\u00e7erdi\u011fi i\u00e7in g\u00fc\u00e7l\u00fc bir kimlik do\u011frulama ve yetkilendirme sistemine sahip olmal\u0131d\u0131r.<\/p>\n<h4>JWT (JSON Web Tokens) Kullan\u0131m\u0131<\/h4>\n<p>JWT, kullan\u0131c\u0131 kimli\u011fini do\u011frulamak ve yetkilendirmek i\u00e7in end\u00fcstri standard\u0131 bir y\u00f6ntemdir. Kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, sunucu bir JWT olu\u015fturur ve bunu istemciye g\u00f6nderir. \u0130stemci (frontend), bu token'\u0131 sonraki t\u00fcm korumal\u0131 API isteklerinde <code>Authorization<\/code> ba\u015fl\u0131\u011f\u0131nda g\u00f6nderir. Sunucu, her istekte token'\u0131 do\u011frulayarak kullan\u0131c\u0131n\u0131n yetkilerini kontrol eder.<\/p>\n<h4>Kullan\u0131c\u0131 Kayd\u0131 ve Giri\u015fi<\/h4>\n<p>Backend'de, kullan\u0131c\u0131lar\u0131n e-posta ve \u015fifre ile kay\u0131t olabilece\u011fi ve giri\u015f yapabilece\u011fi rotalar olu\u015fturulur. Giri\u015f ba\u015far\u0131l\u0131 oldu\u011funda, sunucu bir JWT olu\u015fturup yan\u0131t olarak g\u00f6nderir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ routes\/auth.js (\u00f6rnek)\nconst express = require('express');\nconst router = express.Router();\nconst User = require('..\/models\/User');\nconst bcrypt = require('bcryptjs');\nconst jwt = require('jsonwebtoken');\n\n\/\/ Kullan\u0131c\u0131 kayd\u0131\nrouter.post('\/register', async (req, res) => { \/* ... *\/ });\n\n\/\/ Kullan\u0131c\u0131 giri\u015fi\nrouter.post('\/login', async (req, res) => {\n    const { email, password } = req.body;\n    try {\n        let user = await User.findOne({ email });\n        if (!user) return res.status(400).json({ message: 'Invalid Credentials' });\n\n        const isMatch = await bcrypt.compare(password, user.password);\n        if (!isMatch) return res.status(400).json({ message: 'Invalid Credentials' });\n\n        const payload = { user: { id: user.id } };\n        jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' }, (err, token) => {\n            if (err) throw err;\n            res.json({ token });\n        });\n    } catch (err) {\n        console.error(err.message);\n        res.status(500).send('Server Error');\n    }\n});<\/pre>\n<p><\/code><\/p>\n<h4>Middleware ile Rota Korumas\u0131<\/h4>\n<p>Backend'de, korumal\u0131 rotalara eri\u015fimi kontrol etmek i\u00e7in bir middleware fonksiyonu kullan\u0131l\u0131r. Bu middleware, gelen iste\u011fin <code>Authorization<\/code> ba\u015fl\u0131\u011f\u0131nda ge\u00e7erli bir JWT olup olmad\u0131\u011f\u0131n\u0131 kontrol eder.<\/p>\n<pre><code class=\"language-javascript\">\/\/ middleware\/auth.js\nconst jwt = require('jsonwebtoken');\n\nmodule.exports = function(req, res, next) {\n    const token = req.header('x-auth-token');\n    if (!token) {\n        return res.status(401).json({ message: 'No token, authorization denied' });\n    }\n    try {\n        const decoded = jwt.verify(token, process.env.JWT_SECRET);\n        req.user = decoded.user;\n        next();\n    } catch (err) {\n        res.status(401).json({ message: 'Token is not valid' });\n    }\n};<\/pre>\n<p><\/code><br \/>\nBu <code>auth<\/code> middleware'i, yukar\u0131daki <code>routes\/projects.js<\/code> dosyas\u0131nda <code>router.post('\/', auth, ...)<\/code> gibi kullan\u0131larak rotalar\u0131n korunmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>Dosya Y\u00fckleme ve Medya Y\u00f6netimi<\/h3>\n<p>Portfolyo projeleriniz i\u00e7in resimler veya di\u011fer medya dosyalar\u0131 y\u00fcklemek, dinamik bir panelin \u00f6nemli bir \u00f6zelli\u011fidir.<\/p>\n<h4>Multer ile Sunucu Taraf\u0131nda Dosya Y\u00fckleme<\/h4>\n<p>Node.js'te dosya y\u00fcklemeyi y\u00f6netmek i\u00e7in <code>multer<\/code> k\u00fct\u00fcphanesi olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. Multer, gelen form verilerini i\u015fleyerek dosyalar\u0131 sunucuya kaydetmenizi sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ routes\/upload.js\nconst express = require('express');\nconst router = express.Router();\nconst multer = require('multer');\nconst path = require('path');\n\n\/\/ Dosya depolama ayarlar\u0131\nconst storage = multer.diskStorage({\n    destination: '.\/uploads\/',\n    filename: function(req, file, cb) {\n        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));\n    }\n});\n\nconst upload = multer({ storage: storage });\n\n\/\/ Tek dosya y\u00fckleme rotas\u0131\nrouter.post('\/', upload.single('image'), (req, res) => {\n    if (!req.file) {\n        return res.status(400).send('No file uploaded.');\n    }\n    res.json({ filePath: <code>\/uploads\/${req.file.filename}<\/code> });\n});\n\nmodule.exports = router;<\/pre>\n<p><\/code><br \/>\nBu rotay\u0131 ana <code>server.js<\/code> dosyan\u0131za <code>app.use('\/api\/upload', uploadRoutes);<\/code> \u015feklinde ekleyebilirsiniz. Frontend'den bir dosya y\u00fcklendi\u011finde, sunucuya kaydedilir ve dosyan\u0131n yolu (URL) geri d\u00f6nd\u00fcr\u00fcl\u00fcr.<\/p>\n<h4>Cloudinary veya AWS S3 Entegrasyonu (Opsiyonel)<\/h4>\n<p>\u00dcretim ortam\u0131nda, dosyalar\u0131 sunucunuzda saklamak yerine Cloudinary, AWS S3 veya Google Cloud Storage gibi bulut depolama hizmetlerini kullanmak daha iyi bir yakla\u015f\u0131md\u0131r. Bu hizmetler, \u00f6l\u00e7eklenebilirlik, yedekleme ve CDN (Content Delivery Network) entegrasyonu gibi avantajlar sunar. Multer ile dosyay\u0131 buluta y\u00fcklemek i\u00e7in ilgili SDK'lar\u0131 kullanabilirsiniz.<\/p>\n<h4>Frontend'den Dosya Y\u00fckleme Aray\u00fcz\u00fc<\/h4>\n<p>React taraf\u0131nda, bir <code><input type=\"file\" \/><\/code> etiketi kullanarak dosya se\u00e7me ve <code>axios<\/code> ile backend'e <code>FormData<\/code> objesi olarak g\u00f6nderme i\u015flemi yap\u0131l\u0131r.<\/p>\n<pre><code class=\"language-javascript\">\/\/ components\/ImageUpload.js\nimport React, { useState } from 'react';\nimport axios from 'axios';\n\nconst ImageUpload = ({ onImageUpload }) => {\n    const [selectedFile, setSelectedFile] = useState(null);\n\n    const handleFileChange = (e) => {\n        setSelectedFile(e.target.files[0]);\n    };\n\n    const handleUpload = async () => {\n        if (!selectedFile) return;\n\n        const formData = new FormData();\n        formData.append('image', selectedFile);\n\n        try {\n            const res = await axios.post('http:\/\/localhost:5000\/api\/upload', formData, {\n                headers: {\n                    'Content-Type': 'multipart\/form-data',\n                    'x-auth-token': localStorage.getItem('token') \/\/ E\u011fer korumal\u0131 ise\n                }\n            });\n            onImageUpload(res.data.filePath); \/\/ Y\u00fcklenen dosyan\u0131n yolunu \u00fcst bile\u015fene ilet\n        } catch (err) {\n            console.error('Dosya y\u00fcklenirken hata olu\u015ftu:', err);\n        }\n    };\n\n    return (\n        <div>\n            <input type=\"file\" onChange={handleFileChange} \/>\n            <button onClick={handleUpload}>Resim Y\u00fckle<\/button>\n        <\/div>\n    );\n};\n\nexport default ImageUpload;<\/pre>\n<p><\/code><\/p>\n<h3>Da\u011f\u0131t\u0131m ve Optimizasyon<\/h3>\n<p>Uygulaman\u0131z\u0131 geli\u015ftirdikten sonra, onu canl\u0131ya almak ve performans\u0131n\u0131 optimize etmek \u00f6nemlidir.<\/p>\n<h4>Backend Da\u011f\u0131t\u0131m\u0131 (\u00f6rn. Heroku, Vercel, DigitalOcean)<\/h4>\n<p>Node.js backend'inizi da\u011f\u0131tmak i\u00e7in bir\u00e7ok se\u00e7enek mevcuttur:<\/p>\n<ul>\n<li><b>Heroku:<\/b> Basit ve h\u0131zl\u0131 da\u011f\u0131t\u0131m i\u00e7in idealdir, ancak \u00fccretsiz katman\u0131nda k\u0131s\u0131tlamalar olabilir.<\/li>\n<li><b>Vercel\/Netlify:<\/b> Genellikle frontend i\u00e7in kullan\u0131lsa da, sunucusuz fonksiyonlarla (serverless functions) backend i\u015flevlerini de bar\u0131nd\u0131rabilir.<\/li>\n<li><b>DigitalOcean\/AWS EC2:<\/b> Daha fazla kontrol ve esneklik sunar, ancak sunucu y\u00f6netimi gerektirir.<\/li>\n<li><b>Render.com:<\/b> Hem frontend hem de backend i\u00e7in modern ve kolay bir da\u011f\u0131t\u0131m platformu.<\/li>\n<\/ul>\n<p>Da\u011f\u0131t\u0131m yaparken <code>process.env<\/code> de\u011fi\u015fkenlerini do\u011fru \u015fekilde ayarlad\u0131\u011f\u0131n\u0131zdan (veritaban\u0131 URI'si, JWT secret vb.) emin olun.<\/p>\n<h4>Frontend Da\u011f\u0131t\u0131m\u0131 (\u00f6rn. Netlify, Vercel)<\/h4>\n<p>React uygulaman\u0131z\u0131 da\u011f\u0131tmak \u00e7ok daha basittir:<\/p>\n<ul>\n<li><b>Netlify:<\/b> Git deposuyla entegrasyonu sayesinde otomatik da\u011f\u0131t\u0131m ve CDN deste\u011fi sunar.<\/li>\n<li><b>Vercel:<\/b> Netlify'a benzer \u00f6zellikler sunar ve React uygulamalar\u0131 i\u00e7in optimize edilmi\u015ftir.<\/li>\n<li><b>GitHub Pages:<\/b> Basit statik siteler i\u00e7in kullan\u0131labilir, ancak daha az \u00f6zellik sunar.<\/li>\n<\/ul>\n<p>Frontend uygulaman\u0131z\u0131 da\u011f\u0131tmadan \u00f6nce <code>npm run build<\/code> komutuyla \u00fcretim i\u00e7in optimize edilmi\u015f bir yap\u0131 (build) olu\u015fturmay\u0131 unutmay\u0131n.<\/p>\n<h4>Performans Optimizasyonlar\u0131<\/h4>\n<p>Hem backend hem de frontend i\u00e7in performans\u0131 art\u0131rmak \u00f6nemlidir:<\/p>\n<ul>\n<li><b>Backend:<\/b>\n<ul>\n<li>Veritaban\u0131 indeksleri olu\u015fturma.<\/li>\n<li>API yan\u0131tlar\u0131n\u0131 \u00f6nbelle\u011fe alma (caching).<\/li>\n<li>Gereksiz sorgulardan ka\u00e7\u0131nma.<\/li>\n<li>S\u0131k\u0131\u015ft\u0131rma (compression) middleware'i kullanma.<\/li>\n<\/ul>\n<\/li>\n<li><b>Frontend:<\/b>\n<ul>\n<li>Kod b\u00f6lme (code splitting) ile ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini azaltma.<\/li>\n<li>Resimleri optimize etme ve lazy loading uygulama.<\/li>\n<li>Gereksiz yeniden render'lardan ka\u00e7\u0131nmak i\u00e7in <code>React.memo<\/code>, <code>useCallback<\/code>, <code>useMemo<\/code> kullanma.<\/li>\n<li>CDN kullan\u0131m\u0131.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Sonu\u00e7<\/h3>\n<p>Kendi MERN Stack portfolyonuz i\u00e7in dinamik bir y\u00f6netim paneli olu\u015fturmak, ba\u015flang\u0131\u00e7ta g\u00f6z korkutucu g\u00f6r\u00fcnse de, ad\u0131m ad\u0131m ilerledi\u011finizde olduk\u00e7a \u00f6d\u00fcllendirici bir s\u00fcre\u00e7tir. Bu rehberde, bir y\u00f6netim panelinin neden gerekli oldu\u011fundan, MERN Stack'in temel mimarisine, backend ve frontend geli\u015ftirme s\u00fcre\u00e7lerine, kimlik do\u011frulama, dosya y\u00fckleme ve da\u011f\u0131t\u0131m konular\u0131na kadar bir\u00e7ok \u00f6nemli detay\u0131 ele ald\u0131k. Art\u0131k portfolyonuzun i\u00e7eri\u011fini kolayca g\u00fcncelleyebilir, yeni projelerinizi an\u0131nda yay\u0131nlayabilir ve dijital varl\u0131\u011f\u0131n\u0131z\u0131 daha etkin bir \u015fekilde y\u00f6netebilirsiniz. Bu, sadece bir proje de\u011fil, ayn\u0131 zamanda MERN Stack becerilerinizi peki\u015ftirmek i\u00e7in harika bir \u00f6\u011frenme deneyimidir. Kendi panelinizi in\u015fa etme yolculu\u011funuzda ba\u015far\u0131lar dilerim!<\/p>\n<h3>SSS (S\u0131k Sorulan Sorular)<\/h3>\n<h4>1. MERN Stack d\u0131\u015f\u0131nda ba\u015fka hangi teknolojilerle dinamik panel olu\u015fturabilirim?<\/h4>\n<p>Elbette. \u00d6rne\u011fin, MEVN (MongoDB, Express, Vue, Node) veya MEAN (MongoDB, Express, Angular, Node) stack'lerini kullanabilirsiniz. Python ile Django\/Flask, PHP ile Laravel veya Ruby ile Ruby on Rails gibi farkl\u0131 backend \u00e7er\u00e7eveleri ve veritaban\u0131 se\u00e7enekleri de mevcuttur.<\/p>\n<h4>2. Y\u00f6netim panelini portfolyo sitesiyle ayn\u0131 projede mi tutmal\u0131y\u0131m, yoksa ayr\u0131 m\u0131 olmal\u0131?<\/h4>\n<p>Genellikle ayr\u0131 projeler olarak tutmak daha iyi bir yakla\u015f\u0131md\u0131r. Portfolyo frontend'iniz genellikle herkese a\u00e7\u0131k ve statik veya sunucu taraf\u0131nda render edilmi\u015f olabilirken, y\u00f6netim paneli frontend'iniz sadece sizin eri\u015febilece\u011finiz, kimlik do\u011frulamas\u0131 gerektiren bir uygulama olacakt\u0131r. Backend API'si ise her iki frontend'e de hizmet verebilir.<\/p>\n<h4>3. G\u00fcvenlik i\u00e7in ba\u015fka neler yapabilirim?<\/h4>\n<p>Kimlik do\u011frulama ve yetkilendirmenin yan\u0131 s\u0131ra, API'lerinizi DDoS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 korumak i\u00e7in rate limiting (istek s\u0131n\u0131rlamas\u0131) uygulayabilir, XSS (Cross-Site Scripting) ve CSRF (Cross-Site Request Forgery) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 \u00f6nlemler alabilir, veritaban\u0131 sorgular\u0131n\u0131zda SQL Injection benzeri zafiyetlere dikkat edebilir ve d\u00fczenli g\u00fcvenlik g\u00fcncellemeleri yapabilirsiniz.<\/p>\n<h4>4. Veritaban\u0131 olarak neden MongoDB se\u00e7tik? Ba\u015fka bir NoSQL veya SQL veritaban\u0131 kullanabilir miyim?<\/h4>\n<p>MongoDB, MERN Stack'in do\u011fal bir par\u00e7as\u0131d\u0131r ve esnek, \u015femas\u0131z yap\u0131s\u0131 sayesinde h\u0131zl\u0131 prototipleme ve kolay veri modellemesi sunar. Ancak PostgreSQL (SQL), Cassandra (NoSQL) veya Redis (bellek i\u00e7i NoSQL) gibi farkl\u0131 veritabanlar\u0131n\u0131 da kullanabilirsiniz. Se\u00e7iminiz, projenizin \u00f6zel gereksinimlerine ve veri yap\u0131s\u0131na ba\u011fl\u0131 olacakt\u0131r.<\/p>\n<h4>5. Y\u00f6netim panelini mobil uyumlu hale getirmek i\u00e7in ne yapmal\u0131y\u0131m?<\/h4>\n<p>React uygulaman\u0131z\u0131 geli\u015ftirirken duyarl\u0131 (responsive)<\/p>\n","protected":false},"excerpt":{"rendered":"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi\nStatik HTML sayfalar\u0131yla olu\u015fturulmu\u015f bir portfolyo, ba\u015flang\u0131\u00e7 i\u00e7in harika &#8230;","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-37101","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 Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi\" \/>\n<meta property=\"og:description\" content=\"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi Statik HTML sayfalar\u0131yla olu\u015fturulmu\u015f bir portfolyo, ba\u015flang\u0131\u00e7 i\u00e7in harika ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-27T09:00:47+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi\",\"datePublished\":\"2025-12-27T09:00:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/\"},\"wordCount\":2363,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/\",\"name\":\"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-27T09:00:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi\"}]},{\"@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 Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi","og_description":"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi Statik HTML sayfalar\u0131yla olu\u015fturulmu\u015f bir portfolyo, ba\u015flang\u0131\u00e7 i\u00e7in harika ...","og_url":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-27T09:00:47+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi","datePublished":"2025-12-27T09:00:47+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/"},"wordCount":2363,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/","name":"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-27T09:00:47+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/mern-stack-portfolyonuza-dinamik-bir-yonetim-paneli-entegre-etme-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"MERN Stack Portfolyonuza Dinamik Bir Y\u00f6netim Paneli Entegre Etme Rehberi"}]},{"@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\/37101","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=37101"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37101\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}