{"id":38582,"date":"2026-02-03T13:30:48","date_gmt":"2026-02-03T10:30:48","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/"},"modified":"2026-02-03T13:30:48","modified_gmt":"2026-02-03T10:30:48","slug":"full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/","title":{"rendered":"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0"},"content":{"rendered":"<h2>Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0<\/h2>\n<p>G\u00fcn\u00fcm\u00fcz d\u00fcnyas\u0131nda ki\u015fisel finans y\u00f6netimi, bireylerin ekonomik hedeflerine ula\u015fmas\u0131nda kritik bir rol oynamaktad\u0131r. Piyasada bir\u00e7ok finans takip uygulamas\u0131 bulunsa da, \u00e7o\u011fu zaman belirli \u00f6zellik setleriyle s\u0131n\u0131rl\u0131 kalmakta veya ki\u015fisel ihtiya\u00e7lara tam olarak yan\u0131t verememektedir. Bu durum, kendi finansal verilerim \u00fczerinde tam kontrol sahibi olma ve tamamen ki\u015fiselle\u015ftirilmi\u015f bir deneyim yaratma arzumu tetikledi. Bu makalede, bir MERN (MongoDB, Express.js, React, Node.js) y\u0131\u011f\u0131n\u0131 kullanarak s\u0131f\u0131rdan bir finans takip uygulamas\u0131 geli\u015ftirme yolculu\u011fumu, bu s\u00fcre\u00e7te kar\u015f\u0131la\u015ft\u0131\u011f\u0131m ger\u00e7ek problemleri ve onlara buldu\u011fum pratik \u00e7\u00f6z\u00fcmleri detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131m.<\/p>\n<h3>1. Proje Fikri ve MERN Stack Se\u00e7imi<\/h3>\n<p>Her b\u00fcy\u00fck projenin temelinde g\u00fc\u00e7l\u00fc bir fikir yatar. Benim i\u00e7in bu fikir, gelirlerimi, giderlerimi ve birikimlerimi tek bir yerden, kolayca takip edebilece\u011fim, g\u00f6rsel raporlarla desteklenmi\u015f, tamamen bana \u00f6zel bir platform yaratmakt\u0131. Mevcut uygulamalar\u0131n abonelik modelleri, veri gizlili\u011fi endi\u015feleri veya aray\u00fcz k\u0131s\u0131tlamalar\u0131 beni kendi \u00e7\u00f6z\u00fcm\u00fcm\u00fc geli\u015ftirmeye itti.<\/p>\n<h4>1.1. Neden Kendi Uygulamam?<\/h4>\n<p>Piyasada Mint, YNAB gibi g\u00fc\u00e7l\u00fc finans uygulamalar\u0131 mevcut. Ancak bu uygulamalar\u0131n \u00e7o\u011fu, belirli bir co\u011frafyaya veya bankac\u0131l\u0131k sistemine odaklanm\u0131\u015f durumda. Ayr\u0131ca, verilerimin \u00fc\u00e7\u00fcnc\u00fc taraf bir \u015firketin sunucular\u0131nda tutulmas\u0131, benim i\u00e7in her zaman bir soru i\u015faretiydi. Kendi uygulamam\u0131 geli\u015ftirerek, verilerimin nerede ve nas\u0131l sakland\u0131\u011f\u0131 \u00fczerinde tam kontrol sahibi olabiliyor, istedi\u011fim \u00f6zellikleri ekleyip \u00e7\u0131karabiliyor ve tamamen ki\u015fiselle\u015ftirilmi\u015f bir kullan\u0131c\u0131 deneyimi sunabiliyordum. Bu, sadece bir finans takip arac\u0131 de\u011fil, ayn\u0131 zamanda yaz\u0131l\u0131m geli\u015ftirme becerilerimi derinle\u015ftirece\u011fim bir \u00f6\u011frenme projesi olacakt\u0131.<\/p>\n<h4>1.2. MERN Stack Neden \u0130deal Bir Se\u00e7im?<\/h4>\n<p>MERN stack, modern full-stack web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler ve g\u00fc\u00e7l\u00fc bir se\u00e7imdir. Tamamen JavaScript tabanl\u0131 olmas\u0131, hem frontend hem de backend geli\u015ftirme i\u00e7in tek bir dil bilmenin getirdi\u011fi kolayl\u0131\u011f\u0131 sunar. Bu, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve ba\u011flam ge\u00e7i\u015flerini azalt\u0131r.<\/p>\n<ul>\n<li><strong>MongoDB:<\/strong> Esnek, belge tabanl\u0131 bir NoSQL veritaban\u0131. Finansal i\u015flemler gibi dinamik ve de\u011fi\u015fen veri yap\u0131lar\u0131 i\u00e7in m\u00fckemmeldir. \u015eema esnekli\u011fi, h\u0131zl\u0131 prototipleme imkan\u0131 sunar.<\/li>\n<li><strong>Express.js:<\/strong> Node.js \u00fczerinde \u00e7al\u0131\u015fan minimalist ve esnek bir web uygulama \u00e7at\u0131s\u0131. API endpoint&#8217;leri olu\u015fturmak ve sunucu taraf\u0131 mant\u0131\u011f\u0131n\u0131 y\u00f6netmek i\u00e7in idealdir.<\/li>\n<li><strong>React:<\/strong> Kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in bildirimsel ve bile\u015fen tabanl\u0131 bir JavaScript k\u00fct\u00fcphanesi. Dinamik ve etkile\u015fimli finansal panolar olu\u015fturmak i\u00e7in harikad\u0131r.<\/li>\n<li><strong>Node.js:<\/strong> Sunucu taraf\u0131 JavaScript \u00e7al\u0131\u015fma zaman\u0131. \u00d6l\u00e7eklenebilir a\u011f uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n<p>Bu bile\u015fenlerin bir araya gelmesi, h\u0131zl\u0131, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay bir finans takip uygulamas\u0131 olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir temel sa\u011flar.<\/p>\n<h4>1.3. Projenin Temel \u00d6zellikleri<\/h4>\n<p>Uygulamam\u0131n temel \u00f6zellikleri \u015funlar\u0131 i\u00e7erecekti:<\/p>\n<ul>\n<li><strong>Gelir ve Gider Takibi:<\/strong> Kullan\u0131c\u0131lar\u0131n t\u00fcm finansal i\u015flemlerini (gelir, gider, transfer) kolayca kaydetmesi.<\/li>\n<li><strong>Kategori Y\u00f6netimi:<\/strong> \u0130\u015flemleri kategorize etme (yemek, ula\u015f\u0131m, faturalar vb.) ve \u00f6zel kategoriler olu\u015fturma.<\/li>\n<li><strong>B\u00fct\u00e7eleme:<\/strong> Belirli kategoriler veya d\u00f6nemler i\u00e7in b\u00fct\u00e7eler belirleme ve harcamalar\u0131 takip etme.<\/li>\n<li><strong>G\u00f6rsel Raporlar:<\/strong> Pasta grafikleri, \u00e7ubuk grafikler ve \u00e7izgi grafikler arac\u0131l\u0131\u011f\u0131yla finansal durumu g\u00f6rselle\u015ftirme.<\/li>\n<li><strong>Kullan\u0131c\u0131 Kimlik Do\u011frulama:<\/strong> G\u00fcvenli kay\u0131t ve giri\u015f sistemi.<\/li>\n<\/ul>\n<h3>2. Backend Geli\u015ftirme: API ve Veritaban\u0131 Y\u00f6netimi<\/h3>\n<p>Uygulaman\u0131n beyni olan backend, verilerin g\u00fcvenli bir \u015fekilde depolanmas\u0131n\u0131, i\u015flenmesini ve frontend&#8217;e sunulmas\u0131n\u0131 sa\u011flar. Express.js ve MongoDB ile bu katman\u0131 in\u015fa ettim.<\/p>\n<h4>2.1. Veritaban\u0131 Modelleri ve \u0130li\u015fkiler<\/h4>\n<p>MongoDB, \u015femas\u0131z bir veritaban\u0131 olmas\u0131na ra\u011fmen, Mongoose gibi bir ODM (Object Data Modeling) k\u00fct\u00fcphanesi kullanarak veri yap\u0131lar\u0131m\u0131z\u0131 tan\u0131mlamak, kod okunabilirli\u011fini ve veri tutarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Ba\u015flang\u0131\u00e7ta basit bir yap\u0131 d\u00fc\u015f\u00fcnd\u00fcm, ancak zamanla kullan\u0131c\u0131, i\u015flem ve kategori modellerinin ili\u015fkileri daha karma\u015f\u0131k hale geldi.<\/p>\n<p><strong>Problem:<\/strong> Veri tutarl\u0131l\u0131\u011f\u0131 ve ili\u015fkisel veri modellemesi eksikli\u011fi. MongoDB \u015femas\u0131z oldu\u011fu i\u00e7in, hatal\u0131 veri giri\u015fleri veya eksik alanlar olu\u015fabiliyordu.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Mongoose ile g\u00fc\u00e7l\u00fc \u015femalar tan\u0131mlamak ve her alan i\u00e7in tip, zorunluluk, varsay\u0131lan de\u011ferler gibi k\u0131s\u0131tlamalar eklemek. \u00d6rne\u011fin, bir i\u015flem modeli \u015f\u00f6yle tan\u0131mlanabilir:<\/p>\n<pre><code class=\"language-javascript\">\nconst mongoose = require('mongoose');\n\nconst transactionSchema = new mongoose.Schema({\n    userId: {\n        type: mongoose.Schema.Types.ObjectId,\n        ref: 'User',\n        required: true\n    },\n    type: {\n        type: String,\n        enum: ['income', 'expense', 'transfer'],\n        required: true\n    },\n    amount: {\n        type: Number,\n        required: true,\n        min: 0.01\n    },\n    category: {\n        type: mongoose.Schema.Types.ObjectId,\n        ref: 'Category',\n        required: true\n    },\n    description: {\n        type: String,\n        trim: true\n    },\n    date: {\n        type: Date,\n        default: Date.now\n    }\n}, { timestamps: true });\n\nmodule.exports = mongoose.model('Transaction', transactionSchema);\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u015fema, her i\u015flemin bir kullan\u0131c\u0131ya, t\u00fcre, miktara ve kategoriye sahip olmas\u0131n\u0131 zorunlu k\u0131lar, b\u00f6ylece veri tutarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n<h4>2.2. RESTful API Tasar\u0131m\u0131<\/h4>\n<p>Express.js ile RESTful API endpoint'leri olu\u015fturmak olduk\u00e7a basittir. Her kaynak (kullan\u0131c\u0131, i\u015flem, kategori) i\u00e7in CRUD (Create, Read, Update, Delete) operasyonlar\u0131n\u0131 destekleyen endpoint'ler tan\u0131mlad\u0131m.<\/p>\n<p><strong>Problem:<\/strong> API endpoint'lerinin karma\u015f\u0131kla\u015fmas\u0131 ve veri do\u011frulama eksikli\u011fi.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Endpoint'leri mant\u0131ksal olarak grupland\u0131rmak (\u00f6rn. <code>\/api\/transactions<\/code>, <code>\/api\/categories<\/code>). Gelen verileri do\u011frulamak i\u00e7in <code>express-validator<\/code> veya Joi gibi k\u00fct\u00fcphaneler kullanmak. Bu, hem g\u00fcvenlik hem de veri kalitesi a\u00e7\u0131s\u0131ndan \u00f6nemlidir.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ \u00d6rnek bir i\u015flem ekleme endpoint'i\nconst express = require('express');\nconst router = express.Router();\nconst { body, validationResult } = require('express-validator');\nconst auth = require('..\/middleware\/auth'); \/\/ Kimlik do\u011frulama middleware'i\nconst Transaction = require('..\/models\/Transaction');\n\nrouter.post(\n    '\/',\n    [\n        auth, \/\/ Kullan\u0131c\u0131n\u0131n oturum a\u00e7m\u0131\u015f oldu\u011funu do\u011frula\n        body('type').isIn(['income', 'expense', 'transfer']).withMessage('Ge\u00e7ersiz i\u015flem tipi.'),\n        body('amount').isFloat({ gt: 0 }).withMessage('Miktar pozitif bir say\u0131 olmal\u0131d\u0131r.'),\n        body('category').isMongoId().withMessage('Ge\u00e7ersiz kategori ID\\'si.')\n    ],\n    async (req, res) => {\n        const errors = validationResult(req);\n        if (!errors.isEmpty()) {\n            return res.status(400).json({ errors: errors.array() });\n        }\n\n        try {\n            const newTransaction = new Transaction({\n                userId: req.user.id,\n                ...req.body\n            });\n            const transaction = await newTransaction.save();\n            res.status(201).json(transaction);\n        } catch (err) {\n            console.error(err.message);\n            res.status(500).send('Sunucu Hatas\u0131');\n        }\n    }\n);\n\nmodule.exports = router;\n<\/pre>\n<p><\/code><\/p>\n<h4>2.3. Kimlik Do\u011frulama ve Yetkilendirme<\/h4>\n<p>Kullan\u0131c\u0131lar\u0131n kendi verilerine eri\u015fmesini sa\u011flamak ve ba\u015fkalar\u0131n\u0131n verilerine eri\u015fmesini engellemek i\u00e7in g\u00fc\u00e7l\u00fc bir kimlik do\u011frulama ve yetkilendirme sistemi \u015fartt\u0131.<\/p>\n<p><strong>Problem:<\/strong> G\u00fcvenli kullan\u0131c\u0131 oturum y\u00f6netimi ve yetkisiz eri\u015fim.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> JSON Web Tokens (JWT) kullanmak. Kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, sunucu bir JWT olu\u015fturur ve istemciye g\u00f6nderir. \u0130stemci, sonraki t\u00fcm isteklerde bu token'\u0131 g\u00f6nderir ve sunucu, token'\u0131 do\u011frulayarak kullan\u0131c\u0131n\u0131n kimli\u011fini ve yetkisini kontrol eder. \u015eifreleri g\u00fcvenli bir \u015fekilde saklamak i\u00e7in <code>bcrypt.js<\/code> kullanarak hash'leme yapt\u0131m.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ auth middleware \u00f6rne\u011fi\nconst jwt = require('jsonwebtoken');\nconst config = require('config');\n\nmodule.exports = function(req, res, next) {\n    \/\/ Token'\u0131 header'dan al\n    const token = req.header('x-auth-token');\n\n    \/\/ Token yoksa hata d\u00f6nd\u00fcr\n    if (!token) {\n        return res.status(401).json({ msg: 'Yetkilendirme reddedildi, token yok' });\n    }\n\n    \/\/ Token'\u0131 do\u011frula\n    try {\n        const decoded = jwt.verify(token, config.get('jwtSecret'));\n        req.user = decoded.user;\n        next();\n    } catch (err) {\n        res.status(401).json({ msg: 'Token ge\u00e7erli de\u011fil' });\n    }\n};\n<\/pre>\n<p><\/code><\/p>\n<h3>3. Frontend Geli\u015ftirme: Kullan\u0131c\u0131 Deneyimi ve Veri G\u00f6rselle\u015ftirme<\/h3>\n<p>React ile kullan\u0131c\u0131 dostu ve etkile\u015fimli bir aray\u00fcz olu\u015fturmak, uygulaman\u0131n benimsenmesi a\u00e7\u0131s\u0131ndan kritikti. Veri g\u00f6rselle\u015ftirme, finansal durumu anlamay\u0131 kolayla\u015ft\u0131rd\u0131.<\/p>\n<h4>3.1. React Bile\u015fen Mimarisi<\/h4>\n<p>Uygulamay\u0131 mod\u00fcler ve yeniden kullan\u0131labilir bile\u015fenlere ay\u0131rmak, geli\u015ftirme s\u00fcrecini d\u00fczenli tutar ve bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r. Ana bile\u015fenler: Dashboard, TransactionForm, TransactionList, CategoryManager, BudgetTracker, ChartComponents.<\/p>\n<p><strong>Problem:<\/strong> Bile\u015fenler aras\u0131 veri payla\u015f\u0131m\u0131 ve state y\u00f6netimi karma\u015f\u0131kl\u0131\u011f\u0131.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Ba\u015flang\u0131\u00e7ta prop drilling ile u\u011fra\u015f\u0131rken, daha sonra React Context API'\u0131 veya Redux gibi bir state y\u00f6netim k\u00fct\u00fcphanesi kullanmaya karar verdim. Context API, k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulamalar i\u00e7in yeterli esnekli\u011fi ve basitli\u011fi sunar.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ \u00d6rnek bir React bile\u015feni: TransactionList\nimport React, { useContext, useEffect } from 'react';\nimport { GlobalContext } from '..\/context\/GlobalState';\nimport TransactionItem from '.\/TransactionItem';\n\nconst TransactionList = () => {\n    const { transactions, getTransactions } = useContext(GlobalContext);\n\n    useEffect(() => {\n        getTransactions();\n        \/\/ eslint-disable-next-line react-hooks\/exhaustive-deps\n    }, []);\n\n    return (\n        <div>\n            <h3>Ge\u00e7mi\u015f \u0130\u015flemler<\/h3>\n            <ul className=\"list\">\n                {transactions.map(transaction => (\n                    <TransactionItem key={transaction._id} transaction={transaction} \/>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n};\n\nexport default TransactionList;\n<\/pre>\n<p><\/code><\/p>\n<h4>3.2. Veri \u00c7ekme ve Y\u00f6netimi<\/h4>\n<p>Frontend'in backend ile ileti\u015fim kurmas\u0131 i\u00e7in HTTP istekleri yapmas\u0131 gerekir. Axios, bu ama\u00e7la yayg\u0131n olarak kullan\u0131lan Promise tabanl\u0131 bir HTTP istemcisidir.<\/p>\n<p><strong>Problem:<\/strong> Asenkron veri \u00e7ekme i\u015flemlerinde y\u00fckleme durumlar\u0131, hatalar ve verinin g\u00fcncellenmesi.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Axios kullanarak API \u00e7a\u011fr\u0131lar\u0131n\u0131 y\u00f6netmek. Her \u00e7a\u011fr\u0131 i\u00e7in <code>try-catch<\/code> bloklar\u0131 ile hata yakalamak ve kullan\u0131c\u0131ya geri bildirim sa\u011flamak. Y\u00fckleme durumlar\u0131n\u0131 (loading state) y\u00f6netmek, kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ GlobalState.js i\u00e7inde bir \u00f6rnek:\nimport React, { createContext, useReducer } from 'react';\nimport axios from 'axios';\n\n\/\/ Initial state\nconst initialState = {\n    transactions: [],\n    error: null,\n    loading: true\n};\n\n\/\/ Reducer\nexport const AppReducer = (state, action) => {\n    switch (action.type) {\n        case 'GET_TRANSACTIONS':\n            return {\n                ...state,\n                loading: false,\n                transactions: action.payload\n            };\n        case 'TRANSACTION_ERROR':\n            return {\n                ...state,\n                error: action.payload\n            };\n        \/\/ ... di\u011fer action'lar\n        default:\n            return state;\n    }\n};\n\n\/\/ Create context\nexport const GlobalContext = createContext(initialState);\n\n\/\/ Provider component\nexport const GlobalProvider = ({ children }) => {\n    const [state, dispatch] = useReducer(AppReducer, initialState);\n\n    \/\/ Actions\n    async function getTransactions() {\n        try {\n            const res = await axios.get('\/api\/transactions');\n            dispatch({\n                type: 'GET_TRANSACTIONS',\n                payload: res.data.data\n            });\n        } catch (err) {\n            dispatch({\n                type: 'TRANSACTION_ERROR',\n                payload: err.response.data.error\n            });\n        }\n    }\n    \/\/ ... di\u011fer action'lar\n\n    return (\n        <GlobalContext.Provider value={{\n            transactions: state.transactions,\n            error: state.error,\n            loading: state.loading,\n            getTransactions\n        }}>\n            {children}\n        <\/GlobalContext.Provider>\n    );\n};\n<\/pre>\n<p><\/code><\/p>\n<h4>3.3. G\u00f6rselle\u015ftirme ve Grafik K\u00fct\u00fcphaneleri<\/h4>\n<p>Finansal verilerin g\u00f6rselle\u015ftirilmesi, kullan\u0131c\u0131lar\u0131n harcama al\u0131\u015fkanl\u0131klar\u0131n\u0131 ve finansal durumlar\u0131n\u0131 h\u0131zl\u0131ca anlamalar\u0131n\u0131 sa\u011flar. Pasta grafikleri, \u00e7ubuk grafikler ve \u00e7izgi grafikler bu ama\u00e7la kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<p><strong>Problem:<\/strong> Verileri anlaml\u0131 grafiklere d\u00f6n\u00fc\u015ft\u00fcrmek ve aray\u00fcze entegre etmek.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Chart.js veya Recharts gibi pop\u00fcler grafik k\u00fct\u00fcphanelerini kullanmak. Ben, basitli\u011fi ve esnekli\u011fi nedeniyle Chart.js'i tercih ettim. \u0130\u015flem verilerini grupland\u0131rarak (\u00f6rn. kategoriye g\u00f6re harcamalar, aya g\u00f6re gelir\/gider) grafiklere uygun formatta haz\u0131rlad\u0131m.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ \u00d6rnek bir pasta grafi\u011fi bile\u015feni (Chart.js ile)\nimport React, { useEffect, useRef } from 'react';\nimport Chart from 'chart.js\/auto'; \/\/ Chart.js v3 ve sonras\u0131 i\u00e7in 'auto'\n\nconst ExpenseByCategoryChart = ({ transactions }) => {\n    const chartRef = useRef(null);\n    const chartInstance = useRef(null); \/\/ Chart \u00f6rne\u011fini saklamak i\u00e7in\n\n    useEffect(() => {\n        if (chartInstance.current) {\n            chartInstance.current.destroy(); \/\/ \u00d6nceki grafi\u011fi yok et\n        }\n\n        const ctx = chartRef.current.getContext('2d');\n\n        \/\/ \u0130\u015flemleri kategoriye g\u00f6re grupland\u0131r\n        const categoryExpenses = transactions.reduce((acc, transaction) => {\n            if (transaction.type === 'expense') {\n                const categoryName = transaction.category.name || 'Di\u011fer'; \/\/ Kategori ad\u0131n\u0131 varsayal\u0131m\n                acc[categoryName] = (acc[categoryName] || 0) + transaction.amount;\n            }\n            return acc;\n        }, {});\n\n        const labels = Object.keys(categoryExpenses);\n        const data = Object.values(categoryExpenses);\n\n        chartInstance.current = new Chart(ctx, {\n            type: 'pie',\n            data: {\n                labels: labels,\n                datasets: [{\n                    data: data,\n                    backgroundColor: [\n                        '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'\n                    ],\n                    hoverOffset: 4\n                }]\n            },\n            options: {\n                responsive: true,\n                plugins: {\n                    legend: {\n                        position: 'top',\n                    },\n                    title: {\n                        display: true,\n                        text: 'Kategoriye G\u00f6re Harcamalar'\n                    }\n                }\n            }\n        });\n\n        return () => {\n            if (chartInstance.current) {\n                chartInstance.current.destroy(); \/\/ Bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda grafi\u011fi yok et\n            }\n        };\n    }, [transactions]);\n\n    return <canvas ref={chartRef}><\/canvas>;\n};\n\nexport default ExpenseByCategoryChart;\n<\/pre>\n<p><\/code><\/p>\n<h3>4. Ger\u00e7ek Hayat Problemleri ve \u00c7\u00f6z\u00fcmleri<\/h3>\n<p>Geli\u015ftirme s\u00fcreci boyunca kar\u015f\u0131la\u015ft\u0131\u011f\u0131m baz\u0131 \u00f6nemli zorluklar ve onlara buldu\u011fum \u00e7\u00f6z\u00fcmler:<\/p>\n<h4>4.1. Veri Tutarl\u0131l\u0131\u011f\u0131 ve Do\u011frulama Zorluklar\u0131<\/h4>\n<p><strong>Problem:<\/strong> Kullan\u0131c\u0131lar\u0131n hatal\u0131 veya eksik veri girmesi, backend'de veri taban\u0131na yanl\u0131\u015f verilerin kaydedilmesi. \u00d6rne\u011fin, negatif bir miktar girilmesi veya ge\u00e7ersiz bir kategori se\u00e7ilmesi.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Hem frontend hem de backend'de kat\u0131 do\u011frulama kurallar\u0131 uygulamak. Frontend'de form do\u011frulama ile kullan\u0131c\u0131ya an\u0131nda geri bildirim sa\u011flamak. Backend'de ise <code>express-validator<\/code> veya Mongoose \u015fema do\u011frulama ile veritaban\u0131na kaydedilmeden \u00f6nce verileri kontrol etmek. Bu, uygulaman\u0131n genel g\u00fcvenilirli\u011fini art\u0131r\u0131r.<\/p>\n<h4>4.2. Asenkron \u0130\u015flemler ve Hata Y\u00f6netimi<\/h4>\n<p><strong>Problem:<\/strong> JavaScript'in asenkron do\u011fas\u0131 nedeniyle API \u00e7a\u011fr\u0131lar\u0131nda veya veritaban\u0131 i\u015flemlerinde olu\u015fan hatalar\u0131 y\u00f6netmek karma\u015f\u0131k olabilir. Kullan\u0131c\u0131 aray\u00fcz\u00fcnde tak\u0131lmalar veya belirsiz hata mesajlar\u0131 olu\u015fabilir.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Modern JavaScript'in <code>async\/await<\/code> s\u00f6zdizimini kullanarak asenkron kodlar\u0131 daha okunabilir hale getirmek. Her asenkron \u00e7a\u011fr\u0131y\u0131 <code>try-catch<\/code> bloklar\u0131 i\u00e7ine almak ve hatalar\u0131 uygun HTTP durum kodlar\u0131yla (\u00f6rn. 400, 401, 500) d\u00f6nd\u00fcrmek. Frontend'de, bu hatalar\u0131 yakalay\u0131p kullan\u0131c\u0131ya anla\u015f\u0131l\u0131r mesajlarla sunmak.<\/p>\n<h4>4.3. Performans Engelleri<\/h4>\n<p><strong>Problem:<\/strong> Zamanla kullan\u0131c\u0131lar\u0131n i\u015flem say\u0131s\u0131 artt\u0131k\u00e7a, t\u00fcm verileri tek seferde \u00e7ekmek veya i\u015flemek performans\u0131 d\u00fc\u015f\u00fcrebilir. \u00d6zellikle raporlama ekranlar\u0131nda bu durum belirginle\u015fir.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong><\/p>\n<ul>\n<li><strong>Pagination (Sayfalama):<\/strong> B\u00fcy\u00fck veri setlerini k\u00fc\u00e7\u00fck par\u00e7alar halinde \u00e7ekmek. \u00d6rne\u011fin, i\u015flem listesini 10'arl\u0131 veya 20'\u015ferli sayfalara ay\u0131rmak.<\/li>\n<li><strong>Lazy Loading:<\/strong> Sadece ihtiya\u00e7 duyulan bile\u015fenleri veya verileri y\u00fcklemek.<\/li>\n<li><strong>Veritaban\u0131 \u0130ndeksleme:<\/strong> MongoDB'de s\u0131k sorgulanan alanlara indeksler eklemek (\u00f6rn. <code>userId<\/code>, <code>date<\/code>) sorgu s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n<li><strong>Backend'de Veri Agregasyonu:<\/strong> Raporlar i\u00e7in gerekli olan \u00f6zet verileri (\u00f6rn. ayl\u0131k toplam harcamalar) do\u011frudan veritaban\u0131 seviyesinde hesaplay\u0131p g\u00f6ndermek, frontend'deki i\u015flem y\u00fck\u00fcn\u00fc azalt\u0131r.<\/li>\n<\/ul>\n<h4>4.4. Kullan\u0131c\u0131 Aray\u00fcz\u00fc Duyarl\u0131l\u0131\u011f\u0131 (Responsive Design)<\/h4>\n<p><strong>Problem:<\/strong> Uygulaman\u0131n farkl\u0131 ekran boyutlar\u0131nda (mobil, tablet, masa\u00fcst\u00fc) d\u00fczg\u00fcn g\u00f6r\u00fcnmemesi.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> CSS framework'leri (Tailwind CSS, Material-UI veya Bootstrap) kullanarak responsive tasar\u0131m prensiplerini uygulamak. Flexbox ve CSS Grid gibi modern CSS \u00f6zelliklerinden faydalanmak. Mobil \u00f6ncelikli tasar\u0131m yakla\u015f\u0131m\u0131 benimsemek, k\u00fc\u00e7\u00fck ekranlardan ba\u015flayarak daha b\u00fcy\u00fck ekranlara do\u011fru tasar\u0131mlar\u0131 geni\u015fletmek.<\/p>\n<h3>5. G\u00fcvenlik ve Performans Optimizasyonu<\/h3>\n<p>Uygulaman\u0131n uzun \u00f6m\u00fcrl\u00fc ve g\u00fcvenilir olmas\u0131 i\u00e7in g\u00fcvenlik ve performans s\u00fcrekli g\u00f6z \u00f6n\u00fcnde bulundurulmas\u0131 gereken konulard\u0131r.<\/p>\n<h4>5.1. G\u00fcvenlik \u00d6nlemleri<\/h4>\n<p>Finansal veriler hassas oldu\u011fu i\u00e7in g\u00fcvenlik en y\u00fcksek \u00f6nceliklerden biridir.<\/p>\n<ul>\n<li><strong>\u015eifre Hashleme:<\/strong> Kullan\u0131c\u0131 \u015fifrelerini asla d\u00fcz metin olarak saklamamak. <code>bcrypt.js<\/code> kullanarak \u015fifreleri g\u00fcvenli bir \u015fekilde hash'lemek.<\/li>\n<li><strong>JWT G\u00fcvenli\u011fi:<\/strong> JWT'leri HTTP Only \u00e7erezlerinde saklamak (XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131), k\u0131sa \u00f6m\u00fcrl\u00fc token'lar kullanmak ve refresh token mekanizmas\u0131 eklemek.<\/li>\n<li><strong>Ortam De\u011fi\u015fkenleri:<\/strong> Hassas bilgileri (veritaban\u0131 ba\u011flant\u0131 dizeleri, JWT s\u0131rlar\u0131) do\u011frudan koda yazmak yerine ortam de\u011fi\u015fkenlerinde (<code>.env<\/code> dosyas\u0131) saklamak.<\/li>\n<li><strong>CORS Politikalar\u0131:<\/strong> Yaln\u0131zca izin verilen alan adlar\u0131ndan gelen isteklere yan\u0131t vermek i\u00e7in CORS (Cross-Origin Resource Sharing) yap\u0131land\u0131rmas\u0131.<\/li>\n<li><strong>Veri \u015eifreleme:<\/strong> Hassas finansal verilerin (\u00f6rn. banka hesap numaralar\u0131, e\u011fer saklan\u0131yorsa) veritaban\u0131nda \u015fifrelenerek saklanmas\u0131.<\/li>\n<\/ul>\n<h4>5.2. Performans \u0130yile\u015ftirmeleri<\/h4>\n<p>Uygulaman\u0131n h\u0131zl\u0131 ve ak\u0131c\u0131 \u00e7al\u0131\u015fmas\u0131 kullan\u0131c\u0131 memnuniyeti i\u00e7in esast\u0131r.<\/p>\n<ul>\n<li><strong>Veritaban\u0131 \u0130ndeksleme:<\/strong> Daha \u00f6nce de belirtildi\u011fi gibi, sorgu performans\u0131n\u0131 art\u0131rmak i\u00e7in MongoDB indekslerini do\u011fru kullanmak.<\/li>\n<li><strong>\u00d6nbellekleme (Caching):<\/strong> S\u0131k eri\u015filen ancak nadiren de\u011fi\u015fen verileri (\u00f6rn. kategori listeleri) sunucu taraf\u0131nda veya istemci taraf\u0131nda \u00f6nbelle\u011fe almak. Redis gibi bir \u00f6nbellek sunucusu kullan\u0131labilir.<\/li>\n<li><strong>Gereksiz Yeniden Render'lar\u0131 Engelleme:<\/strong> React'ta <code>React.memo<\/code>, <code>useCallback<\/code> ve <code>useMemo<\/code> hook'lar\u0131n\u0131 kullanarak bile\u015fenlerin gereksiz yere yeniden render edilmesini engellemek.<\/li>\n<li><strong>Resim Optimizasyonu:<\/strong> E\u011fer varsa, resimleri optimize etmek ve uygun formatlarda (WebP) sunmak.<\/li>\n<li><strong>Kod B\u00f6lme (Code Splitting):<\/strong> Frontend uygulamas\u0131n\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini azaltmak i\u00e7in kodu daha k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6lmek ve sadece ihtiya\u00e7 duyuldu\u011funda y\u00fcklemek.<\/li>\n<\/ul>\n<h4>5.3. Hata Kayd\u0131 ve \u0130zleme<\/h4>\n<p><strong>Problem:<\/strong> Canl\u0131ya al\u0131nan uygulamada olu\u015fan hatalar\u0131 tespit etmek ve gidermek.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Sunucu taraf\u0131nda Winston gibi bir loglama k\u00fct\u00fcphanesi kullanarak hatalar\u0131, uyar\u0131lar\u0131 ve bilgi mesajlar\u0131n\u0131 kaydetmek. Frontend'de ise Sentry gibi hata izleme ara\u00e7lar\u0131n\u0131 entegre etmek, kullan\u0131c\u0131 taraf\u0131nda olu\u015fan hatalar\u0131 ger\u00e7ek zamanl\u0131 olarak takip etmeyi sa\u011flar.<\/p>\n<h3>6. Da\u011f\u0131t\u0131m (Deployment) ve Sonraki Ad\u0131mlar<\/h3>\n<p>Uygulamay\u0131 geli\u015ftirmek kadar, onu canl\u0131ya almak ve s\u00fcrd\u00fcrmek de \u00f6nemlidir.<\/p>\n<h4>6.1. Uygulamay\u0131 Canl\u0131ya Alma<\/h4>\n<p><strong>Problem:<\/strong> Backend ve frontend'i ayr\u0131 ayr\u0131 veya birlikte nas\u0131l bar\u0131nd\u0131raca\u011f\u0131m\u0131 se\u00e7mek.<\/p>\n<p><strong>\u00c7\u00f6z\u00fcm:<\/strong> Bir\u00e7ok se\u00e7enek mevcut:<\/p>\n<ul>\n<li><strong>Heroku:<\/strong> H\u0131zl\u0131 prototipleme ve k\u00fc\u00e7\u00fck projeler i\u00e7in ideal, ancak \u00fccretsiz katman\u0131 art\u0131k yok.<\/li>\n<li><strong>Vercel (Frontend) ve Render\/Railway (Backend\/DB):<\/strong> Modern ve kullan\u0131m\u0131 kolay platformlar. Frontend i\u00e7in Vercel, serverless fonksiyonlar ve h\u0131zl\u0131 da\u011f\u0131t\u0131m sunar. Backend i\u00e7in Render veya Railway, veritaban\u0131 ve Node.js uygulamalar\u0131 i\u00e7in uygun.<\/li>\n<li><strong>AWS EC2\/DigitalOcean Droplet:<\/strong> Daha fazla kontrol ve \u00f6zelle\u015ftirme isteyenler i\u00e7in sanal sunucular. Manuel kurulum gerektirir.<\/li>\n<\/ul>\n<p>Ben, frontend i\u00e7in Vercel'i, backend ve MongoDB i\u00e7in ise Render'\u0131 tercih ettim. Bu platformlar, CI\/CD (S\u00fcrekli Entegrasyon\/S\u00fcrekli Da\u011f\u0131t\u0131m) s\u00fcre\u00e7lerini otomatikle\u015ftirmeyi kolayla\u015ft\u0131r\u0131r, bu da her kod de\u011fi\u015fikli\u011finde uygulaman\u0131n otomatik olarak da\u011f\u0131t\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>6.2. S\u00fcrekli Geli\u015ftirme ve Bak\u0131m<\/h4>\n<p>Bir yaz\u0131l\u0131m projesi asla \"tamamlanm\u0131\u015f\" say\u0131lmaz. S\u00fcrekli geli\u015ftirme ve bak\u0131m, uygulaman\u0131n g\u00fcncel, g\u00fcvenli ve kullan\u0131\u015fl\u0131 kalmas\u0131n\u0131 sa\u011flar.<\/p>\n<ul>\n<li><strong>Yeni \u00d6zellikler:<\/strong> Kullan\u0131c\u0131 geri bildirimlerine veya kendi ihtiya\u00e7lar\u0131ma g\u00f6re yeni \u00f6zellikler eklemek (\u00f6rn. banka entegrasyonu, fatura hat\u0131rlat\u0131c\u0131lar\u0131).<\/li>\n<li><strong>Bug D\u00fczeltmeleri:<\/strong> Ortaya \u00e7\u0131kan hatalar\u0131 d\u00fczenli olarak d\u00fczeltmek.<\/li>\n<li><strong>Ba\u011f\u0131ml\u0131l\u0131k G\u00fcncellemeleri:<\/strong> Projedeki t\u00fcm k\u00fct\u00fcphaneleri ve framework'leri g\u00fcncel tutmak, g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 kapatmak ve yeni \u00f6zelliklerden faydalanmak.<\/li>\n<\/ul>\n<h4>6.3. Gelecek Potansiyeli<\/h4>\n<p>Bu finans takip uygulamas\u0131, basit bir ba\u015flang\u0131\u00e7 noktas\u0131yd\u0131 ancak gelecekte bir\u00e7ok potansiyel geli\u015ftirme alan\u0131 sunuyor:<\/p>\n<ul>\n<li><strong>Banka Entegrasyonlar\u0131:<\/strong> Open Banking API'lar\u0131 veya \u00fc\u00e7\u00fcnc\u00fc taraf entegrasyon servisleri (\u00f6rn. Plaid) arac<br \/>\n","protected":false},"excerpt":{"rendered":"Her b\u00fcy\u00fck projenin temelinde g\u00fc\u00e7l\u00fc bir fikir yatar. Benim i\u00e7in bu fikir, gelirlerimi, giderlerimi ve birikimlerimi tek bir yerden, kolayca takip edebil&#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-38582","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>Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0 - 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\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-\ud83d\udcb0\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0\" \/>\n<meta property=\"og:description\" content=\"Her b\u00fcy\u00fck projenin temelinde g\u00fc\u00e7l\u00fc bir fikir yatar. Benim i\u00e7in bu fikir, gelirlerimi, giderlerimi ve birikimlerimi tek bir yerden, kolayca takip edebil...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-\ud83d\udcb0\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-03T10:30:48+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=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0\",\"datePublished\":\"2026-02-03T10:30:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/\"},\"wordCount\":2411,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/\",\"name\":\"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-03T10:30:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0\"}]},{\"@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":"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0 - 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\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-\ud83d\udcb0\/","og_locale":"tr_TR","og_type":"article","og_title":"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0","og_description":"Her b\u00fcy\u00fck projenin temelinde g\u00fc\u00e7l\u00fc bir fikir yatar. Benim i\u00e7in bu fikir, gelirlerimi, giderlerimi ve birikimlerimi tek bir yerden, kolayca takip edebil...","og_url":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-\ud83d\udcb0\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-03T10:30:48+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0","datePublished":"2026-02-03T10:30:48+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/"},"wordCount":2411,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/","url":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/","name":"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-03T10:30:48+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/full-stack-finans-takip-uygulamasi-gelistirme-mern-yolculugum-gercek-problemler-ve-cozumleri-%f0%9f%92%b0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Full-Stack Finans Takip Uygulamas\u0131 Geli\u015ftirme: MERN Yolculu\u011fum (Ger\u00e7ek Problemler ve \u00c7\u00f6z\u00fcmleri) \ud83d\udcb0"}]},{"@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\/38582","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=38582"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/38582\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=38582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=38582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=38582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}