Yeni Başlayanlar İçin 9 Heyecan Verici React Projesi Fikirleri ve Konuları 2022

Yani, React'in temellerine hakim oldunuz ve ayrıca JavaScript'i de sağlam bir şekilde kavradınız. Artık temel öğreticiler sizin için oldukça kolay olduğuna göre, onu bir adım öteye taşımayı düşünüyorsunuz. Ama nasıl?

Bu, React kitaplığının temellerini tamamladıklarında ve öğrenmenin orta aşamasına geldiklerinde birçok React yeni öğrencisinin karşılaştığı bir sorundur. İlerlemenin en iyi (ve muhtemelen en üretken yolu) React projeleri geliştirmeye odaklanmaktır.

Hayır, büyük endüstri projelerini üstlenmekten değil, teorik becerilerinizi pratik deneyime dönüştürmenize yardımcı olabilecek daha küçük gerçek dünya projelerinden bahsediyoruz. Gerçek dünyadaki React projeleri üzerinde çalışarak, React'e yeni başlayan biri olmakla profesyonel bir geliştirici olmak arasındaki boşluğu kapatabilirsiniz.

Swiggy, Quora, IMDB ve daha fazlası gibi uygulamalar oluşturmayı öğrenin

React projeleri geliştirmek, yalnızca React becerilerinizi sağlamlaştırmanıza yardımcı olmakla kalmaz, aynı zamanda yaratıcı yönünüzü keşfetmenize de olanak tanır. Ancak, React projelerini tartışmaya başlamadan önce, React proje geliştirmenin “neden” ve “nasıl”ına değinelim.

Okuyun: En İyi 20 React Mülakat Sorusu ve Yanıtı

Neden React projeleri üzerinde çalışmalısınız?

Eski bir deyişi duydunuz, "pratik yapmak mükemmelleştirir", değil mi? Bu durum aynıdır. React'in temel kavramları üzerinde ustalık kazandığınızda, React projeleri oluşturmaya alışmalısınız. React projeleri geliştirme sürecinde, gerçekten çalışan uygulamaları nasıl geliştireceğinizi öğreneceksiniz.

Dahası, React projeleri geliştirmeye başladığınızda, hangi React projesi için hangi araçları ve React ekosistemini kullanacağınızı öğreniyorsunuz. React ile uygulama geliştirmenin en büyük avantajı, bunları başarıyla dağıttıktan sonra, potansiyel işverenleri etkilemek için bunları portföyünüze dahil edebilmenizdir.

Ancak, sürecin en zor kısmı, hangi React uygulamalarını oluşturmanız gerektiğini bulmaktır. React proje geliştirme ile buzları kırmanıza yardımcı olmak için, yeni başlayanlar için bir React projeleri listesi derledik.

React uygulamaları geliştirme süreci nasıl başlatılır?

React proje geliştirme hakkında hatırlanması gereken ilk şeylerden biri, büyük ölçüde kendi kendini yöneten bir süreç olmasıdır. Çevrimiçi öğreticiler ve öğrenme materyalleri aracılığıyla React'in temellerini öğrenmenin aksine, React projeleri oluştururken size rehberlik edecek pek bir şey olmayacak. Deneme yanılma yoluyla öğrenmeniz gerekecek.

Ayrıca okuyun: Yeni Başlayanlar için Tam Yığın Kodlama Projesi Fikirleri

Ancak bu, React ile proje geliştirmenin temellerini öğrenmenize yardımcı olacak hiçbir şey olmadığı anlamına gelmez. React proje geliştirmeye nasıl başlayacağınıza dair pek çok materyal bulabilirsiniz. Kaynak koduyla birlikte uygulama geliştirmenin temel adımlarını öğreten çok sayıda çevrimiçi makale vardır.

Yeni başlayan biri olarak, React projelerini sıfırdan geliştirme görevi zor görünebilir, ancak süreci basitleştirmenin bir sırrı vardır - bir uygulamayı daha küçük bileşenlere bölmek. Her seferinde bir özellik oluşturmaya odaklanmaya çalışın ve ilerledikçe noktaları birleştirmeye devam edin. Farklı React araçları ve ekosistemleri üzerinde pratik yapmaya ve denemeler yapmaya devam ettikçe, uygulama geliştirmenin ortak kalıplarını ve ayrıca bir React uygulamasının belirli özelliklerini geliştirmek için hangi araçların en iyi olduğunu anlayacaksınız.

Ek ipucu : Genellikle yeni başlayanlar, bir uygulamanın arka ucunu sıfırdan oluşturmaları gerektiği gibi bir yanılgıya sahiptir, ancak bu gerekli değildir. Uygulamanızı kullanıma hazır bir arka uçla donatmak için AWS Amplify, Firebase ve Hasura gibi sunucusuz teknolojilerden yararlanabilirsiniz. Bu araçlar yalnızca zamandan tasarruf etmekle kalmaz, aynı zamanda üretkenliğinizi artırmanıza da yardımcı olur.

Hakkında bilgi edinin: Hindistan'da Tam Yığın Geliştirici Maaşı

Yeni Başlayanlar için React Proje Fikirleri

1. Sosyal Medya Uygulaması

Hindistan'da Sosyal Medya Pazarlamasının Geleceği harika çünkü Facebook, Instagram, Snapchat ve Twitter gibi sosyal medya uygulamaları sofistike uygulamaların başlıca örnekleridir. Bu uygulamalar, sürekli artan sayıda gelişmiş özelliklere sahip olduklarından, bir React projesi için harika bir ilham kaynağı olabilir. React kullanarak bir sosyal medya uygulaması oluşturmanın en iyi yanı, uygulamaya ne tür özellikler eklemeniz gerektiğini bilmenizdir. Hemen hemen tüm sosyal medya uygulamalarının en yaygın özelliklerinden bazıları şunlardır:

• Kullanıcı doğrulama
• Bildirim ve haber akışı
• Diğer platformlarla kolay entegrasyon
• Gönderme, paylaşma ve yorum yapma

Temel olarak, bir sosyal medya uygulaması size deney için geniş bir alan sağlar. En temel özellikleri (yukarıda belirtilenler gibi) ekledikten sonra, son kullanıcıların profillerini ve hesaplarını gereksinimlerine ve tercihlerine göre değiştirmelerine olanak tanıyan özelleştirme için ek özellikler oluşturabilirsiniz.

Kullanabileceğiniz teknolojiler:

• Gönderiler, mesajlar ve beğeniler için dinamik kullanıcı arayüzü oluşturmak için React Uygulaması veya React Native oluşturun.
• Gerçek zamanlı veriler için AWS Amplify veya Firebase veya Hasura (GraphQL aboneliklerini kullanarak).
• Uygulama bildirimleri için AWS Lambda veya Firebase İşlevleri
• Resim ve video yüklemek için Firebase veya Cloudinary depolama

2. e-Ticaret Uygulaması

E-ticaret ana sektöre girdiğinden beri, e-ticaret uygulamaları (Amazon, Flipkart, Nykaa, vb.) her yerde bulunur hale geldi. Bu uygulamalar artık hayatımızın ayrılmaz bir parçası. Bu nedenle, işlevsel bir e-ticaret uygulaması oluşturursanız, sektördeki en son trendlere ayak uydurmak için gerçek dünya becerilerine sahip olduğunuzu gösterecektir. Potansiyel işverenlerin önünde çekici bir aday olacağınızı söylemeye gerek yok.

Amazon veya eBay gibi büyük bir pazar yerine daha çok belirli bir sektöre odaklanan küçük bir e-ticaret projesi geliştirmekten bahsettiğimizi unutmayın. Elektronik cihazlar (cep telefonları, TV'ler, dizüstü bilgisayarlar vb.) gibi ilginizi çeken herhangi bir sektörü seçebilir ve e-ticaret uygulamanızı bu doğrultuda geliştirebilirsiniz.

E-ticaret uygulamanız ürün veya hizmet sunabilir. Her durumda, müşterilerin ürünlere veya hizmetlere göz atmanın yanı sıra kusursuz müşteri hizmetinden yararlanabilmelerini sağlamalısınız. Bu, uygulama başarısı için çok önemlidir - çok yönlü müşteri desteği ve iyi müşteri deneyimi, başarılı bir uygulamanın iki hayati unsurudur.

Uygulama özellikleri söz konusu olduğunda, düzeni ve arayüzü düzenli ve gezinmesi kolay tutun, teslimatlar için konum seçeneğini ekleyin, bir alışveriş sepeti ve bir istek listesi ekleyin. Ödeme işleminin gerekli kimlik doğrulama seçeneklerini içerdiğinden emin olun (misafir veya kayıtlı kullanıcı olarak).

Kullanabileceğiniz teknolojiler:

• React Uygulaması Oluştur veya Gatsby, ürünleri/hizmetleri sergileyen vitrini oluşturmak için mükemmel seçeneklerdir.
• Algolia, ışık hızında bir ürün arama arayüzü oluşturmak için mükemmeldir.
• Ödeme sürecini yönetmek için Netlify/AWS Lambda.
• Ödeme sürecini yönetmek için şerit/tepki-şerit-elemanları.
• Snipcart, bir sepet oluşturmanıza ve ayrıca alışveriş sepeti ürünlerini yönetmenize olanak tanır.

3. Hava Durumu Uygulaması

Bu, yeni başlayanlar için mükemmel bir React projesidir. Bu basit bir projedir - birkaç saat içinde kodlayabilirsiniz! Bu projede, 5 günlük hava tahminini görüntüleyebilen bir hava durumu uygulaması oluşturmanız gerekiyor. Bu uygulama için, tüm özellikleri doğru alana kadar sahte, sabit kodlanmış verilerden yararlanabilirsiniz.

Hava durumu uygulaması, şehir adı, mevcut hava durumu simgesi, sıcaklık, nem, rüzgar hızı vb. dahil tüm temel işlevlere sahip olmalıdır. Güneşli/yağmurlu/ bulutlu/karlı hava koşulları. Duyarlı bir tasarıma sahip olmalı ve tam sıcaklık ve hava koşulları ile her beş dakikada bir yenilenmelidir.

Temel işlevleri yerine getirdiğinizde, uygulamayı aşağıdaki yollarla daha da genişletebilirsiniz:

• Saatlik tahmini görmek için kullanıcının haftanın belirli bir gününe tıklayabileceği işlevselliği ekleyin.
• Uygulamaya React Router ekleyin (npm install react-router). Rota eklemek için hızlı başlangıç ​​kılavuzuna bakın . Örneğin, o gün için günün adı ve saatlik tahmini ile birlikte 5 günlük hava tahminini görüntüleyebilen rotalar.
• Ücretsiz bir API anahtarı almak ve 5 günlük hava tahmini almak için Açık Hava Haritası'na kaydolun . Ardından bu verileri uygulamanızda besleyin.
• Uygulamayı daha da eğlenceli hale getirmek istiyorsanız, vx gibi bir grafik kitaplığı ekleyebilirsiniz . İlham almak için bu vx örneklerine göz atabilirsiniz .

Bu hava durumu uygulamasını geliştirirken, harici bir API'ye nasıl bağlanacağınızı ve uygun sonuçları nasıl görüntüleyeceğinizi öğreneceksiniz. Bu pratik beceri, harici kaynaklardan veri almak ve sonuçları görüntülemek için tasarlanmış başka türde tek sayfalık uygulamalar geliştirdiğinizde çok kullanışlı olacaktır.

Kaynak

Kullanabileceğiniz teknolojiler:

• Node.js ve Bower , bu uygulama için iki mükemmel seçenek.
• Gulp Task Runner ve SASS CSS ön işlemcisini kullanabilirsiniz .
• Hava durumu simgeleri için Erik Flowers'a göz atabilir ve "gerekli" modüller için Browserify'ı kullanabilirsiniz .

4. Mesajlaşma Uygulaması

Mesajlaşma uygulamaları ve mesajlaşma servisleri netizenler arasında oldukça popülerdir. Nitekim WhatsApp ve Facebook Messenger gibi mesajlaşma uygulamaları günlük hayatımızın o kadar büyük bir parçası ki, bunlar olmadan bir gün düşünemiyoruz. Anında mesajlaşma artık bir yaşam biçimi. Şirketler (büyük veya küçük) bile müşterilerine 7 gün 24 saat müşteri desteği sağlamak için anlık mesajlaşmanın gücüne güveniyor. Bu nedenle, bir mesajlaşma uygulaması oluşturmak, React becerilerinizden para kazanmanın en iyi yollarından biridir.

Mobil tabanlı bir mesajlaşma uygulaması geliştirirken göz önünde bulundurmanız gereken ilk şey, iki veya daha fazla kişi arasında gerçek zamanlı olarak konuşmayı kolaylaştırabilecek bir platform oluşturmanız gerektiğidir. Gerçek zamanlı burada anahtardır, çünkü anlık mesajlaşmanın özüdür. Bir konuşmada mesajları hemen görüntülemek için WebSockets aracılığıyla veri taşıyan Firebase veya Hasura gibi araçlar kullanabilirsiniz. React Native, bu proje için ideal seçimdir.

Kullanılacak teknolojiler:

• React Native veya React Native Web, çünkü bunlar hem mobil mesajlaşma uygulamaları hem de hibrit (web + mobil) mesajlaşma uygulamaları geliştirmek için mükemmeldir.
• İletileri gerçek zamanlı olarak göndermek ve almak için Firebase, AWS Amplify veya Hasura.
• Görüntü veya video içerikli mesaj göndermek/almak için Cloudinary veya Firebase depolama.
• Kullanıcıların mesajlarına ekleyebilecekleri emojiler için npm emoji-mart paketi

5. Verimlilik Uygulaması

Bu, listedeki en kolay projelerden biridir ve üretkenlik uygulamalarıyla ilgili öğreticilerin bol olduğu gerçeği göz önüne alındığında, bu proje yeni başlayanlar için nispeten kolay olmalıdır. Adından da anlaşılacağı gibi, üretkenlik uygulamaları, üretkenliğinizi artırmanıza yardımcı olan uygulamalardır. En sık kullanılan üretkenlik uygulamalarından bazıları, birkaçını saymak gerekirse, not alma uygulamaları, ekip yönetimi uygulamaları, görev listesi uygulamaları, zaman yönetimi uygulamalarıdır.

Bunlar yaygın üretkenlik uygulamaları olsa da, uygulama geliştirme sürecine ayrıntılı bir giriş sunan bir uygulama oluşturmayı deneyebilirsiniz. Bu, basit tasarımı ve kullanıcıların uygulama geliştirme adımlarını takip etmesine olanak tanıyan özellikleri sayesinde bir üretkenlik uygulaması için mükemmel bir fikirdir.

Bir üretkenlik uygulaması geliştirirken, hangi özelliklerin günlük programı veya öğrenme programını basitleştireceğini sormalısınız ve bu, başlamak için ipucunuz olacaktır. Markdown ile biçimlendirilmiş metin yazmak için bir metin düzenleyici gibi basit bir özellikle başlayın. Uygulamanın bu tür bir veya iki temel özelliğini başarıyla geliştirdikten sonra, öğeleri kademeli olarak genişletmeye başlayın. Örneğin, metni bilgisayarda ayrı dosyalar olarak kaydetme seçeneği, biçimlendirilmiş e-postalar yazmak için metin işaretlemesini HTML olarak dışa aktarma.

Kullandığınız teknolojiler:

• React Uygulaması (web için) veya React Native (mobil platformlar için) oluşturun.
• uygulama kullanıcı arayüzünüzde işaretlemeyi görüntülemek için tepki-markdown npm paketi.
• notlarda kod yazmak için tepki-codemirror2 npm paketi.
• Bir tıkla ve sürükle seçeneğiyle liste içeriğini yeniden sıralamak için tepkiyle sürüklenebilir npm paketi.

Şunu da deneyin: Yeni Başlayanlar için Web Tasarımı Proje Fikirleri

6. Eğlence Uygulaması

En kapsamlı uygulamayı en son eğlence uygulamasına kaydettik. Eğlence uygulamaları, filmlerden müziğe ve podcast'lere kadar değişen medya içeriğine odaklanır. Netflix, Audible, Spotify ve Soundcloud eğlence uygulamalarının bazı örnekleridir. İlginçtir ki, bugün sosyal medya ile yakın bir ilişki paylaşan birçok eğlence uygulamamız var. TikTok, belki de bir sosyal medya eğlence uygulamasının en iyi örneğidir. Kullanıcılar tarafından oluşturulan kısa video klipleri içerir ve yüksek kullanıcı katılımı ile yönlendirilir. Ardından, abonelikler, beğeniler ve yorumlar yoluyla kullanıcı katılımını teşvik eden YouTube'a sahipsiniz.

Projemiz, bu popüler uygulamaların herhangi birinden çok, çok daha basit olacak. Sizi en çok ilgilendiren bir eğlence ortamı seçin ve uygulamanızı buna göre tasarlayın. Buradaki fikir, kullanıcıların seçtikleri içeriği görüntülemek ve kaydetmek için oturum açabilecekleri bir eğlence uygulaması geliştirmektir. Temel özelliklere sahip olduğunuzda, kullanıcıların uygulamanın içeriğini beğenmesine, paylaşmasına ve yorum yapmasına olanak tanıyan sosyal öğelerle oynayabilirsiniz.

Kullanabileceğiniz teknolojiler:

• Uygulama kullanıcı arayüzü için React App, Next.js veya Gatsby oluşturun.
• Medya aramak için Algolia (ses parçalarının, filmlerin, podcast'lerin vb. adları).
• medya oynatmak için tepki oynatıcı npm paketi.
• Medya içeriğini yüklemek için Cloudinary/Firebase depolama.

Bu altı projenin dışında deneyebileceğiniz başka kolay projeler de var:

7. Sosyal kartlar

Bu tam gelişmiş bir uygulama değil, bir uygulamanın bir bileşeni olmasına rağmen, yine de iyi bir projedir. İnternet, çok sayıda sosyal kart kullanıcı arayüzü varyasyonu ile doludur. Bunları Facebook, Twitter ve Pinterest'te bulabilirsiniz. Bir sosyal kart, yeni başlayanlar için ideal bir proje fikridir, çünkü bir kullanıcı arayüzünü React bileşenlerine ayırma alıştırması yapmanızı sağlar. Ayrıca sosyal kartlar, resimleri ilgili verilerle birlikte görüntüleyebileceğiniz mükemmel görsel temsillerdir.

Kaynak

8. Hesap Makinesi

Hesap makineleri, toplama, çıkarma, çarpma, bölme ve yüzde gibi bir dizi temel matematiksel işlevi gerçekleştiren basit araçlardır. Bu temel işlevleri gerçekleştirebilen bir hesap makinesi olan projemizin arkasındaki fikir bu olacaktır. Basit bir hesap makinesi bile oluşturmak için, tüm farklı bileşenler için bir kurulum oluşturmanız, karşılıklı etkileşimli bir platform oluşturmanız ve ayrıca arızaları, çökmeleri ve hataları ele almak için bir destek sistemi oluşturmanız gerekir. Hesap makinesi uygulamasını tutmak ve çalıştırmak için bir dizini başlatmak için Create React App paketini kullanabilirsiniz.

Kaynak

9. Github Sorunları Sayfası

Bu proje, Github'ın Sorunlar sayfasının basitleştirilmiş bir versiyonunu tasarlamak içindir. Bu nasıl görünmelidir:

Kaynak

Kapsamınızı küçük tutmanız gerekir. Başlıktaki öğeleri (arama, filtreleme, yıldızlar vb.) yok sayın ve yalnızca sorun listesini uygulamaya odaklanın. Projeye başlamak için önce Github'un API'sinden açık sorunları toplayın ve bunları bir listede görüntüleyin. Bundan sonra, tam bir sorun listesinde gezinmeyi kolaylaştırmak için bir sayfalandırma denetimi ekleyin. React Router eklerseniz, doğrudan seçtiğiniz belirli bir sayfaya gidebilirsiniz. Sorun detay sayfasını da ekleyerek sayfanın karmaşıklığını artırabilirsiniz.

Dünyanın en iyi Üniversitelerinden çevrimiçi Yazılım geliştirme Kursları öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

Çözüm

Bu makalenin, sizi uygulama geliştirme zihniyetine sokmak için yeterince ilham verici olduğunu umuyoruz. Ne kadar çok pratik yaparsanız, React ile gerçek dünya projeleri geliştirmede o kadar iyi olursunuz.

Tepki, tam yığın geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saatlik sıkı eğitim, 9+ proje ve atamalar, IIIT-B Mezunları durumu, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.

Geleceğin Kariyerine Hazırlanın

Tam Yığın Geliştirmede Executive PG Programına Şimdi Başvur