OPLOG App Builder

OPLOG ekibi icin fullstack uygulama gelistirme template'i.
React 19 + Hono.js + Cloudflare Workers. Tek komutla calistir, tek komutla deploy et.

---

Ozellikler

• Tek komut - npm run dev ile frontend + backend ayni anda calisir
• 46 UI bileşen - shadcn/ui tum bilesenleri onceden yuklu
• DataGrid - DiceUI ile Excel-benzeri duzenlenebilir tablolar
• Grafikler - Recharts 3 ile interaktif bar, area, pie, stacked chart
• PWA - Mobilde "Ana Ekrana Ekle" ile native uygulama deneyimi
• Dark Mode - Acik/koyu/sistem tema destegi
• CI/CD - GitHub Actions ile git push = otomatik deploy
• Claude Code uyumlu - CLAUDE.md ile AI destekli gelistirme

Teknoloji Stack

Katman	Teknoloji	Aciklama
Frontend	React 19, TypeScript	UI gelistirme
Stil	Tailwind CSS 4, shadcn/ui	46 hazir bilesen, dark mode
Backend	Hono.js	Hafif API framework
Altyapi	Cloudflare Workers	Global edge deploy
Veri	TanStack Query	Cache ve senkronizasyon
Form	React Hook Form + Zod	Validasyonlu form yonetimi
Tablo	DiceUI DataGrid	Excel-benzeri duzenlenebilir grid
Grafik	Recharts 3	Interaktif chart'lar
Bildirim	Sonner	Toast bildirimleri
Ikon	Lucide React	1000+ ikon

Hizli Baslangic

# Klonla ve baslat
git clone git@github.com:oplog/oplog-boilerplate.git
cd oplog-boilerplate
npm install
npm run dev

Tarayicida http://localhost:5173 adresini ac.

Komutlar

Komut	Aciklama
npm run dev	Gelistirme sunucusunu baslatir
npm run build	Production build olusturur
npm run deploy	Cloudflare Workers'a deploy eder
npm run cf-typegen	Cloudflare binding type'larini olusturur

Proje Yapisi

src/
├── client/                     # Frontend (React)
│   ├── components/
│   │   ├── layout/             # Sidebar, Header (shadcn Sidebar pattern)
│   │   ├── shared/             # PageHeader, Loading, ErrorBoundary
│   │   ├── ui/                 # shadcn/ui bilesenleri (46 adet)
│   │   └── data-grid/          # DiceUI DataGrid bilesenleri
│   ├── hooks/                  # use-api, use-data-grid, use-mobile
│   ├── pages/                  # Sayfa bilesenleri
│   │   └── examples/           # Form, Tablo, Grafik, DataGrid ornekleri
│   ├── router.tsx              # Route tanimlari
│   └── index.css               # Tema ve global stiller
└── worker/                     # Backend (Hono.js)
    ├── routes/                 # API endpoint'leri
    └── index.ts                # Hono giris noktasi

Deploy

# Ilk seferlik: Cloudflare hesabina giris
npx wrangler login

# Deploy et
npm run deploy

CI/CD ile Otomatik Deploy

main branch'e push yapildiginda GitHub Actions otomatik deploy eder.

Kurulum: GitHub repo > Settings > Secrets > CLOUDFLARE_API_TOKEN ekle.

Claude Code ile Kullanim

Proje CLAUDE.md dosyasi ile Claude Code'a optimize edilmistir. Terminal'de claude yazarak basla:

> "Musteri listesi sayfasi olustur, tablo ile goster"
> "Siparisler icin API endpoint'i yaz"
> "Dashboard'a son 30 gunun grafigini ekle"
> "Formu mavi renk yap ve tarih secici ekle"

Dokumantasyon

Dokuman	Aciklama
CLAUDE.md	AI destekli gelistirme rehberi
Baslangic	Ilk kurulum adimlari
Sayfa Ekleme	Yeni sayfa ekleme
API Ekleme	Yeni API endpoint ekleme
Deploy	Cloudflare deploy
Ornek Prompt'lar	Claude Code komut ornekleri

Lisans

OPLOG ic kullanim icin gelistirilmistir.