Giriş
İster programlamada yeni olun, ister deneyimli bir geliştirici olun. Bu sektörde yeni kavramlar ve diller/çerçeveler öğrenmek, hızlı değişimlere ayak uydurmak zorunludur. Örneğin, Facebook tarafından açık kaynaklı olan React’i ele alalım, son 6 yıl içinde tüm dünyadaki JavaScript geliştiricilerinin bir numaralı tercihi haline geldi. Ama aynı zamanda Vue ve Angular’ın da tabii ki meşru takipçi tabanı var. Svelte ve Next.js, Nuxt.js ve Gatsby ve Gridsome ve Quasar ve b. gibi evrensel çerçeveler var. Uzman bir JavaScript geliştiricisi olarak öne çıkmak istiyorsanız, ödevinizi iyi, eski JS ile yapmanın yanı sıra, en azından farklı çerçeveler ve kitaplıklarda biraz deneyime sahip olmalısınız.
Front-End ustası olmanıza yardımcı olmak için, her biri ayrı bir konuya ve farklı bir JavaScript çerçevesine veya kitaplığına sahip 9 farklı proje topladık ve bu projeyi oluşturup portfolionuza ekleyebileceğiniz bir teknoloji yığını oluşturduk. Unutmayın, hiçbir şey size gerçekten bir şeyler inşa etmekten daha fazla yardımcı olmaz, o yüzden devam edin, zihninizi keskinleştirin ve bunu gerçekleştirin!
React kullanarak bir film arama uygulaması oluşturun
Başlayabileceğiniz ilk proje React kullanarak bir film arama uygulaması oluşturmaktır. Aşağıda final uygulamanın nasıl görünebileceğine dair bir görüntü var:
Öğrenecekleriniz
Bu uygulamayı oluşturarak Hooks API’ni kullanarak React becerilerinizi geliştireceksiniz. Bu proje, React bileşenlerini, harici bir API’yi ve tabii ki CSS aracılığıyla bazı stillerden yararlanır.
Teknik Yığın & Özellikler
- React, kancalarla birlikte
- create-react-app
- JSX
- CSS
Hiçbir sınıf kullanmadan, bu proje size fonksiyonel React’e mükemmel bir giriş noktası sağlar ve 2022’de size kesinlikle yardımcı olacaktır. Örnek projeyi burada bulabilirsiniz: https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
Rehberi takip edin ya da kendi zevkinize göre şekillendirin!
Vue ile bir sohbet uygulaması oluşturun
Sizler için bir başka harika proje; en sevdiğim JavaScript kütüphanesi VueJS’yi kullanarak bir sohbet uygulaması oluşturmaktır. Uygulama buna benzer bir şekilde görünecektir:
Öğrenecekleriniz
Bu eğitimin ardından, sıfırdan bir Vue uygulamasını nasıl kuracağınızı, bileşenleri nasıl oluşturacağınızı, durumu nasıl yöneteceğinizi, rotaları nasıl oluşturacağınızı, üçüncü taraf bir hizmete nasıl bağlanacağınızı ve hatta kimlik doğrulamayı nasıl yapacağınızı öğreneceksiniz.
Teknik Yığın & Özellikler
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Bu, Vue ile başlamak veya mevcut becerilerinizi geliştirmek için gerçekten harika bir proje. Rehberi burada bulabilirsiniz: https://www.sitepoint.com/pusher-vue-real-time-chat-app/
Angular 8 ile şık bir hava durumu uygulaması oluşturun
Bu örnek, Google’ın Angular 8’ini kullanarak güzel bir hava durumu uygulaması oluşturmanıza yardımcı olacaktır. Uygulama bu şekilde görünebilir:
Öğrenecekleriniz
Bu proje size sıfırdan bir uygulama oluştururken, tasarımdan başlayarak üretime hazır bir dağıtıma kadar geliştirme konusunda değerli beceriler kazandıracaktır.
Teknik Yığın & Özellikler
- Angular 8
- Firebase
- Server-side rendering
- Grid Layout ve Flexbox ile CSS
- Mobil uyumlu ve hızlı yanıt veren
- Karanlık mod (Dark mode)
- Güzel bir kullanıcı arayüzü
Bu kapsamlı proje hakkında gerçekten ama gerçekten sevdiğim şey, bazı şeyleri tek başına değil, tasarımdan son dağıtıma kadar tüm geliştirme sürecini öğreniyor olmanız. Bunu gerçekten yapmalısınız!
Svelte ile bir yapılacaklar listesi uygulaması oluşturun
Svelte; React, Vue ve Angular’a kıyasla daha yeni sayılır, ama yine de 2022’nin favori uygulamalarından biri. Tamam, Yapılacaklar listesi uygulamaları piyasadaki en popüler konu değil, ama bu, Svelte becerilerinizi geliştirmenize ve uygulamanın böyle görünmesine yardımcı olacak:
Öğrenecekleriniz
Bu rehber size baştan sona Svelte 3 kullanarak nasıl bir uygulama yapacağınızı anlatacak. Bileşenleri, stilleri ve olay işleyicilerini kullanır.
Teknik Yığın & Özellikler
- Svelte 3
- Components (bileşenler)
- CSS aracılığıyla şekillendirme
- ES 6 sözdizimi
Pek fazla iyi Svelte başlangıç projesi yok, bu yüzden bunu başlangıç için iyi buluyorum. Kim bilir, belki de bu yazının gelecek yılki versiyonunda sunulacak daha kapsamlı bir Svelte eğitimi hazırlayan kişi sizsinizdir 🙂
Next.js ile bir e-ticaret alışveriş sepeti oluşturun
Next.js, sunucu tarafı oluşturmayı destekleyen React uygulamaları oluşturmak için kullanılan en popüler çerçevedir. Bu proje size alttakine benzeyen bir e-ticaret alışveriş sepetinin nasıl oluşturulacağını gösterecektir:
Öğrenecekleriniz
Bu projede, Next.js geliştirme ortamını nasıl kuracağınızı, yeni sayfalar ve bileşenler oluşturmayı, veri almayı, stil oluşturmayı ve bir Next uygulamasını nasıl devreye alacağınızı öğreneceksiniz.
Teknik Yığın & Özellikler
- Next.js
- Bileşenler (Components) ve sayfalar (Pages)
- Veri Alma (Data Fetching)
- Stil oluşturma
- Dağıtım
- SSR ve SPA
Yeni bir şeyler öğrenmek için e-ticaret vitrini gibi gerçek dünyadan bir örneğe sahip olmak her zaman harikadır. Rehberi burada bulabilirsiniz: https://snipcart.com/blog/next-js-ecommerce-tutorial
Nuxt.js ile tamamen gelişmiş, çok dilli bir blog web sitesi oluşturun
Next.js react için neyse Nuxt.js de Vue için odur. Sunucu tarafı işleme ve tek sayfalı uygulamaların gücünü birleştirmek için harika bir çerçeve. Oluşturabileceğiniz son uygulama şöyle görünecektir:
Öğrenecekleriniz
Bu örnek proje, ilk kurulumdan son dağıtıma kadar Nuxt.js kullanarak tam gelişmiş bir web sitesinin nasıl oluşturulacağını öğretecektir. Nuxt’un sayfalar ve bileşenler gibi sunduğu birçok harika özelliğin yanı sıra SCSS ile şekillendirmeyi de kullanır.
Teknik Yığın & Özellikler
- Nuxt.js
- Bileşenler (Components) ve sayfalar (Pages)
- Storyblok modülü
- Mixinler
- Durum yöneti̇mi̇ için Vuex
- Şekillendirme için SCSS
- Nuxt ara yazılımları (middlewares)
Bu sizin için gerçekten harika bir proje ve Nuxt.js’nin birçok harika özelliğini kapsıyor. Sizi daha iyi bir Vue geliştiricisi yapacağı için bunu gerçekten denemelisiniz.
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial
Gatsby ile bir blog oluşturun
Gatsby, React ve GraphQL kullanan harika bir statik site oluşturucudur. Altta gördüğünüz, söz konusu projenin ortaya çıkardığı sonuçtur:
Öğrenecekleriniz
Bu eğitimde, React ve GraphQL’i kullanırken kendi makalelerinizi yazmak için kullanabileceğiniz olağanüstü bir blog oluşturmak için Gatsby’den nasıl yararlanacağınızı öğreneceksiniz.
Teknik Yığın & Özellikler
- Gatsby
- React
- GraphQL
- Pluginler ve temalar
- MDX/Markdown
- Bootstrap CSS
- Şablonlar
Eğer bir blog açmak istiyorsanız, bunu React ve GraphQL kullanarak nasıl yapabileceğinizi gösteren harika bir örnek. WordPress’in her zaman kötü bir seçim olduğunu söylemiyorum, ancak Gatsby ile React kullanırken yüksek performanslı siteler oluşturabilirsiniz, ki bu harika bir kombinasyon.
https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc
Gridsome ile bir blog oluşturun
Gridsome Vue’ya… tamam, bunu Next/Nuxt ile zaten yapmıştık ama aynı şey Gridsome ve Gatsby için de geçerli. Her ikisi de veri katmanı olarak GraphQL kullanıyor, ancak Gridsome VueJS’den yararlanıyor. Ayrıca harika bloglar oluşturmanıza yardımcı olacak harika bir statik site oluşturucudur:
Öğrenecekleriniz
Bu proje size Gridsome, GraphQL ve Markdown ile başlangıç için basit bir blog oluşturmayı öğretecektir. Ayrıca uygulamanın Netlify aracılığıyla nasıl dağıtılacağını da kapsar.
Teknik Yığın & Özellikler
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Bu kesinlikle en ayrıntılı rehber değil, ancak Gridsome ve Markdown’un temel kavramlarını kapsıyor ve iyi bir başlangıç noktası olabilir.
https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome
Quasar ile SoundCloud benzeri bir müzik çalar uygulaması oluşturun
Quasar, mobil uygulamalar oluşturmak için de kullanılabilen başka bir Vue çerçevesidir. Bu projede, aşağıdaki şekilde görünen bir audio player uygulaması oluşturacaksınız:
Öğrenecekleriniz
Diğer projeler ağırlıklı olarak web uygulamalarına odaklanırken, bu proje size Quasar çerçevesi aracılığıyla Vue kullanarak bir mobil uygulamanın nasıl oluşturulacağını gösterecektir. Önceden android studio/xcode ile yapılandırılmış çalışan bir Cordova kurulumunuz olmalıdır. Eğer yoksa, eğitimde bunun nasıl kurulacağını gösteren quasar web sitesine bir bağlantı var.
Teknik Yığın & Özellikler
- Quasar
- Vue
- Cordova
- Wavesurfer
- Kullanıcı arayüzü (UI) bileşenleri
Mobil uygulamalar oluşturmak için Quasar’ın gücünü gösteren küçük bir proje.
Sonuç olarak
Bu makalede, her biri başka bir JavaScript çerçevesine veya kütüphanesine odaklanan, oluşturabileceğiniz 9 proje gösterdim. Seçim tamamen sizin: Daha önce kullanmadığınız bir framework kullanarak yeni bir şey mi deneyeceksiniz? Yoksa zaten biraz bilgi sahibi olduğunuz bir teknoloji için bir proje yaparak becerilerinizi güçlendirmek mi istiyorsunuz? Yoksa favori framework/kütüphanenize güvenip tüm projeleri onunla mı yapacaksınız?
Her ne yapmaya karar verirseniz verin, maceranızda size bol şans diliyoruz. Bunun gibi daha fazla makale için gözünüz yazilimkoyu.org’da olsun, yolda daha büyük projeler var 😉
