Günümüz web uygulamaları genellikle iki ana bölümden oluşur:

• Frontend (Client-Side) → Kullanıcının gördüğü ve etkileşime geçtiği arayüz
• Backend (Server-Side) → Sunucu tarafında çalışan iş mantığı ve veri yönetimi

Profesyonel projelerde düzenli, ölçeklenebilir ve sürdürülebilir bir klasör yapısı kullanmak oldukça önemlidir. Aşağıda örnek bir proje yapısı ve detaylı açıklaması bulunmaktadır.

📁 FRONTEND (my-app-frontend/)

Frontend kısmı genellikle React + TypeScript gibi modern teknolojilerle geliştirilir.

my-app-frontend/
│
├── package.json
├── README.md
├── .gitignore
├── public/
│   ├── index.html
│   └── favicon.ico
├── node_modules/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Button.tsx
│   │   ├── Header.tsx
│   │   └── common/
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── About.tsx
│   │   └── Dashboard.tsx
│   ├── hooks/
│   │   └── useAuth.ts
│   ├── utils/
│   │   ├── formatDate.ts
│   │   └── formatData.ts
│   ├── services/
│   │   └── api.ts
│   ├── store/
│   │   ├── authSlice.ts
│   │   └── store.ts
│   ├── App.tsx
│   ├── index.tsx
│   └── styles.css

🔹 Frontend Klasörlerinin Açıklaması

📦 package.json

Projede kullanılan bağımlılıkları (React, Axios, Redux vb.) ve script komutlarını içerir.

📁 public/

Statik dosyaların bulunduğu klasördür.

• index.html → Ana HTML dosyası
• favicon.ico → Site simgesi

📁 src/

Uygulamanın ana kaynak kodlarının bulunduğu klasördür.

📁 assets/

• Resimler
• Fontlar
• SVG dosyaları
• CSS/SCSS dosyaları

📁 components/

Tekrar kullanılabilir UI bileşenleri burada bulunur.

Örnek:

• Button.tsx → Genel buton bileşeni
• Header.tsx → Üst menü
• common/ → Ortak UI bileşenleri

💡 Amaç: Kod tekrarını önlemek ve modüler yapı sağlamak.

📁 pages/

Route’a özel sayfalar burada bulunur.

• Home
• About
• Dashboard

Her biri uygulamanın bir ekranını temsil eder.

📁 hooks/

Custom React hook’ları içerir.

Örnek:

• useAuth.ts → Kimlik doğrulama işlemleri

📁 utils/

Yardımcı fonksiyonlar bulunur.

• Tarih formatlama
• Veri dönüştürme
• Hesaplama işlemleri

📁 services/

Backend ile iletişimi sağlar.

• API çağrıları
• Axios yapılandırması
• Token işlemleri

📁 store/

Global state yönetimi (Redux, Zustand vb.)

• authSlice.ts → Authentication state
• store.ts → Global store yapılandırması

Ana Dosyalar

• App.tsx → Root component
• index.tsx → React uygulamasını DOM’a bağlayan dosya
• styles.css → Genel stil dosyası

📁 BACKEND (my-app-backend/)

Backend genellikle Node.js + Express + TypeScript yapısıyla geliştirilir.

my-app-backend/
│
├── package.json
├── .env
├── .gitignore
├── README.md
├── node_modules/
├── src/
│   ├── config/
│   │   ├── db.ts
│   │   └── default.ts
│   ├── models/
│   │   ├── User.ts
│   │   └── Product.ts
│   ├── routes/
│   │   ├── index.ts
│   │   ├── userRoutes.ts
│   │   └── productRoutes.ts
│   ├── controllers/
│   │   ├── userController.ts
│   │   └── productController.ts
│   ├── services/
│   │   ├── userService.ts
│   │   └── productService.ts
│   ├── middleware/
│   │   ├── auth.ts
│   │   └── logger.ts
│   ├── utils/
│   │   └── emailSender.ts
│   └── server.ts (veya app.ts)

🔹 Backend Klasörlerinin Açıklaması

📦 package.json

Backend bağımlılıkları:

• Express
• Mongoose / Prisma
• JWT
• Bcrypt
• Dotenv

📁 config/

Yapılandırma dosyaları:

• db.ts → Veritabanı bağlantısı
• default.ts → Genel config ayarları

📁 models/

Veritabanı şemaları:

• User modeli
• Product modeli

MongoDB, PostgreSQL gibi veritabanları için tablo/şema tanımları burada yapılır.

📁 routes/

API endpoint tanımları:

• /users
• /products

Her route ilgili controller’a yönlendirilir.

📁 controllers/

HTTP isteklerini karşılayan katman:

• req
• res
• next

Controller sadece isteği alır ve service katmanına iletir.

📁 services/

İş mantığının bulunduğu katman.

Örnek:

• Kullanıcı oluşturma
• Şifre hashleme
• Token üretme
• Veri filtreleme

💡 İş mantığı controller içinde yazılmaz. Bu profesyonel mimarinin temel kuralıdır.

📁 middleware/

Ara katman yazılımlar:

• Kimlik doğrulama
• Loglama
• Hata yakalama
• Yetkilendirme

📁 utils/

Yardımcı fonksiyonlar:

• Email gönderme
• Token oluşturma
• Dosya işlemleri

server.ts / app.ts

Uygulamanın başlangıç noktası:

• Express başlatılır
• Middleware’ler eklenir
• Route’lar tanımlanır
• Sunucu dinlemeye alınır

Profesyonel Mimaride Katmanlı Yapı

Bu yapı genellikle şu mimari prensiplere dayanır:

• Separation of Concerns (Sorumlulukların Ayrılması)
• Clean Architecture
• MVC (Model – View – Controller)
• Modüler yapı
• Ölçeklenebilirlik

Frontend – Backend İletişimi

Frontend → HTTP isteği gönderir
Backend → JSON veri döndürür

Genellikle:

• REST API
• JWT Authentication
• Axios / Fetch
• CORS yapılandırması

kullanılır.

Neden Bu Yapı Profesyoneldir?

✔ Kod okunabilirliği artar
✔ Takım çalışmasına uygundur
✔ Test yazımı kolaylaşır
✔ Büyük projelerde yönetilebilirlik sağlar
✔ Microservice mimarisine geçişi kolaylaştırır

Sonuç

Modern web uygulamalarında frontend ve backend’in doğru yapılandırılması, projenin uzun vadeli başarısı için kritik öneme sahiptir. Yukarıdaki yapı:

• Küçük projeler için sade
• Orta ölçekli projeler için ideal
• Büyük projeler için genişletilebilir

bir mimari sunar.