Twitter Clone -1 / Projenin ve Layout'un Oluşturulması
ฝัง
- เผยแพร่เมื่อ 24 ก.ย. 2024
- Bu ders Tayfun Erbilen tarafından prototurk.com için hazırlanmıştır.
🎉🎉 Kanala destek olmak için KATIL üzerinden size uygun seçeneği belirleyerek desteğinizi gösterebilirsiniz.
www.youtube.co...
👇. Çıkardığımız udemy eğitim setlerine gözatın!
✅ PHP Eğitim Seti
udemy.com/php-...
⚡ Prototurk'u diğer platformlarda takip etmek isterseniz:
⭕ / prototurkcom
⭕ / prototurk.official
⭕ t.me/prototurk
⭕ / tayfunerbilen
Her beğeni Elon Musk'a Twitter'ın adını değiştirdiği için bir tokat 👋👋👋 2. bölüm: th-cam.com/video/-KyEikRre-A/w-d-xo.html
Projemizin kodlarini github'a ekledim, repoyu yildizlamayi unutmayin :)
github.com/tayfunerbilen/twitter-x-clone-react
Ayrica guncel demomuza suradan ulasabilirsiniz:
react-twitter-clone-prototurk.vercel.app/
Hocam lütfen bu eğitimi yarıda bırakmadan bitirelim :)
İnşallah 🤣
Kesinlikle harika bir seri olacak
Aldı başını gidiyor
Sen izle like at yorum at devam eder .d
yeni başlayanlar için uygun değil diyip gayet güzel bir şekilde beginner friendly javascript işlemlerini bile açıklayarak projenin geliştirme işlemini yürüten koca yürekli tayfun abime selam
Merhaba Azerbaycandan Salam veriyorum ve 15 yaşım var.
Gerçekten çok iyi video olmuş.
Bende aslında instagramı kodlamaya başladım ama yarım kaldım.
HTML CSS biliyorum ve hepisini videolarından öyrendim.
Şimdide JavaScript serisinin 14-cü günündeyim.
Böyle devam et. Benim gibilere ilham oluyorsun.
ÇOK TEŞEKKÜRLER!!!
Nextjs ile ufak bir hem backend hem de frontendi olan bir proje yapsan çok tatlı olur.
11:31 mışıl mışıl izliyordum kahkaha attım bir anda ya sksksmsmms
Reis şakasız aşırı sardı. Rica ediyorum devam edelim. Seviliyorsun
Süper bir seriye başlamışsın abi çok teşekkürler. Umarım bitirebiliriz :D Her şeyi açık açık anlatman çok iyi olmuş. Proje videolarında her şeyi biliyormuşuz gibi anlatılınca bazı şeyler kaçabiliyor, kaçırmamak için videoyu durdurup araştırınca da video bitmez hale gelebiliyor :D
11:33 p'ye basmaya korkuyor insan 🤣🤣🤣
youtube’un nadir elementlerinden prototurk ❤ tesekkurler
Tayfun hocam selamlar. Yeni kursunda başarılar dilerim. Naçizane bir tavsiyem olacak. Her dersi github üzerinden ayrı bir dal olarak paylaşırsan süper olur. React öğrenen herkes hemen hemen tailwind biliyordur veya html classlarla uğraşmak istemiyordur. Bu classları videodan bakıp yazmak çok uzun sürüyor. Bunun yerine github dan sadece o dersin dalına girip kopyalamak kursu çok daha kolaylaştıracaktır. İyi çalışmalar dilerim.
Yazılım ile ilgilir bir sey ogrenmeden once ilk sizden temel egitim alıyorum teşekkur ediyorum.
Tayfun hocam. Bir tane full proje yapsak ve frontend trendlerine uygun şekilde ilerlerlesek?
hocam uygulamalar arası çok hızlı geziyorsunuz macbookta kullandığınız kısayolları ve uygulamarı gösterdiğiniz bir video yapar mısınız
İlaç gibi geldi hocam buraya yorum bırakmayı unutmuşuz :) Yeni ajanstan ayrıldım php, vanillajs, webpack ile geliştirme yapıyorduk. Routerı vs hepsi hazırdı. React ve Vue.js gibi Frontend frameworklerine geçiş yapamamıştık bir türlü, vue.js global versiyonunu php ile iş dışında geliştirdiğim cmsimde file manager bölümünde kullanmıştım, genel olarak konseplere hakimdim fakat bu seriyi ilk attığınızda görmüştüm nasip bugüne başlamakmış.
devamı gelmeli login register ve post işlemleri de olsa süper olur
Main content ile right bar arasındaki gap değilde twitter justify-between vermiş.
Navbardaki 50.25px olan yüksekliğin bizde 52px olmasının sebebide twitterın varsayılan font-size ının 15px olması.
(en küçük ve küçük 14px varsayılan 15px büyük 17px çok büyük 18px)
Aynen ben de fark ettim zaten paddingler aynı olduğundan navlinkin içinde iki bileşen var icon ve label icon aynıysa geriye label kalıyor da dikkatten kaçmış demek ki videoda label kontrol edilmemiş.
Abi yapıyorsun bu sporu 👍 Emeğine sağlık 😇
Kral bir de backend yapsan tadından yenmez heee
süper bir seriye başladık umarım yeni bölümü gelir yarın gelirse süper olur hazır mı acaba hocam
Hazır sayılır 😀
2k çözünürlük gayet iyi teşekkürler. 2k monitörde yarısı sizin video yarısı kod olunca ( monitör 27 olunca böyle iyi) gayet güzel çözünürlük
teşekkürler
Hocam WebStorm kullanıyorsunuz galiba, temanız çok güzelmiş ismi nedir?
Bak ne güzel react projesini vite ile başlatıyor, router dom kuruyor, tailwind kuruyor. İşte developer dostu adam gibi adam. 3-5 paket kurup projeyi yapıp çıkıyor. Siz anca uğraşın yok şu paket daha performanslıymış yok bunu yapsam daha clean olurmuş vs...
Tayfun hocam bu sporu yapıyorsun, eline sağlık
Reis lütfen bir de APİ ile ilgili video çekermisin güvenli oturum açma , çıkış yapma, update falan firebase olmadan. Veya bildiğiniz bir react ve api kullanım videosu varsa linkini atar mısınız?
Bence Türkiye'nin en iyi developerı Tayfun (ben daha iyisini görene kadar)
Öncelikle bu video çok işime yaradı çok teşekkür ederim. Tam sıkıldım yapamıyorum derken bu video pekiştirmeme yardımcı oldu çok verimli bir 50dk geçirdim bu tip videolar çok var ama anlatış olarak en düzenli, açıklayıcı anlatan sen varsın. Tekrardan Teşekkürler. Bu seri Devam etmeliiiiiiii :D
oven-sh/bun ile ilgili bir video gelir mi? Henüz Windows desteği almamış(deneme sürümü var sadece) fakat mac OS ve Linux'ta çalışıyormuş.
bence çok iyi bir uygulama olmuş commonjs ile es aynı anda yürütmek ve varsayılan olarak jsx desteklemesi
Gelir biraz daha vakit geçtin hazırlayacağım
router 6.14 den sonra gelen layout + slot yapısına alışınca yazması inanılmaz keyifli ve verimli oluyor. şiddetle tavsiye
ney abi o dedigin, dokumantasyonda nereye denk geliyor? bi bakalim, ben mi korum goremedim :D
Outlet yerine gidip slot dersem sen degil kimse anlamaz :D Burada mantik su: tipki pages gibi layuots klasoru olusturup mesela home pagedeki home.jsx icin home layouts olusturuyoruz static datalari bu layout icinde tanimlayip en alta geciyoruz. Butun dinamik verileri de pages'deki home.jsx den hallediyoruz.@@PROTOTURKCOM
Hocam kodlarken, gözleri korumak adına bir öneriniz var mı? Brightness ayarı etkili mi? Teşekkür ederim.
Teşekkürler.
beklenen video geldi
Eline sağlık hoca. Serinin devamı gelir umarım.
Eline sağlık Tayfun Hocam
İşte bomba bir seri geldi!
Hocam devamını bekliyorumm. Harikasın
Sonraki videoyu sabırla bekliyoruz Tayfun hocam :D eline sağlık^^
reacti bununla öğren serisi devam etsin cok yararlı oluyor
koyun dolly'den sonra ki en iyi klon bu klon
dediğiniz gibi reactı öğrenipte bir proje kurmak isterken zorlanan insanlar için çok iyi oldu. Tebrikler👉
Hocam , BrowserRoute-ni ayrı yazmak yerine App componentinde sarmalayıb App.js-de Routes altında routlar yazsak olmazmı ?
olur, ama ben bu sekilde yonetimin daha kolay ve okunabilir oldugunu dusunuyorum :)
Hocam bir pazaryeri klonu yapar mısınız? Yemeksepeti getir vs herhangi birinin mantiginda
Bu yeni dosya acinca bir popup aciliyor daha sonra bunun icine daha fazla ekliyebiliyorsunuz bunu nasil yapiyorsun hocam extensions mi yoksa apple gucu mu birde hocam folder iconlari icin hangi extensions kulaniyorusun
line-height:24 px verdikleri için linkler aynı boyutta görünmüyor sanırım, peki bu iconlarda kullanılan svglerin build süresini uzatma ya da web sayfasının hız performansına etkisi gibi durumlar oluyor mu acaba? Pagespeed verilerini aşağıya çekme gibi bir durum söz konusu olabilir mi?
Abi selamlar, reacti projemizin sadece bir sayfasında kullanmamız mümkün mü? Tutorial kısmında böyle bir başlık görmüştüm ama tutorial anlamında pek bir şey bulamadım fikrin bilgin var mı?
30:00 burada takıldığın boşluk gap değil, bence justify content between yapmışlar
max-width vermişler sonradan gördüm, hala ikna olmadım ama neyse :D
Bu video beni çok mutlu etti
Nihayet bugün başlıyorum bu projeye
çok iyi anlatım teşekkürler
Hocam navbardaki label'ların boyutu 20px ve satır yüksekliği 24px bu yüzden birebir uyuşmadı
Eline sağlık abi, Prototurk V3 özlendi gibi biraz.
Klavyenin sesi çok hoş hangi marka/model/switch kullanıyorsun 🙂
Keychron k6 brown :)
@@PROTOTURKCOM Ben de bu markanın K2 ISO modellerinden almak istiyorum da sitelerinde de Türkçe tuş takımı desteği yok. Orjinal İngilizce haliyle mi kullanıyorsun?
@@arda91ant evet ben us layout kullaniyorum zaten, sana da tavsiye ederim bu tarz klavyelerden dolayi gectim ama sonradan inanilmaz rahat ettirdi bu duzen beni :)
seri muhtemelen ne kadar sürecek ona göre yapmaya başlayacam bende :D
hocam vite absolute path vscodeu kapatıp acınca sürekli bozuluyor __dirname is not defined hatası veriyor kontrol ettiğim sizin yaptığınızla aynı iki dosyada nasıl cözebilirim bunu acaba
yeni basladim html ve css i az cok ogrendim ama boostrap ogrenmeli miyim bazilari boostrap kullanmayin diyor
ihtiyacin olursa ogrenirsin, html, css ve js bilince otomatik olarak onu da biliyorsun zaten sadece gidip kullanimina bakacaksin o kadar, ben hayatim boyunca bootstrap kullanmadim, kullanan vardir ama cok ihtiyac oldugunu da gormedim, onun yerine tailwind ogren daha cok is yapar
elinize sağlık hocam
Hocam neden nextjs kullanmıyorsunuz. Veya kullanmamız gerekir mi?
ozel bir sebebi yok, kullanmak icin de kullanmamak icin de, kullanadabilirsin, kullanmayadabilirsin :D
üstad webstrom temanızın ismini paylaşabilir misiniz?
Hocam React için Vs Code eklentileriniz nelerdir. import için falan.
eklenti yok, ide kendisi yapiyor bunlari eklentisiz
Teşekkürler hocam
hocam bun videosu gelir mi
Merhaba Routes klasorunde pathleri tanimlarken slash kullandik explore icin vs. Ben yanlislikla bu islemi yaparken slash kullanmadigimi farkettim . Yani ("/notification") yerine ("notification") yazmisim ve yine de calisti. Burada tahminim routes karmasiklastikca bir sikinti olacagi yonunda. Biraz arastirdim ama tam olarak aradigimi bulamadim. Size sormak istedim. Bu arada video cok guzel cok tesekkurler emeginize saglik.
sorun olmaz, sadece children olarak tanimlananlarda slash'li koymamaya dikkat et, muhtemelen calismaz ama calissada sorun olabilir, onlari slash'siz koymak gerekiyor
anladim cok tesekkur ederim.@@PROTOTURKCOM
abi mutlaka devam et seriye çok güzel
Abi SSR ı da baz alarak yapsan ya süper olur, projelerin çoğunda SEO önemli oluyor.
SSR Seo için zorunlu değil, bir sürü örneği var biraz araştırarak bakabilirsin, ben daha önce defalarca ssr olmadan seoları harika olan siteler geliştirdim
@@PROTOTURKCOM abi örnek bir video yayınlar mısın sen anlatınca insan 10 numara anlıyor
hocam merhaba sizi yeni keşfettim videolarınıza devam etmek istiyorum react bilgim var fakat tailwind i bi türlü aktifleyemedim farklı bilgisyarda denesem de olmadı. Farklı videolar bulup onları da birebir yaptım fakat color gibi özellikleri veremiyorum yardım edebilirmisiniz şimdiden teşekkürler
Süper 🎉
Tayfun hocam Laravel API ile de süslersek tadından yenmez :)
InshAllah ardi gelir hocam 😂
Hocam pixel perfect olmasına gerek yok bence ya. Bu video çok daha kısa olabilirdi mesela aynı contentle ama eline sağlık zevkliydi izlemesi
bu yuzden youtube atlama diye bir sey koymus :) ben pixel perfect seviyorum, ama 2. videoda biraz daha az pixel perfect yaptim senin icin
Hocam REACT ve VUE arasında kararsızım hangisini tercih edersiniz araştırdım karar veremedim sizin gibi profesyonelden dinlemek isterim bunu
dostum hiç farketmiyor, birini öğren diğerini de yarı yarıya öğrenmiş oluyorsun, sonra her ikisinde de bilgin olsun birinde uzmanlaş ihtiyaç halinde diğerine de geçersin ben öyle yapıyorum, ben react'de uzmanlaştım ama vue projesi de yazdım, svelte'de yazdım, yani bir süre sonra ben bir şey öğreneyim sadece bunu yazayım muhabbeti ortadan kalkıyor, dil bağımsız oluyorsun
@@PROTOTURKCOM çok teşekkür ederim hocam çok açıklayıcı oldu seviliyorsunuz REACT i da sizin videoları izleyeceğim daha iyi oluyor teşekkür ederim emeğiniz içinde 🫶
Menü elemanlarını oluştururken tek tek NavLink yapıp benzer işlemleri tekrarlamak yerine bir dizi oluşturup objelerle her bir elemanı tanımlasak ve NavLink'i döngüye alsak daha sağlıklı olmaz mı? Teşekkür ederiz devamını bekliyoruz.
Olur, ama önce yapıyı kurup sonra daha iyi hale getiririm ben, benim yoğurt yiyişimde böyle, bir sonraki videoda anlarsın demek istediğimi 😂
Abi süpersin
Hocam bölümler seri gelirse çok iyi olur
👍👍👍
backend kısmını yaptıysan ve server state için react query kullanıyorsan tadından yenmez
Yapmadım yapmayacağım videonun başında da söylediğim gibi :) react query için Prototürk ü kodladığımız seriye bakabilirsin oraya gelecek
@@PROTOTURKCOM olur olur yeriz
Teşekkürler...
Tayfun Hocam bun adlı yeni bir şey çıkmış node.js karşın bir inceleyip anlatabilir misin? Ayrıca herhangi bir dil de bir dokümantasyon nasıl incellenmeli onu da anlatan. bir video gelirse güzel olur ya
Abi en son deploy edip yayınlamayı da gösterir misin lütfen
hiç react tecrübesi olmaya biri izlese faydalı olur mu yoksa temel de olsa bişeyler bilmek gerekiyor mu?
bizim kanaldaki temel react derslerini izleyip buna gel direk, çok faydasını göreceksin
@@PROTOTURKCOM saolun hocam...
bunun İDEsi hangisi ?
webStorm
başlık çok iyi 😂😎
Buralar karışır :D Vaziyet alın!!!
okuldayım hocam eve geçiyim izlicem hemen
sizi dinlemek için geldim sa :)
güzel seri eline sağlık proje full stack mi olacak yoksa front end mi ? bir de nextjs kullandığını hiç görmedim bir ara video gelirse güzel olur son olarakta shadcn ui a göz atmanı öneririm güzel componentler var bu projeye çok uygun olur kullanışlı ve performanslı
on yuz sadece, nextjs'i sevemedim ya, ben front-endci adamim, full-stack proje yapmak istemiyorum artik cok sikildim, ama bu fikrim seneye degisebilir, her an her sey olabilir, sonucta artik icerik ureticisi olduk o da gelebilir :D ama simdilik soz vermeyeyim
hocam Eline Sağlık typescript ile bi proje patlatırsın bence :)
Editörün adı nedir söyler misiniz?
webStorm
@@PROTOTURKCOM Teşekkürler
Hipnoz olmuş gibi izledim. Emeğe saağlık :)
👍
devam edin
11:34 zuahahahaha :D:D:D
simetri hastaları için rahatlama videosu.. ben hizalamaları izlerken aynı orana ulaşınca iyi hissettim :D
Seviliyorsun 😂
teemo main olmasan çok daha iyi olucak hocam
Hahahaha, teemo candır 🤣
P’ye basmaya korkuyor insan 😂😂 harikasın ya
Hocam merhaba kodları takip ediyorum bende yazdıktan sonra tailwind.css dosyasını yazınca bu hatayı alıyorum
"message": "Unknown at rule @tailwind", yardımcı olabilir misiniz?
Esasında olaya satır satır bakmak gerek. Burada twitterın klonunu yapmayı öğretiyor adam ama twitter klonu yapın diye değil. Her satırda bir bilgi mevcut. Her söylediği şeyde yeni bir fikir var. Kendi takıldığı yerlerde yaptığı araştırmayı bile dikkatle inceleyin. Mesele bir eğitim serisinin tamamı değil. Bir video içerisindeki her bir satırdaki bilmediğiniz yöntemleri keşfetmek. O yüzden ben eğitim serisi şeklinde değil de, bu videoda örneğin tailwindle ilgili neler katabilirim kendime diye bakıyorum.
Şunu bir anlayamadılar :)
Abi naptıınnnn hayalim bu benim🎉
hocam bu ne ise yariyor?
Bunu aç karnına yiyorsun iyi geliyor, şaka bi yana react ile proje geliştiriyoruz işte hocam
@@PROTOTURKCOMhocam yukarıda da sordum ama acaba pazaryeri klonu gelir mi yakinda getir yemeksepeti vs gibi yani illa ismini yazmaniza gerek yok getir değilde götür deriz de olsa çok güzel olurdu
@@PROTOTURKCOM sjajajajajajsjsj
Bu hassasiyetle bu X bitmez 😅😅😂😂