İstanbul Sağlık ve Teknoloji Üniversitesi Bilgisayar Mühendisliği mezuniyet töreni için özel olarak geliştirilmiş hatıra defteri web uygulaması.
Bu uygulama, mezuniyet töreninde arkadaşlarınızın size özel mesajlar yazabilmesi için tasarlanmış modern bir web platformudur. Kullanıcılar kendi hatıra defterlerini oluşturabilir, davet linkleri paylaşabilir ve arkadaşlarından gelen mesajları görüntüleyebilir.
- İSTÜN E-posta Kontrolü: Sadece @istun.edu.tr uzantılı e-posta adresleri ile kayıt
- E-posta Doğrulama: Kayıt sonrası otomatik e-posta doğrulama sistemi
- Güçlü Şifre Kuralları: En az 6 karakter, harf, rakam ve özel karakter gereksinimleri
- Anlık Şifre Doğrulama: Kayıt sırasında şifre gereksinimlerinin canlı kontrolü
- Emoji Seçimi: Her mesajla birlikte 3 adet emoji seçimi
- Sürpriz Açılış: Mesajlar ve gönderen bilgileri sürpriz olarak açılır
- Zamanlı Açılış: Tüm sürpriz mesajlar belirli bir tarihte açılır
- Geri Sayım Timer: Açılış tarihine kadar canlı geri sayım
- Kalıcı Durum: Açılan mesajlar localStorage ile hatırlanır
- QR Kod Oluşturma: Davet linkleri için otomatik QR kod üretimi
- Responsive Tasarım: Mobil ve masaüstü tamamen uyumlu
- Modern Animasyonlar: Fade-in, slide-down, gradient efektleri
- Glassmorphism Tasarım: Modern cam efektli UI elementleri
- Canlı Arayüz: Gradient arka planlar ve hover efektleri
- Benzersiz Davet Linkleri: Her kullanıcı için özel link oluşturma
- Link Kopyalama: Tek tıkla link kopyalama özelliği
- QR Kod Paylaşımı: Davet linkini QR kod olarak paylaşma
- Anlık Bildirimler: Kopyalama ve işlem onayları
- Mesaj İstatistikleri: Toplam mesaj ve benzersiz gönderen sayısı
- Profil Yönetimi: Kullanıcı profil bilgileri düzenleme
- Gerçek Zamanlı Güncellemeler: Firebase ile anlık veri senkronizasyonu
- React 19: Modern React özellikleri ile geliştirilmiş
- Vite: Hızlı geliştirme ve build araç
- Tailwind CSS: Utility-first CSS framework
- React Router DOM: SPA routing yönetimi
- React Hook Form: Form yönetimi ve validasyon
- Firebase Authentication: Kullanıcı kimlik doğrulama
- Firestore: NoSQL gerçek zamanlı veritabanı
- Firebase Hosting: Web hosting (opsiyonel)
- Lucide React: Modern ikon seti
- React Markdown: Markdown içerik render
- QRCode: QR kod oluşturma kütüphanesi
- ESLint: Kod kalitesi kontrolü
- PostCSS: CSS işleme
- Autoprefixer: CSS vendor prefix'leri
-
Projeyi klonlayın:
git clone <repository-url> cd istun-diary-frontend
-
Bağımlılıkları yükleyin:
npm install
-
Firebase konfigürasyonu:
.envdosyasını oluşturun- Firebase proje bilgilerinizi ekleyin:
VITE_FIREBASE_API_KEY=your_api_key VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com VITE_FIREBASE_PROJECT_ID=your_project_id VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id VITE_FIREBASE_APP_ID=your_app_id
-
Uygulamayı başlatın:
npm run dev
- Kayıt Ol sekmesine tıklayın
- Ad, Soyad bilgilerinizi girin
- @istun.edu.tr uzantılı e-posta adresinizi girin
- Güçlü şifre oluşturun (en az 6 karakter, harf, rakam, özel karakter)
- Şifre gereksinimlerinin yeşil tik aldığını kontrol edin
- Kayıt Ol butonuna tıklayın
- E-posta adresinize gelen doğrulama linkine tıklayın
- Giriş Yap ile sisteme giriş yapın
- Dashboard'da "Davet Linki Oluştur" butonuna tıklayın
- Oluşan linki kopyala butonuyla panoya kopyalayın
- Alternatif olarak QR Kod butonuyla QR kodu oluşturun
- Davet linkini veya QR kodu arkadaşlarınızla paylaşın
- Arkadaşınızın davet linkine tıklayın veya QR kodu okutun
- Ad ve Soyad bilgilerinizi girin
- 3 adet emoji seçin (arkadaşlığınızı temsil eden)
- Mesajınızı yazın (Markdown formatı desteklenir)
- Önizleme ile mesajınızı kontrol edin
- "Mesajı Gönder" butonuna tıklayın
- Geri sayım tarihini bekleyin
- Geri sayım tamamlandığında kutlama mesajı görünecek
- Mesajlarınızın yanındaki "Sürprizi Aç!" butonuna tıklayın
- Gönderen adı, emojiler ve mesaj sürpriz olarak açılacak
- Açılan mesajlar kalıcı olarak görünür kalacak
- Firebase Console'da yeni proje oluşturun
- Authentication'ı etkinleştirin ve Email/Password provider'ını açın
- Firestore Database oluşturun
- Web uygulaması ekleyin ve config bilgilerini alın
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Users collection - Kullanıcı profilleri
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
allow read: if request.auth != null;
}
// Entries collection - Hatıra defteri mesajları
match /entries/{entryId} {
allow read: if request.auth != null &&
(request.auth.uid == resource.data.authorId ||
request.auth.uid == resource.data.recipientId);
allow create: if request.auth != null &&
request.auth.uid == request.resource.data.authorId &&
// Emoji array kontrolü
request.resource.data.emojis is list &&
request.resource.data.emojis.size() == 3 &&
// isRevealed field kontrolü
request.resource.data.isRevealed == false;
allow update: if request.auth != null &&
request.auth.uid == resource.data.recipientId &&
// Sadece isRevealed field'ını güncellemeye izin ver
request.resource.data.keys().hasOnly(['isRevealed']) &&
request.resource.data.isRevealed == true;
}
}
}{
uid: "user_id",
email: "user@istun.edu.tr",
firstName: "Ad",
lastName: "Soyad",
inviteCode: "unique_invite_code",
createdAt: timestamp
}{
id: "entry_id",
authorId: "sender_user_id",
recipientId: "recipient_user_id",
senderName: "Gönderen Adı Soyadı",
message: "Mesaj içeriği (Markdown destekli)",
emojis: ["😊", "🎉", "❤️"], // Tam 3 adet emoji
isRevealed: false, // Sürpriz açılış durumu
createdAt: timestamp
}- Ana Renk:
#aa2d3a(İSTÜN kurumsal kırmızısı) - Gradient Temalar: Purple/indigo (geri sayım), green/emerald (başarı), pink (mesajlar)
- Glassmorphism: Şeffaf cam efektli kartlar
- Modern Gradients: Dinamik arka plan geçişleri
- Fade-in: Sayfa yüklenme efektleri
- Slide-down: Mobil menü animasyonları
- Hover Efektleri: Buton ve kart etkileşimleri
- Bounce: Emoji animasyonları
- Shimmer: Yükleme efektleri
- Mobile-first: Önce mobil, sonra desktop yaklaşımı
- Breakpoints: sm, md, lg, xl responsive noktaları
- Flexible Grid: CSS Grid ve Flexbox kullanımı
- Touch-friendly: Mobil dokunmatik optimizasyonu
# Build komutu
npm run build
# Netlify _redirects dosyası (public/ klasöründe mevcut)
/* /index.html 200# Firebase CLI kurulumu
npm install -g firebase-tools
# Giriş yapın
firebase login
# Projeyi başlatın
firebase init hosting
# Deploy edin
firebase deploy- İSTÜN e-posta doğrulama sistemi
- Güçlü şifre gereksinimleri ve canlı validasyon
- Sürpriz mesaj sistemi (emoji seçimi ile)
- Zamanlı mesaj açılış sistemi
- Geri sayım timer'ı
- QR kod oluşturma ve paylaşım
- Responsive tasarım ve modern animasyonlar
- Glassmorphism UI tasarımı
- LocalStorage ile kalıcı mesaj durumu
Bu proje İstanbul Sağlık ve Teknoloji Üniversitesi Bilgisayar Mühendisliği mezuniyet töreni için özel olarak geliştirilmiştir.