TRON DAO - Çarkı Çevir Uygulaması

TRON DAO sponsorlu etkinlikte "Çarkı Çevir - Hediyeni Kap" uygulaması. Kullanıcılar 5 görevi tamamlayıp e-postalarını girdikten sonra çarkı çevirebilirler.

Özellikler

• ✅ 5 zorunlu sosyal medya görevi
• ✅ E-posta toplama ve KVKK onayı
• ✅ SVG tabanlı çark animasyonu
• ✅ LocalStorage ile veri saklama
• ✅ Admin paneli (PIN korumalı)
• ✅ CSV dışa aktarım
• ✅ Mobil uyumlu tasarım
• ✅ Framer Motion animasyonları

Teknoloji Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Styling: TailwindCSS
• Animations: Framer Motion
• Icons: Emoji (native)
• Storage: LocalStorage

Kurulum

1. Bağımlılıkları yükleyin:

npm install

2. Ortam değişkenlerini ayarlayın:

# .env dosyası oluşturun
VITE_ADMIN_PIN=4782

3. Geliştirme sunucusunu başlatın:

npm run dev

4. Tarayıcıda http://localhost:3000 adresini açın.

Build ve Deploy

# Production build
npm run build

# Preview
npm run preview

Vercel Deploy

1. Vercel CLI ile hızlı deploy:

# Vercel CLI'yi yükleyin
npm i -g vercel

# Projeyi deploy edin
vercel

# Production'a deploy edin
vercel --prod

2. Vercel Dashboard ile deploy:

   • Vercel hesabınıza giriş yapın
   • GitHub repository'nizi bağlayın
   • Framework Preset: Vite seçin
   • Build Command: npm run build (otomatik)
   • Output Directory: dist (otomatik)
   • Environment Variables: VITE_ADMIN_PIN=4782 ekleyin
   • Deploy edin

3. Otomatik Deploy:

   • vercel.json dosyası zaten yapılandırılmış
   • GitHub'a push yaptığınızda otomatik deploy olur

Kullanım

Kullanıcı Akışı

1. Görevleri Tamamla: 5 sosyal medya görevini tamamlayın
2. E-posta Gir: Geçerli e-posta adresinizi girin
3. KVKK Onayı: KVKK metnini kabul edin
4. Çarkı Çevir: Çarkı çevirerek ödülünüzü kazanın

Admin Paneli

• Sağ üst köşedeki "Admin" butonuna tıklayın
• PIN: 4782 (varsayılan)
• Kayıtları görüntüleyin, CSV indirin veya verileri temizleyin

Görevler

1. Çankaya Blockchain Instagram: Takip Et
2. Çankaya Blockchain X: Takip Et
3. TRON DAO Instagram: Takip Et
4. TRON DAO X: Takip Et
5. Tweet Paylaş: #TRONDAO8 #Turkey #sTRONg

Ödüller

• 🖱️ Mousepad
• 🧦 Çorap Seti
• 🎒 Çanta

Dosya Yapısı

src/
├── components/          # React bileşenleri
│   ├── AdminPanel.tsx
│   ├── EmailCapture.tsx
│   ├── Header.tsx
│   ├── PrizeModal.tsx
│   ├── ProgressSteps.tsx
│   ├── TaskItem.tsx
│   └── Wheel.tsx
├── lib/                # Yardımcı fonksiyonlar
│   ├── csv.ts
│   ├── i18n.ts
│   ├── random.ts
│   └── storage.ts
├── pages/              # Sayfa bileşenleri
│   └── App.tsx
├── config.ts           # Uygulama konfigürasyonu
├── index.css           # Global stiller
└── main.tsx            # Uygulama giriş noktası

Konfigürasyon

src/config.ts dosyasından uygulama ayarlarını değiştirebilirsiniz:

• Organizatör ve sponsor bilgileri
• Sosyal medya linkleri
• Ödül listesi
• Çark animasyon ayarları
• Admin PIN

Güvenlik

• Admin paneli PIN ile korunmuştur
• E-posta adresleri sadece etkinlik iletişimi için kullanılır
• Sosyal medya hesaplarına erişim yok, sadece yönlendirme

Lisans

Bu proje TRON DAO etkinliği için geliştirilmiştir.

Destek

Herhangi bir sorun yaşarsanız, lütfen GitHub Issues bölümünden bildirin.