Açık kaynak, yazılımcılar için harika bir öğrenme yöntemidir. Bu makalede, açık kaynak projelerle React öğrenme ve kodlama deneyiminizi hızla geliştirmek için kullanabileceğiniz GitHub'daki en iyi React projelerinden bazılarını göreceğiz.
Yazılım dilini öğrenmek için oluşturulan dökümantasyonlar sizi yalnızca bir yere kadar götürür. İnternette(YouTube, Udemy) çok sayıda React dersleri var. Bir çoğu, size React'in temellerini öğretmek için mükemmel kaynaklardır. Ancak çoğu eğitim ve kursların yetersiz kaldığı nokta, modern React projenizi nasıl daha farklı ve modernize hale getirememektir.
Bu tür becerileri geliştirmenin bir yolu, büyük projeler oluşturmaya çalışan bir ekibe katılmak ve üst düzey geliştiricilerin uygulamada nasıl çalıştığını kendi gözlerinizle görmektir. Ancak bu yaklaşım kulağa basit gelse de, özellikle yolculuğunuzun başındaysanız ve henüz bir iş bulamadıysanız, bu fırsatlar çok az ve çok uzak görünebilir.
Neyse ki deneyim veya görüşme gerektirmeyen ücretsiz bir alternatif var. Açık Kaynak Github Projeleri!
Açık kaynak depoları, büyük ölçekli projelere hemen dahil olmanızı sağlar. Bu ekiplere bir geliştirici olarak katılmak ve projeye katkıda bulunarak diğer geliştiricilerden geri bildirim almak neredeyse bir backdoor hile kodu gibidir.
Bu, açık kaynağı sevmemizin birçok nedenlerinden biridir. Sadece projeler ve yürütücülerin kendileri için (topluluktan katkı ve kod girişi alarak) harika olmakla kalmaz, aynı zamanda genel olarak tüm topluluk üyeleri için muazzam bir fayda sağlar. Açık kaynak, her geliştiriciye büyümelerine ve ilerlemelerine yardımcı olabilecek bilgilere, feedbacklere ve uygulamalı deneyime anında erişim sağlar.
Bahsettiğim hususlardan sonra GitHub'da React öğrenimi ve deneyimi konusunda hızla ilerlemek için kullanabileceğiniz en iyi açık kaynak React projelerinden bazılarına göz atalım.
Öğrenebileceğiniz Açık Kaynak Kodlu React Projeleri
Cal.com
github.com
Cal.com kendisini "Kesinlikle herkes için planlama altyapısı" olarak tanımlar. Calendly gibi randevu planlama hizmetlerine rakip bir projedir. Typesafe client-server arasındaki iletişim için tRPC'ye dayanan full stack bir Next.js uygulamasıdır. Bu depo, uygulamayı çeşitli paketlere bölmek için oldukça kapsamlı bir Monorepo kurulumuna (Turborepo kullanarak) sahiptir. Stil cephesinde Cal.com, TailwindCSS ve Radix bileşenlerini kullanır. Bu proje çok aktif ve katkıda bulunanları aktif olarak teşvik ediyorlar.
Highstorm
github.com
Highstorm, henüz yeni bir proje. Uygulamanızda meydana gelen olayları izlemeye yarayan bir hizmettir. Olayları API aracılığıyla gönderirsiniz ve bunlar daha sonra Highstorm kontrol panelinde log tutar. Ayrıca bu da bir Next.js tabanlı bir projedir. Analitik verileri için veritabanı olarak Tinybird'u ve kimlik doğrulaması için Clerk'i kullanır. Büyük miktarda analitik veriyi nasıl işleyeceğinizi öğrenmek ve bunları süslü grafiklerde göstermek istiyorsanız bu proje harikadır.
Taxonomy
github.com
Bu proje biraz farklı. Yeni Next.js 13 App Router özelliklerini keşfetmek için tek bir geliştirici tarafından demo olarak oluşturuldu. Muhtemelen yeni App Router'ı kullanan en kapsamlı açık kaynak projelerinden biridir. Dolayısıyla bu, App Router'ı yapım aşamasında nasıl kullanacağını öğrenmek isteyen deneyimli React geliştiricileri için bile harika bir kaynak.
Hem frontend hem de backend için Next.js'nin yanı sıra Taxonomy, kimlik doğrulama için NextAuth'u, ORM olarak Prisma'yı ve tasarım için Radix ile TailwindCSS'yi kullanır. Özellikle ilginç olan, Stripe abonelik entegrasyonudur. Dolayısıyla, abonelikleri uygulamanıza nasıl entegre edeceğinizi öğrenmek istiyorsanız, bu bilgi havuzu tam size göre.
Bulletprof React
github.com
Bulletproof React, bahsettiğimiz diğer projelerden biraz farklıdır. Bu depo, full fonksiyonlu olarak çalışan bir demo React uygulaması içerir. Ancak en büyük fayda, bu uygulamayla birlikte gelen gelişmiş ve kapsamlı dökümantasyonları okumaktan gelir. Bu dökümantasyon, büyük ölçekli bir React uygulaması tasarlamanın tüm yönleriyle ilgili en iyi uygulamaları ortaya koymaktadır. Bu proje, oluşturduğunuz yada oluşturacağınız uygulamalarla ilgili hafızanızı tazelemek için düzenli olarak başvurabileceğiniz harika bir kaynaktır.
dub.sh
github.com
Dub.sh, yaklaşık bir yıl önce bir açık kaynak link kısaltıcı olarak piyasaya sürüldü. Bitly gibi hizmetlere bir alternatif. Genellikle Metadata API'si gibi yeni Next.js özelliklerini benimseyen ilk projelerden biridir.
Bu repo, çok fonksiyonlu Next.js uygulamaları hakkında bilgi edinmek için harika bir yerdir. Bunlar, farklı etki alanları altında farklı kullanıcılara hizmet veren uygulamalardır. Dub.sh söz konusu olduğunda, kullanıcılar kısaltılmış linkler oluşturabilir ve kendi alan adlarına ekleyebilirler. Uygulama ayrıca, sitenin her yerinde birçok eğlenceli animasyonla güzel bir şekilde tasarlanmıştır. Framer Motion kitaplığı buna yardımcı olmak için kullanılır.
Kapanış
Gördüğümüz gibi, yukarıdaki projelerin her biri, büyük ölçekli React uygulamalarının nasıl oluşturulduğuna dair benzersiz bir bakış açısı sağlar. Ne kadar deneyimli olursanız olun, Github'da ki depoların kodlarını incelemekten herkes yararlanabilir. Açık kaynak demenin en büyük anlamı budur.
Bir repodan öğrenmeye başlamak için iyi bir yöntem ise kendinize birkaç belirli soru sormaktır. Örneğin, "Taxonomy, Stripe aboneliklerini nasıl kullanıyor?" gibi bir soru sorabilirsiniz. Ardından, sorunuzun yanıtını bulmak için kod satırlarını inceleyebilirsiniz.
Açık kaynak projeleri incelemek, React becerilerinizi geliştirmek için harika bir yoldur, ancak yapmanız gereken tek şey sadece bu olmamalıdır. Yeni edindiğiniz bilgileri kendi projelerinize de uygulamanız oldukça önemlidir. Bu şekilde yeni beceriler ve yeni bilgiler kazanacaksınız.
Saygılarımla..
Yazılım dilini öğrenmek için oluşturulan dökümantasyonlar sizi yalnızca bir yere kadar götürür. İnternette(YouTube, Udemy) çok sayıda React dersleri var. Bir çoğu, size React'in temellerini öğretmek için mükemmel kaynaklardır. Ancak çoğu eğitim ve kursların yetersiz kaldığı nokta, modern React projenizi nasıl daha farklı ve modernize hale getirememektir.
Bu tür becerileri geliştirmenin bir yolu, büyük projeler oluşturmaya çalışan bir ekibe katılmak ve üst düzey geliştiricilerin uygulamada nasıl çalıştığını kendi gözlerinizle görmektir. Ancak bu yaklaşım kulağa basit gelse de, özellikle yolculuğunuzun başındaysanız ve henüz bir iş bulamadıysanız, bu fırsatlar çok az ve çok uzak görünebilir.
Neyse ki deneyim veya görüşme gerektirmeyen ücretsiz bir alternatif var. Açık Kaynak Github Projeleri!
Açık kaynak depoları, büyük ölçekli projelere hemen dahil olmanızı sağlar. Bu ekiplere bir geliştirici olarak katılmak ve projeye katkıda bulunarak diğer geliştiricilerden geri bildirim almak neredeyse bir backdoor hile kodu gibidir.
Bu, açık kaynağı sevmemizin birçok nedenlerinden biridir. Sadece projeler ve yürütücülerin kendileri için (topluluktan katkı ve kod girişi alarak) harika olmakla kalmaz, aynı zamanda genel olarak tüm topluluk üyeleri için muazzam bir fayda sağlar. Açık kaynak, her geliştiriciye büyümelerine ve ilerlemelerine yardımcı olabilecek bilgilere, feedbacklere ve uygulamalı deneyime anında erişim sağlar.
Bahsettiğim hususlardan sonra GitHub'da React öğrenimi ve deneyimi konusunda hızla ilerlemek için kullanabileceğiniz en iyi açık kaynak React projelerinden bazılarına göz atalım.
Öğrenebileceğiniz Açık Kaynak Kodlu React Projeleri
Cal.com
GitHub - calcom/cal.com: Scheduling infrastructure for absolutely everyone.
Scheduling infrastructure for absolutely everyone. - calcom/cal.com
github.com
Cal.com kendisini "Kesinlikle herkes için planlama altyapısı" olarak tanımlar. Calendly gibi randevu planlama hizmetlerine rakip bir projedir. Typesafe client-server arasındaki iletişim için tRPC'ye dayanan full stack bir Next.js uygulamasıdır. Bu depo, uygulamayı çeşitli paketlere bölmek için oldukça kapsamlı bir Monorepo kurulumuna (Turborepo kullanarak) sahiptir. Stil cephesinde Cal.com, TailwindCSS ve Radix bileşenlerini kullanır. Bu proje çok aktif ve katkıda bulunanları aktif olarak teşvik ediyorlar.
Highstorm
GitHub - chronark/highstorm: Open Source Event Monitoring
Open Source Event Monitoring. Contribute to chronark/highstorm development by creating an account on GitHub.
github.com
Highstorm, henüz yeni bir proje. Uygulamanızda meydana gelen olayları izlemeye yarayan bir hizmettir. Olayları API aracılığıyla gönderirsiniz ve bunlar daha sonra Highstorm kontrol panelinde log tutar. Ayrıca bu da bir Next.js tabanlı bir projedir. Analitik verileri için veritabanı olarak Tinybird'u ve kimlik doğrulaması için Clerk'i kullanır. Büyük miktarda analitik veriyi nasıl işleyeceğinizi öğrenmek ve bunları süslü grafiklerde göstermek istiyorsanız bu proje harikadır.
Taxonomy
GitHub - shadcn-ui/taxonomy: An open source application built using the new router, server components and everything new in Next.js 13.
An open source application built using the new router, server components and everything new in Next.js 13. - shadcn-ui/taxonomy
github.com
Bu proje biraz farklı. Yeni Next.js 13 App Router özelliklerini keşfetmek için tek bir geliştirici tarafından demo olarak oluşturuldu. Muhtemelen yeni App Router'ı kullanan en kapsamlı açık kaynak projelerinden biridir. Dolayısıyla bu, App Router'ı yapım aşamasında nasıl kullanacağını öğrenmek isteyen deneyimli React geliştiricileri için bile harika bir kaynak.
Hem frontend hem de backend için Next.js'nin yanı sıra Taxonomy, kimlik doğrulama için NextAuth'u, ORM olarak Prisma'yı ve tasarım için Radix ile TailwindCSS'yi kullanır. Özellikle ilginç olan, Stripe abonelik entegrasyonudur. Dolayısıyla, abonelikleri uygulamanıza nasıl entegre edeceğinizi öğrenmek istiyorsanız, bu bilgi havuzu tam size göre.
Bulletprof React
GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications. - GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for...
github.com
Bulletproof React, bahsettiğimiz diğer projelerden biraz farklıdır. Bu depo, full fonksiyonlu olarak çalışan bir demo React uygulaması içerir. Ancak en büyük fayda, bu uygulamayla birlikte gelen gelişmiş ve kapsamlı dökümantasyonları okumaktan gelir. Bu dökümantasyon, büyük ölçekli bir React uygulaması tasarlamanın tüm yönleriyle ilgili en iyi uygulamaları ortaya koymaktadır. Bu proje, oluşturduğunuz yada oluşturacağınız uygulamalarla ilgili hafızanızı tazelemek için düzenli olarak başvurabileceğiniz harika bir kaynaktır.
dub.sh
GitHub - dubinc/dub: Open-source link management infrastructure.
Open-source link management infrastructure. Contribute to dubinc/dub development by creating an account on GitHub.
github.com
Dub.sh, yaklaşık bir yıl önce bir açık kaynak link kısaltıcı olarak piyasaya sürüldü. Bitly gibi hizmetlere bir alternatif. Genellikle Metadata API'si gibi yeni Next.js özelliklerini benimseyen ilk projelerden biridir.
Bu repo, çok fonksiyonlu Next.js uygulamaları hakkında bilgi edinmek için harika bir yerdir. Bunlar, farklı etki alanları altında farklı kullanıcılara hizmet veren uygulamalardır. Dub.sh söz konusu olduğunda, kullanıcılar kısaltılmış linkler oluşturabilir ve kendi alan adlarına ekleyebilirler. Uygulama ayrıca, sitenin her yerinde birçok eğlenceli animasyonla güzel bir şekilde tasarlanmıştır. Framer Motion kitaplığı buna yardımcı olmak için kullanılır.
Kapanış
Gördüğümüz gibi, yukarıdaki projelerin her biri, büyük ölçekli React uygulamalarının nasıl oluşturulduğuna dair benzersiz bir bakış açısı sağlar. Ne kadar deneyimli olursanız olun, Github'da ki depoların kodlarını incelemekten herkes yararlanabilir. Açık kaynak demenin en büyük anlamı budur.
Bir repodan öğrenmeye başlamak için iyi bir yöntem ise kendinize birkaç belirli soru sormaktır. Örneğin, "Taxonomy, Stripe aboneliklerini nasıl kullanıyor?" gibi bir soru sorabilirsiniz. Ardından, sorunuzun yanıtını bulmak için kod satırlarını inceleyebilirsiniz.
Açık kaynak projeleri incelemek, React becerilerinizi geliştirmek için harika bir yoldur, ancak yapmanız gereken tek şey sadece bu olmamalıdır. Yeni edindiğiniz bilgileri kendi projelerinize de uygulamanız oldukça önemlidir. Bu şekilde yeni beceriler ve yeni bilgiler kazanacaksınız.
Saygılarımla..
