starkon-template
Advanced tools
Starkon Template, modern React uygulamaları için tasarlanmış kapsamlı bir component kütüphanesidir. Radix UI tabanlı, erişilebilir ve özelleştirilebilir komponentler sunar.
npx create-starkon-template my-project
cd my-project
npm install
npm run dev
starkon-template/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (auth)/ # Korumalı rotalar grubu
│ │ │ ├── components/ # Bileşenler showcase sayfası
│ │ │ ├── dashboard/ # Ana kontrol paneli
│ │ │ ├── settings/ # Kullanıcı ayarları
│ │ │ └── layout.tsx # Auth layout bileşeni
│ │ ├── auth/ # Authentication sayfaları
│ │ │ └── login/ # Giriş sayfası
│ │ ├── globals.css # Global stil tanımları
│ │ ├── layout.tsx # Kök layout bileşeni
│ │ └── page.tsx # Ana sayfa
│ ├── components/ # Component kütüphanesi
│ │ ├── core/ # Temel UI bileşenleri
│ │ │ ├── Accordion/ # Genişletilebilir içerik
│ │ │ ├── AlertDialog/ # Uyarı diyalogları
│ │ │ ├── Avatar/ # Kullanıcı avatarları
│ │ │ ├── Badge/ # Durum etiketleri
│ │ │ ├── Button/ # Etkileşimli butonlar
│ │ │ ├── Card/ # İçerik kartları
│ │ │ ├── Checkbox/ # Seçim kutuları
│ │ │ ├── CommandMenu/ # Komut menüsü
│ │ │ ├── DataTable/ # Gelişmiş veri tablosu
│ │ │ ├── Dialog/ # Modal diyaloglar
│ │ │ ├── Dropdown/ # Açılır menüler
│ │ │ ├── Input/ # Metin giriş alanları
│ │ │ ├── Label/ # Form etiketleri
│ │ │ ├── Loading/ # Yükleme animasyonları
│ │ │ ├── Popover/ # Açılır içerik kutuları
│ │ │ ├── Select/ # Seçim dropdownları
│ │ │ ├── Separator/ # Ayırıcı çizgiler
│ │ │ ├── Skeleton/ # Yükleme placeholderları
│ │ │ ├── Slider/ # Değer seçici kaydırıcılar
│ │ │ ├── Switch/ # Açma/kapama düğmeleri
│ │ │ ├── Tabs/ # Sekme navigasyonu
│ │ │ ├── Textarea/ # Çok satırlı metin alanları
│ │ │ ├── Toast/ # Bildirim mesajları
│ │ │ └── Tooltip/ # Yardım ipuçları
│ │ ├── forms/ # Form bileşenleri
│ │ │ └── auth/ # Authentication formları
│ │ └── ui/ # Özel UI bileşenleri
│ │ ├── ComponentDemo/ # Bileşen demo wrapper
│ │ ├── ErrorBoundary/ # Hata yakalama
│ │ ├── FileUpload/ # Dosya yükleme
│ │ ├── LanguageToggle/# Dil değiştirici
│ │ ├── PageHeader/ # Sayfa başlığı
│ │ ├── ThemeToggle/ # Tema değiştirici
│ │ └── ToastContainer/# Toast yöneticisi
│ ├── data/ # Statik veri dosyaları
│ │ └── componentDemoData.tsx # Demo component verileri
│ ├── hooks/ # Özel React hook'ları
│ │ ├── useAuth.ts # Authentication yönetimi
│ │ ├── useDropdownPortal.ts # Dropdown portal yönetimi
│ │ ├── useDropdownState.ts # Dropdown durumu
│ │ ├── useForm.ts # Form yönetimi (Zod entegrasyonu)
│ │ ├── useLocalStorage.ts # LocalStorage hook'u
│ │ ├── useLocale.ts # Çoklu dil desteği
│ │ ├── useScrollbarCompensation.ts # Scrollbar telafisi
│ │ ├── useTheme.ts # Tema yönetimi
│ │ └── useTokenManager.ts # Token yönetimi
│ ├── lib/ # Yardımcı kütüphaneler
│ │ ├── locale-utils.ts # Dil yardımcıları
│ │ ├── utils.ts # Genel yardımcı fonksiyonlar
│ │ └── validations/ # Form validasyon şemaları
│ │ └── auth.ts # Authentication validasyonları
│ ├── locales/ # Çoklu dil desteği
│ │ ├── en/ # İngilizce çeviriler
│ │ ├── tr/ # Türkçe çeviriler
│ │ └── index.ts # i18n yapılandırması
│ ├── providers/ # React context sağlayıcıları
│ │ ├── AuthProvider.tsx # Authentication context
│ │ ├── ClientProviders.tsx# Client-side provider wrapper
│ │ └── TokenManagerProvider.tsx # Token yönetim context
│ ├── services/ # API ve servis katmanları
│ │ ├── apiService.ts # Ana API servisi
│ │ ├── apiSlice.ts # RTK Query API slice
│ │ ├── authService.ts # Authentication servisleri
│ │ ├── constants.ts # API sabitleri
│ │ ├── tokenManager.ts # Token yönetim servisi
│ │ └── utils.ts # Servis yardımcıları
│ ├── store/ # Redux Toolkit store
│ │ ├── slices/ # Redux slice'ları
│ │ │ ├── langSlice.ts # Dil durumu
│ │ │ ├── loadingSlice.ts# Yükleme durumu
│ │ │ ├── themeSlice.ts # Tema durumu
│ │ │ ├── toastSlice.ts # Toast bildirimleri
│ │ │ └── userSlice.ts # Kullanıcı durumu
│ │ ├── index.ts # Store yapılandırması
│ │ └── types.ts # Store tip tanımları
│ ├── types/ # TypeScript tip tanımları
│ │ └── index.ts # Genel tip tanımları
│ ├── utils/ # Yardımcı fonksiyonlar
│ │ └── security.ts # Güvenlik yardımcıları
│ ├── index.ts # Ana export dosyası
│ └── middleware.ts # Next.js middleware
├── public/ # Statik dosyalar
│ ├── favicon.svg # Site ikonu
│ ├── robots.txt # Robot yönergeleri
│ └── site.webmanifest # PWA manifest
├── next.config.mjs # Next.js yapılandırması
├── tailwind.config.mjs # Tailwind CSS yapılandırması
├── postcss.config.mjs # PostCSS yapılandırması
├── tsconfig.json # TypeScript yapılandırması
├── package.json # Proje bağımlılıkları
└── README.md # Bu dosya
npx create-starkon-template my-app
cd my-app
# Bağımlılıkları yükle
npm install
# GeliĹźtirme sunucusunu baĹźlat
npm run dev
`Tarayıcıda http://localhost:3000 adresini aç`
# Production build
npm run build
# Production sunucusunu baĹźlat
npm start
# Kod kalitesi kontrolĂĽ
npm run lint
# TypeScript kontrolleri
npm run type-check
# Kod formatlaması
npm run prettier
### Ana Sayfalar
- `/` - Landing page
- `/dashboard` - Kullanıcı dashboard'u (korumalı)
- `/components` - Component showcase (korumalı)
- `/settings` - Kullanıcı ayarları (korumalı)
### Authentication
- `/auth/login` - Giriş sayfası
Admin: admin@example.com / Admin123!
User: user@example.com / User123!
Demo: demo@example.com / Demo123!
Component showcase sayfası (`/components`) tüm mevcut bileşenleri interaktif olarak sunar:
- Gerçek zamanlı preview
- Kod örnekleri
- Props dokĂĽmantasyonu
- Kullanım senaryoları
- Filtreleme ve arama
tailwind.config.mjs dosyasında renk paleti ve tasarım sistemini özelleştirebilirsiniz:
// Özel renkler tanımlama
colors: {
primary: {
50: 'hsl(var(--primary-50))',
// ... diÄźer tonlar
}
}
src/locales/ altında yeni dil klasörü oluşturuntranslation.json dosyasını çevirinsrc/lib/locale-utils.ts dosyasında dili SUPPORTED_LOCALES'a ekleyinsrc/components/core/ altında component klasörü oluşturunsrc/index.ts dosyasından export edinsrc/data/componentDemoData.tsx dosyasına demo ekleyinProje mock authentication kullanır, ancak gerçek API entegrasyonu için:
src/config/api.ts dosyasında API URL'lerini güncelleyinsrc/services/apiSlice.ts dosyasında endpoint'leri tanımlayınsrc/hooks/useAuth.ts dosyasında güncelleyinnpm install -g vercel
vercel
npm run build
# out/ klasörünü Netlify'a yükleyin
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)MIT License - detaylar için LICENSE dosyasına bakın.
FAQs
Create a Next.js project with Starkon Template
We found that starkon-template demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket researchers identified a malicious Chrome extension that manipulates Raydium swaps to inject an undisclosed SOL transfer, quietly routing fees to an attacker wallet.
Research
/Security News
Another wave of Shai-Hulud campaign has hit npm with more than 500 packages and 700+ versions affected.
Product
Add real-time Socket webhook events to your workflows to automatically receive software supply chain alert changes in real time.