Bu proje, Workintech Full Stack Developer eğitim maratonu kapsamında geliştirilmiş, modern web standartlarını ve yasal veri koruma regülasyonlarını temel alan ileri seviye bir giriş (Login) sistemi uygulamasıdır.
Uygulama, sadece bir kullanıcı girişi sağlamakla kalmaz; aynı zamanda istemci tarafında veri güvenliği, dinamik form yönetimi ve yasal uyumluluk (compliance) süreçlerini optimize edilmiş bir React mimarisiyle sunar.
Günümüz yazılım dünyasında, kullanıcı verilerinin izinsiz işlenmesi (KVKK/GDPR ihlalleri) ciddi hukuki ve mali riskler taşımaktadır. Bu proje, bir işletmenin backend maliyetlerini (gereksiz API istekleri) azaltmayı ve yasal rıza metni onay mekanizmalarını yazılımın kalbine yerleştirmeyi amaçlayan bir çözüm senaryosu üzerine kurulmuştur.
- Frontend Validation: Hatalı verilerin sunucuya ulaşmasını engelleyerek kaynak tasarrufu sağlamak.
- Legal Compliance: Kullanıcının açık rızası (Explicit Consent) alınmadan hiçbir veri işleminin başlatılmamasını garanti altına almak.
- User Experience (UX): Kullanıcıya anlık geri bildirim vererek form doldurma sürecini hatasız tamamlatmak.
- React (v17/18): State yönetimi (
useState) ve yaşam döngüsü metodları (useEffect) ile asenkron süreçlerin kontrolü. - Reactstrap & Bootstrap: Erişilebilirlik (Accessibility) standartlarına uygun, responsive UI bileşenleri.
- Axios: Promise tabanlı HTTP istemcisi ile API haberleşmesi.
- React Router DOM: Login sonrası güvenli yönlendirme (routing) mantığı.
- Regex (Regular Expressions): RFC 5322 standartlarına uygun e-posta format doğrulaması.
- Input Sanitization:
.trim()metotları ile kullanıcı girdilerinin temizlenmesi. - State-Driven Logic: Formun geçerlilik durumuna (isValid) bağlı olarak buton aktiflik/pasiflik kontrolü.
Kullanıcı, "Kullanım Koşulları ve Gizlilik Politikası" metnini onaylamadığı sürece "Sign In" butonu disabled durumunda kalır. Bu, yazılımın yasal regülasyonlara (GDPR/KVKK) teknik düzeyde uyum sağladığını gösterir.
- Email: Kullanıcı yazarken e-posta formatı kontrol edilir. Hata durumunda
FormFeedbackbileşeniyle uyarı mesajı gösterilir. - Password: Güvenlik politikası gereği minimum 4 karakter sınırı uygulanır.
- Hata Görselleştirmesi: Geçersiz alanlar otomatik olarak kırmızı (invalid) çerçeve ile işaretlenir.
- MockAPI: Gerçek bir backend'i simüle eden endpoint yapısı.
- User Matching: Gelen veri seti içerisinde
findmetodu ile güvenli eşleştirme ve başarılı giriş sonrası ana sayfaya (/main) yönlendirme.
src/
┣ components/
┃ ┗ Login.js # Ana form bileşeni ve validasyon mantığı
┣ App.js # Router ve uygulama ana çatısı
┣ index.js # React render süreci
┗ styles/ # Özel CSS ve Bootstrap özelleştirmeleri
## Projeyi lokal ortamda çalıştırmak için:
npm install
npm run dev