İlk Değişikliği Yapmak

Bu kılavuz, projede ilk kez değişiklik yapan geliştiriciler için gerçek bir senaryo sunar: footer’daki copyright metnini güncellemek. Hangi dosyaya dokunulacağı, adımlar ve nasıl test edileceği aşağıda özetlenir. Yeni Geliştirici Onboarding sayfasında da aynı senaryo kısaca anlatılır.

---

Amaç

Küçük bir UI değişikliği yaparak dosya düzenleme → kaydetme → tarayıcıda doğrulama akışını tecrübe etmek. Böylece yerel ortamın çalıştığını ve HMR (Hot Module Replacement) ile değişikliğin anında yansıdığını doğrularsınız.

---

Senaryo: Footer copyright metnini güncellemek

Yapılacak iş: Footer’daki “© 2026 Coursio, Inc.” metnini değiştirmek (örneğin kısaltmak veya “Geliştirme ortamı” gibi bir ek metin eklemek).

---

Hangi dosya?

Dosya	Açıklama
app/components/Footer.tsx	Footer bileşeni; copyright metni alt kısımda (satır ~149–151).

---

Adımlar

1. Uygulamanın çalıştığından emin olun. Proje kökünde npm run dev çalışıyor olmalı; tarayıcıda http://localhost:5173/tr (veya /en) açılabiliyor olmalı.

2. Dosyayı açın: app/components/Footer.tsx

3. Copyright metnini bulun. Alt kısımda şu blok yer alır:

   <span className="text-xs text-slate-500 font-medium">
     © 2026 Coursio, Inc.
   </span>

4. Değişiklik yapın. Örneğin:

   • Metni kısaltın: © 2026 Coursio
   • Veya ek metin ekleyin: © 2026 Coursio — Geliştirme ortamı

5. Kaydedin (Ctrl+S / Cmd+S).

6. Tarayıcıda doğrulayın. Sayfayı yenileyin (veya HMR ile otomatik yenilenecektir); sayfayı aşağı kaydırarak footer’da yeni metni gördüğünüzü kontrol edin. Farklı dil sayfalarında (örn. /tr, /en) da aynı bileşen kullanıldığı için footer orada da güncel görünür.

---

Nasıl test edilir?

• Yerel: npm run dev çalışırken değişikliği kaydedin; HMR ile sayfa yenilenir. Ana sayfa, kurs listesi vb. herhangi bir sayfada footer görünür; aşağı kaydırarak kontrol edin.
• PR (isteğe bağlı): Değişikliği bir branch’te yapıp PR açabilirsiniz; commit mesajı örneği: fix: footer copyright metnini güncelle.

---

Sonraki adımlar

Bu senaryoyu tamamladıktan sonra:

• Proje Yapısı (Detaylı) ile hangi dosyaların nereye ait olduğunu,
• Kod Konvansiyonları ve Standartlar ile isimlendirme ve loader/action kullanımını,
• Route Haritası ile tüm URL’leri

inceleyebilirsiniz. Daha karmaşık bir değişiklik (yeni sayfa, API, GraphQL mutation) için ilgili mimari sayfaya bakın.