Proje Yapısı

Not: Bu içerik, yalnızca gösterim amaçlı örnek/yer tutucu içeriktir.

Kod tabanının nasıl düzenlendiğini ve aradığınız şeyleri nerede bulacağınızı öğrenin.

Monorepo'ya Genel Bakış

Bu proje, birden fazla uygulama ve paket içeren bir monorepo'yu yönetmek için Turborepo kullanır.

project-root/
├── apps/                    # Uygulamalar
│   ├── web/                # Ana Next.js uygulaması
│   ├── e2e/                # Playwright E2E testleri
│   └── dev-tool/           # Geliştirme yardımcı araçları
├── packages/               # Paylaşılan paketler
│   ├── features/          # Özellik paketleri
│   ├── ui/                # UI bileşenleri
│   ├── supabase/          # Supabase yardımcı araçları
│   └── billing/           # Faturalandırma entegrasyonları
├── tooling/               # Geliştirme araçları
├── supabase/              # Veritabanı şeması ve migration'lar
└── docs/                  # Dokümantasyon

Ana Uygulama (apps/web)

Birincil Next.js uygulaması:

apps/web/
├── app/                    # Next.js App Router
│   ├── (marketing)/       # Herkese açık sayfalar
│   ├── (auth)/            # Kimlik doğrulama
│   ├── home/              # Ana uygulama
│   │   ├── (user)/        # Kişisel hesap
│   │   └── [account]/     # Takım hesapları
│   ├── admin/             # Yönetici paneli
│   └── api/               # API rotaları
├── components/            # Paylaşılan bileşenler
├── config/                # Yapılandırma dosyaları
├── lib/                   # Yardımcı fonksiyonlar
├── public/                # Statik varlıklar
└── supabase/              # Supabase kurulumu

Rota Yapısı

Pazarlama Rotaları ((marketing))

Herkese açık sayfalar:

app/(marketing)/
├── page.tsx               # Açılış sayfası
├── pricing/               # Fiyatlandırma sayfası
├── blog/                  # Blog
└── docs/                  # Dokümantasyon

Kimlik Doğrulama Rotaları ((auth))

Kimlik doğrulama sayfaları:

app/(auth)/
├── sign-in/
├── sign-up/
├── password-reset/
└── verify/

Uygulama Rotaları (home)

Ana uygulama:

app/home/
├── (user)/                # Kişisel hesap bağlamı
│   ├── page.tsx          # Kişisel pano
│   ├── settings/         # Kullanıcı ayarları
│   └── projects/         # Kişisel projeler
└── [account]/            # Takım hesabı bağlamı
    ├── page.tsx          # Takım panosu
    ├── settings/         # Takım ayarları
    ├── projects/         # Takım projeleri
    └── members/          # Takım üyeleri

Paket Yapısı

Özellik Paketleri (packages/features/)

Modüler özellikler:

packages/features/
├── accounts/              # Hesap yönetimi
├── auth/                  # Kimlik doğrulama
├── team-accounts/         # Takım özellikleri
├── billing/               # Faturalandırma ve abonelikler
├── admin/                 # Yönetici özellikleri
└── notifications/         # Bildirim sistemi

UI Paketi (packages/ui/)

Paylaşılan UI bileşenleri:

packages/ui/
└── src/
    ├── components/        # Shadcn UI bileşenleri
    │   ├── button.tsx
    │   ├── input.tsx
    │   ├── dialog.tsx
    │   └── ...
    └── utils/             # UI yardımcı araçları

Supabase Paketi (packages/supabase/)

Veritabanı yardımcı araçları:

packages/supabase/
├── schema/                # Bildirimsel şemalar
│   ├── accounts.schema.ts
│   ├── auth.schema.ts
│   └── ...
├── src/
│   ├── clients/          # Supabase istemcileri
│   ├── hooks/            # React hook'ları
│   └── middleware/       # Kimlik doğrulama middleware'i
└── migrations/           # SQL migration'ları

Yapılandırma Dosyaları

Kök Düzey

project-root/
├── package.json           # Kök package.json
├── turbo.json             # Turborepo yapılandırması
├── pnpm-workspace.yaml    # PNPM çalışma alanı
└── tsconfig.json          # Temel TypeScript yapılandırması

Uygulama Düzeyi

apps/web/
├── next.config.js         # Next.js yapılandırması
├── tailwind.config.ts     # Tailwind CSS
├── tsconfig.json          # TypeScript yapılandırması
└── .env.local             # Ortam değişkenleri

Özellik Yapılandırması

apps/web/config/
├── paths.config.ts        # Rota yolları
├── billing.config.ts      # Faturalandırma ayarları
├── feature-flags.config.ts # Özellik bayrakları
├── personal-account-navigation.config.tsx
└── team-account-navigation.config.tsx

Adlandırma Kuralları

Dosyalar

• Sayfalar: page.tsx (Next.js kuralı)
• Düzenler: layout.tsx
• Bileşenler: kebab-case.tsx
• Yardımcı araçlar: kebab-case.ts
• Tipler: types.ts veya component-name.types.ts

Dizinler

• Rota segmentleri: dinamik segmentler için [param]
• Rota grupları: düzenleme için (group)
• Özel klasörler: _components, _lib
• Paralel rotalar: @folder

Kod Organizasyonu

feature/
├── page.tsx               # Rota sayfası
├── layout.tsx             # Rota düzeni
├── loading.tsx            # Yükleme durumu
├── error.tsx              # Hata sınırı
├── _components/           # Özel bileşenler
│   ├── feature-list.tsx
│   └── feature-form.tsx
└── _lib/                  # Özel yardımcı araçlar
    ├── server/            # Sunucu tarafı kod
    │   ├── loaders.ts
    │   └── actions.ts
    └── schemas/           # Doğrulama şemaları
        └── feature.schema.ts

İçe Aktarma Yolları

TypeScript yol takma adlarını kullanın:

// Paketlerden mutlak içe aktarmalar
import { Button } from '@kit/ui/button';
import { createClient } from '@kit/supabase/server-client';

// Uygulama içinde göreli içe aktarmalar
import { FeatureList } from './_components/feature-list';
import { loadData } from './_lib/server/loaders';

En İyi Uygulamalar

1. Rotaya özgü kodu özel tutun - _components ve _lib kullanın
2. Yeniden kullanılabilir kodu paylaşın - Paketlere taşıyın
3. İlgili dosyaları bir arada tutun - Dosyaları kullanıldıkları yerin yakınında saklayın
4. Tutarlı adlandırma kullanın - Belirlenmiş kalıpları izleyin
5. Özelliğe göre düzenleyin - Dosya türüne göre değil

Yolunuzu Bulma