Tebrikler, Frontend konularını tamamladın. Backend konularına geçmeden, şimdiye kadar öğrendiğin her konuyu kullanarak, kişisel web sayfası yapacaksın. Yaptığın siteyi kendi profil sayfanda da yayınlayacaksın. Bu senin Frontend konusunda ne seviyede olduğunu gösterecek.

Workintech programını tamamladığında, görüştüğün şirketler yaptığın bu projeye de bakacaklar. O yüzden öğrendiğin her konuyu kullanmaya çalışman önemli. Projeni, tam çalışır durumda, gramer hatası olmayan bir proje yapmanı tavsiye ederiz.

S12 içinde de Workintech eğitmenlerine, adeta bir teknik mülakttaymış gibi, bu projeyi sunmanı istiyoruz. Bu sunumda, 4 dk içerisinde, CSS'e döktüğün arayüzü ve de geliştirdiğin Reach JS sistemi anlatacaksın. İlk önce arayüzde nasıl bir kullanıcı deneyimi sunduğunu kısaca özetleyip, sonra altta kodların nasıl çalıştığını, nasıl bir veri akışı kurduğunu, açık bir şekilde ifade edebilmelisin.

Kısaca: 4 dk içinde, önce arayüzü anlatıp, sonra kodun nasıl çalıştığını ifade edebilmelisin. Zaman kullanımı ve sunum tekniğin de değerlendirme kriterlerinde yer alıyor. Öncesinde, kendini videoya çekerek, sunum pratiği yapabilirsin.

Not* Bu dökümanın en sonunda da, sunumda seni değerlendireceğimiz başlıkları da bulabilirsin.

• npx create-react-app web-sayfam komutuyla boş bir çalışma başlatabilirsin.

• Oluşturulan web-sayfam klasörüne gir.

• npm i kullanarak, gerekli gördüğün kütüphaneleri projene ekleyebilirsin. Örneğin:

• axios

• yup

• toastify

• tailwind

• cypress.io v.b.

Bu bağlantıda 3 farklı tasarım var. Hangisini beğenirsen onu kullanabilirsin. CSS stillerini ve HTML/JSX iskeletini geliştirirken, tasarımı bire bir yaptığını emin olana kadar kesinlikle özelleştirmemeni tavsiye ediyoruz.

• Tasarımdaki her bir section için ayrı bir component oluşturun.
• Her component'in style'ını ayarlayın.
• Verilerinizi kendi oluşturduğunuz, mock (örnek) verileri statik bir js dosyasından çekin.
• axios ve reqres.in gibi bir servisle, web API simüle et.
• Dark Mode tasarımı da entegre edin.
• Türkçe-İngilizce içerik oluşturun.
• Responsive özelleştirmelerini yapın.

• Tasarımı birebir uygulamalısın.
  • Resimleri ve projeleri kendi projelerinle güncelleyebilirsin. Yine de kesinlikle renkler ve yerleşimde değişiklik istemiyoruz.
  • Sunumdan sonra dilersen sonrasında kendi portföyün için özelleştirebilirsin.
  • Mobil ve tablet gibi farklı cihaz boyutları için, tasarımda biraz değişiklik insiyatif kullanmak zorunda kalabilirsin
• Axios ile API request simple etmelisin.
  • https://reqres.in/api/workintech veya benzeri ücretsiz bir mock api servisine, axios ile POST ile kendi datanızı atıp, gelen mock datayı arayüze basabilirsin.

Böylece backende geçince de yönetim paneli yazıp, hem kod kalitesi hem yapabildiğiniz her şeyi tek projede birleştirmiş olacaksınız.

graph LR
A((Start)) -->B{Dil?}-- EN --> C([EN Mock Data])
A --> G{Renk?}
B-- TR --> D([TR Mock Data])
C --> E[Axios] -- POST --> I([Mock API])
I -- Response --> E --> F((Uygulama))
G -- Açık/Koyu --> H([Görsel Değişiklik]) --> F
D --> E

Projenizi vercel'de yayınlayın.

Öncesinde geliştirdiğiniz bütün projelerin de vercel'deki linklerini eklediğinize dikkat edin.

Frontend'de ne kadar yetenekli olduğunu, hünerlerini göstermek için ekstra yapabileceklerin.

• Site ilk açıldığında, kullanıcın görünüm tercihini okuyup, ona göre dil ve renk temasını aktifleştirebilirsin. Kullanıcı tercihini, tarayıcı belleğine (localstorage) kaydedebilirsin.
  • Dark Mode geliştirmesi,
  • Türkçe/İngilizce içerik ve dil seçimi.