🚀 Başlangıç Rehberi - React 19 Clapton Admin Template

Premium React 19 admin template'i ile hızlı başlangıç rehberi

📋 İçindekiler

Hızlı Başlangıç
Proje Yapısı
İlk Adımlar
Komponent Kullanımı
Tema Özelleştirme
Sayfa Ekleme
Deployment
Sorun Giderme

🚀 Hızlı Başlangıç

Sistem Gereksinimleri

Node.js: 18.0.0 veya üzeri
npm: 9.0+ veya yarn: 1.22+ veya bun: 1.0+
Git: Versiyon kontrolü için

1. Projeyi İndirin

# Repository'yi klonlayın
git clone https://github.com/sametuca/react19-clapton-admin-template-premium

# Proje dizinine gidin
cd react19-clapton-admin-template

2. Bağımlılıkları Yükleyin

# npm kullanarak
npm install

# veya yarn kullanarak
yarn install

# veya bun kullanarak
bun install

3. Geliştirme Sunucusunu Başlatın

# npm ile
npm run dev

# veya yarn ile
yarn dev

# veya bun ile
bun dev

4. Tarayıcıda Açın

http://localhost:8080 adresine gidin ve template'i keşfetmeye başlayın!

📁 Proje Yapısı

react19-clapton-admin-template/
├── 📁 public/                    # Statik dosyalar
│   ├── favicon.svg              # Site ikonu
│   └── robots.txt               # SEO robots dosyası
├── 📁 src/                      # Ana kaynak kodları
│   ├── 📁 components/           # Yeniden kullanılabilir komponentler
│   │   ├── 📁 ui/              # Temel UI komponentleri (shadcn/ui)
│   │   │   ├── button.tsx      # Buton komponenti
│   │   │   ├── card.tsx        # Kart komponenti
│   │   │   ├── input.tsx       # Input komponenti
│   │   │   ├── 📁 ai/          # AI komponentleri
│   │   │   │   ├── ai-chat.tsx # AI sohbet komponenti
│   │   │   │   ├── ai-search.tsx # AI arama komponenti
│   │   │   │   └── ai-insights.tsx # AI analiz komponenti
│   │   │   ├── 📁 advanced/    # Gelişmiş komponentler
│   │   │   │   ├── AuroraBackground.tsx
│   │   │   │   ├── AdaptiveCommandPalette.tsx
│   │   │   │   └── LiveUserPresence.tsx
│   │   │   └── ... (200+ komponent)
│   │   ├── AppSidebar.tsx      # Ana sidebar komponenti
│   │   ├── LanguageSwitcher.tsx # Dil değiştirici
│   │   └── ThemeSelector.tsx   # Tema seçici
│   ├── 📁 pages/               # Uygulama sayfaları
│   │   ├── Welcome.tsx         # Karşılama sayfası
│   │   ├── Dashboard.tsx       # Ana dashboard
│   │   ├── 📁 showcase/        # Komponent vitrin sayfaları
│   │   │   ├── ComponentShowcaseIndex.tsx
│   │   │   ├── StatsCards.tsx
│   │   │   ├── AIComponents.tsx
│   │   │   ├── PremiumComponents.tsx
│   │   │   └── ... (15+ showcase sayfası)
│   │   └── 📁 examples/        # Örnek sayfalar
│   │       ├── SocialMedia.tsx
│   │       ├── EcommerceDashboard.tsx
│   │       └── ... (5+ örnek sayfa)
│   ├── 📁 contexts/            # React context'leri
│   │   ├── ThemeContext.tsx    # Tema yönetimi
│   │   └── LanguageContext.tsx # Dil yönetimi
│   ├── 📁 hooks/               # Özel React hook'ları
│   │   ├── use-toast.ts        # Toast bildirimleri
│   │   └── use-mobile.tsx      # Mobil algılama
│   ├── 📁 lib/                 # Yardımcı fonksiyonlar
│   │   └── utils.ts            # Genel yardımcılar
│   ├── 📁 layouts/             # Layout komponentleri
│   │   └── AppLayout.tsx       # Ana layout
│   ├── App.tsx                 # Ana uygulama komponenti
│   ├── main.tsx                # Uygulama giriş noktası
│   └── index.css               # Global CSS stilleri
├── 📄 package.json             # Proje bağımlılıkları
├── 📄 tailwind.config.ts       # Tailwind CSS yapılandırması
├── 📄 tsconfig.json            # TypeScript yapılandırması
├── 📄 vite.config.ts           # Vite build yapılandırması
├── 📄 components.json          # shadcn/ui yapılandırması
└── 📄 README.md                # Proje dokümantasyonu

🎯 İlk Adımlar

1. Projeyi Keşfedin

Template'i satın aldıktan sonra ilk yapmanız gerekenler:

Ana Sayfayı İnceleyin: http://localhost:8080 - Karşılama sayfası
Dashboard'a Gidin: /dashboard - Ana yönetim paneli
Komponentleri Keşfedin: /showcase - Tüm komponentlerin sergilendiği sayfa
AI Özelliklerini Test Edin: /showcase/ai - AI destekli komponentler

2. Temel Yapılandırma

Uygulama Adını Değiştirin

// src/layouts/AppLayout.tsx
<div className="flex items-center gap-2 font-semibold">
  <span className="hidden sm:inline">Sizin Uygulama Adınız</span>
</div>

Favicon'u Güncelleyin

public/favicon.svg dosyasını kendi logo'nuzla değiştirin.

Meta Bilgilerini Güncelleyin

<!-- index.html -->
<title>Sizin Uygulama Adınız</title>
<meta name="description" content="Sizin uygulama açıklamanız" />

3. Tema Seçimi

Template 8 farklı premium tema ile gelir:

Dark Premium: Gelişmiş koyu tema
Midnight Black: Derin siyah premium tema
Neon Cyber: Neon ışıklı siber tema
Royal Purple: Kraliyet moru premium tema
Aurora Borealis: Kutup ışıkları teması
Cyberpunk 2077: Futuristik siber tema
Galaxy Deep: Derin uzay galaksi teması
Emerald Luxury: Lüks zümrüt yeşili tema

Tema değiştirmek için:

// Herhangi bir komponente
import { useTheme } from '@/contexts/ThemeContext';

function MyComponent() {
  const { setTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme('royal')}>
      Royal Tema'ya Geç
    </button>
  );
}

🧩 Komponent Kullanımı

Temel UI Komponentleri

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

function MyPage() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Başlık</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default" size="lg">
          Tıkla
        </Button>
        <Badge variant="secondary">Yeni</Badge>
      </CardContent>
    </Card>
  );
}

Premium Komponentler

import { StatsCard } from '@/components/ui/stats-card';
import { DataTable } from '@/components/ui/data-table';
import { ActivityFeed } from '@/components/ui/activity-feed';

function Dashboard() {
  return (
    <div className="space-y-6">
      <StatsCard
        title="Toplam Kullanıcı"
        value={12543}
        change={15.2}
        changeType="positive"
        icon={Users}
      />
      
      <DataTable
        data={userData}
        columns={userColumns}
        title="Kullanıcı Listesi"
        searchable={true}
        exportable={true}
      />
    </div>
  );
}

AI Komponentleri

import { AIChat, AISearch, AIInsights } from '@/components/ui/ai';

function AIPage() {
  return (
    <div>
      {/* AI Sohbet - Sayfanın herhangi bir yerinde */}
      <AIChat />
      
      {/* AI Arama */}
      <AISearch />
      
      {/* AI Analiz */}
      <AIInsights />
    </div>
  );
}

3D ve Premium Efektler

import { Card3D, ImageCard3D } from '@/components/ui/3d-card';
import { GlassmorphismCard } from '@/components/ui/glassmorphism-card';
import { HolographicCard } from '@/components/ui/holographic-card';

function PremiumPage() {
  return (
    <div className="grid gap-6 md:grid-cols-3">
      <Card3D intensity={20} scale={1.05}>
        <Card>
          <CardContent className="p-6">
            <h3>3D Kart</h3>
          </CardContent>
        </Card>
      </Card3D>
      
      <GlassmorphismCard
        title="Glassmorphism"
        description="Modern cam efekti"
        icon={Sparkles}
        variant="primary"
      />
      
      <HolographicCard
        title="Hologram"
        description="Futuristik efekt"
        icon={Zap}
      />
    </div>
  );
}

🎨 Tema Özelleştirme

CSS Değişkenlerini Düzenleme

/* src/index.css */
:root {
  --primary: 59 130 246;      /* Mavi */
  --secondary: 139 92 246;    /* Mor */
  --accent: 16 185 129;       /* Yeşil */
  --background: 0 0% 100%;    /* Beyaz */
  --foreground: 222.2 84% 4.9%; /* Koyu */
}

Yeni Tema Ekleme

// src/contexts/ThemeContext.tsx
const themes = {
  // ... mevcut temalar
  myCustomTheme: {
    name: 'Özel Tema',
    description: 'Benim özel temam',
    colors: {
      background: '0 0% 100%',
      foreground: '222.2 84% 4.9%',
      primary: '346.8 77.2% 49.8%', // Kırmızı
      // ... diğer renkler
    },
    gradient: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)'
  }
};

Tailwind Renklerini Özelleştirme

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#fef7ee',
          500: '#f2751a',
          900: '#7a2e12',
        },
      },
    },
  },
}

📄 Yeni Sayfa Ekleme

1. Sayfa Komponenti Oluşturun

// src/pages/MyNewPage.tsx
import { Helmet } from "react-helmet-async";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function MyNewPage() {
  return (
    <>
      <Helmet>
        <title>Yeni Sayfa - React19 Admin</title>
        <meta name="description" content="Yeni sayfa açıklaması" />
      </Helmet>

      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold">Yeni Sayfa</h1>
          <p className="text-muted-foreground">Sayfa açıklaması</p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>İçerik Başlığı</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Sayfa içeriği buraya gelecek...</p>
            <Button className="mt-4">Aksiyon Butonu</Button>
          </CardContent>
        </Card>
      </div>
    </>
  );
}

2. Route Ekleyin

// src/App.tsx
import MyNewPage from "./pages/MyNewPage";

// Routes içine ekleyin
<Route element={<AppLayout />}>
  {/* ... mevcut route'lar */}
  <Route path="/my-new-page" element={<MyNewPage />} />
</Route>

3. Sidebar'a Menü Ekleyin

// src/components/AppSidebar.tsx
const mainItems = [
  // ... mevcut menü öğeleri
  { 
    title: "Yeni Sayfa", 
    url: "/my-new-page", 
    icon: FileText, 
    badge: "Yeni" 
  },
];

🎨 Komponent Özelleştirme

StatsCard Özelleştirme

<StatsCard
  title="Özel Metrik"
  value={12345}
  change={15.2}
  changeType="positive"
  icon={TrendingUp}
  description="Bu ay"
  prefix="₺"
  suffix=""
  decimals={0}
  gradient={true}
  className="hover:scale-105"
/>

DataTable Özelleştirme

const columns = [
  { 
    key: 'name', 
    title: 'Ad', 
    sortable: true 
  },
  { 
    key: 'status', 
    title: 'Durum',
    render: (value) => (
      <Badge variant={value === 'active' ? 'default' : 'secondary'}>
        {value}
      </Badge>
    )
  }
];

<DataTable
  data={myData}
  columns={columns}
  title="Veri Tablosu"
  searchable={true}
  filterable={true}
  exportable={true}
  pageSize={10}
/>

AI Komponentleri Entegrasyonu

// AI Chat'i layout'a ekleyin
function AppLayout() {
  return (
    <div>
      {/* ... layout içeriği */}
      <AIChat /> {/* Floating chat button */}
    </div>
  );
}

// AI Search'ü header'a ekleyin
function Header() {
  return (
    <header>
      <AISearch />
    </header>
  );
}

🌐 Çoklu Dil Desteği

Yeni Dil Ekleme

// src/contexts/LanguageContext.tsx
const translations = {
  tr: {
    // ... Türkçe çeviriler
  },
  en: {
    // ... İngilizce çeviriler
  },
  de: { // Yeni dil
    nav: {
      dashboard: 'Dashboard',
      users: 'Benutzer',
      // ... Almanca çeviriler
    }
  }
};

Çeviri Kullanımı

import { useLanguage } from '@/contexts/LanguageContext';

function MyComponent() {
  const { t } = useLanguage();
  
  return (
    <div>
      <h1>{t('nav.dashboard')}</h1>
      <p>{t('dashboard.welcome')}</p>
    </div>
  );
}

🚀 Production Build

Build Alma

# Production build
npm run build

# Build'i önizleme
npm run preview

Environment Variables

# .env.local
VITE_APP_NAME=Sizin Uygulama Adınız
VITE_API_URL=https://api.yourdomain.com
VITE_AUTH_DOMAIN=auth.yourdomain.com

Deployment Seçenekleri

Netlify

# Build alın
npm run build

# dist/ klasörünü Netlify'a yükleyin

Docker

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

🔧 Gelişmiş Özelleştirme

Yeni Komponent Oluşturma

// src/components/ui/my-component.tsx
import React from 'react';
import { cn } from '@/lib/utils';

interface MyComponentProps {
  title: string;
  className?: string;
  children?: React.ReactNode;
}

export function MyComponent({ title, className, children }: MyComponentProps) {
  return (
    <div className={cn("p-4 border rounded-lg", className)}>
      <h3 className="font-semibold mb-2">{title}</h3>
      {children}
    </div>
  );
}

Custom Hook Oluşturma

// src/hooks/use-api.ts
import { useState, useEffect } from 'react';

export function useApi<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

📱 Responsive Tasarım

Breakpoint Sistemi

/* Tailwind CSS breakpoints */
sm: 640px   /* Küçük cihazlar */
md: 768px   /* Orta cihazlar */
lg: 1024px  /* Büyük cihazlar */
xl: 1280px  /* Çok büyük cihazlar */
2xl: 1536px /* 2X büyük cihazlar */

Responsive Komponent Örneği

function ResponsiveComponent() {
  return (
    <div className="
      grid 
      grid-cols-1          /* Mobil: 1 sütun */
      md:grid-cols-2      /* Orta: 2 sütun */
      lg:grid-cols-3      /* Büyük: 3 sütun */
      xl:grid-cols-4      /* Çok büyük: 4 sütun */
      gap-4
    ">
      {/* İçerik */}
    </div>
  );
}

🔍 Sorun Giderme

Yaygın Sorunlar ve Çözümleri

Port Zaten Kullanımda

# Farklı port kullanın
npm run dev -- --port 3001

TypeScript Hataları

# Cache'i temizleyin
rm -rf node_modules/.cache/typescript/
npm install

Build Hataları

# Build cache'ini temizleyin
rm -rf dist/ .vite/
npm run build

Komponent Bulunamıyor

# Import yollarını kontrol edin
# @/ alias'ının doğru kullanıldığından emin olun

Performance İpuçları

// Lazy loading kullanın
const MyPage = lazy(() => import('./pages/MyPage'));

// useMemo ile pahalı hesaplamaları optimize edin
const expensiveValue = useMemo(() => {
  return heavyCalculation(data);
}, [data]);

// React.memo ile komponentleri optimize edin
const MyComponent = React.memo(function MyComponent({ data }) {
  return <div>{data}</div>;
});

📚 Ek Kaynaklar

Dokümantasyon

Komponent Kütüphaneleri

shadcn/ui - Temel komponent kütüphanesi
Radix UI - Headless komponentler
Lucide React - İkon kütüphanesi

Topluluk ve Destek

📧 E-posta: support@clapton-admin.com
💬 Discord: Topluluk sunucusu
📖 Dokümantasyon: docs.clapton-admin.com
🐛 Issues: GitHub Issues

🎯 Sonraki Adımlar

1. Komponentleri Keşfedin

/showcase sayfasını ziyaret edin
Her komponent kategorisini inceleyin
Canlı örnekleri test edin

2. Kendi Sayfalarınızı Oluşturun

Yukarıdaki rehberi takip ederek yeni sayfalar ekleyin
Mevcut komponentleri kullanarak hızlıca geliştirin

3. API Entegrasyonu

Backend API'nizi entegre edin
Gerçek veri ile komponentleri test edin

4. Özelleştirme

Tema renklerini markanıza uygun hale getirin
Logo ve favicon'u değiştirin
Kendi komponentlerinizi ekleyin

5. Deploy

Production build alın
Hosting platformuna deploy edin
Domain ve SSL ayarlarını yapın

🎉 Tebrikler!

React 19 Clapton Admin Template'i başarıyla kurdunuz!

Önemli Linkler:

🏠 Ana Sayfa: /
📊 Dashboard: /dashboard
🎨 Komponentler: /showcase
🤖 AI Özellikler: /showcase/ai
⭐ Premium: /showcase/premium

Yardıma İhtiyacınız Var?

Dokümantasyon dosyasını inceleyin
Component API referansını kullanın
Changelog ile güncellemeleri takip edin

Başarılı projeler dileriz! 🚀

Clapton Team tarafından ❤️ ile yapılmıştır

FilesExpand file tree

GETTING_STARTED.md

Latest commit

History