- Видео 161
- Просмотров 468 794
Mehmet Pekcan
Добавлен 19 апр 2018
Selamlar ben Mehmet 👋🏼
4 yıllık Frontend tecrübesine sahip birisi olarak React, Next.js ve Vue.js başta olmak üzere bir çok farklı framework/library ile profesyonel web siteleri geliştirme fırsatı buldum 💫
Frontend alanı başta olmak üzere yazılım dünyası ile ilgili gelişme ve haberleri yakından takip etmeyi ve denemeyi çok seven birisiyim 💣
Üniversite ve organizasyonlarda eğitim&konuşmalar yapmanın yanı sıra RUclips ve Udemy üzerinden eğitimler oluşturuyorum. Sektörden öğrendiklerimi tekrar sektöre vermeyi amaç edinmiş birisi olarak bu kanalı açma kararı aldım. 🚀
Bu kanalda Frontend Development ile ilgili içeriklere yer vericem. İçeriklerimde bir framework/teknolojiyi alıp onunla gerçek hayatta kullanabileceğimiz uygulamalar yapıyorum. Özellikle HTML, CSS, JS, React.js, Next.js gibi daha yatkın olduğum konulara ağırlık vermenin yanı sıra diğer Frontend teknolojilerinide kanalımda görüyor olacağız!
4 yıllık Frontend tecrübesine sahip birisi olarak React, Next.js ve Vue.js başta olmak üzere bir çok farklı framework/library ile profesyonel web siteleri geliştirme fırsatı buldum 💫
Frontend alanı başta olmak üzere yazılım dünyası ile ilgili gelişme ve haberleri yakından takip etmeyi ve denemeyi çok seven birisiyim 💣
Üniversite ve organizasyonlarda eğitim&konuşmalar yapmanın yanı sıra RUclips ve Udemy üzerinden eğitimler oluşturuyorum. Sektörden öğrendiklerimi tekrar sektöre vermeyi amaç edinmiş birisi olarak bu kanalı açma kararı aldım. 🚀
Bu kanalda Frontend Development ile ilgili içeriklere yer vericem. İçeriklerimde bir framework/teknolojiyi alıp onunla gerçek hayatta kullanabileceğimiz uygulamalar yapıyorum. Özellikle HTML, CSS, JS, React.js, Next.js gibi daha yatkın olduğum konulara ağırlık vermenin yanı sıra diğer Frontend teknolojilerinide kanalımda görüyor olacağız!
Next.js 13 - JWT ile Auth ve Rol Sistemi
Bu video da en çok kullanılan auth yöntemlerinden birisi olan JWT sistemini manuel olarak en baştan birlikte implement edeceğiz. Bunu yaparken Next.js 13'ü kullanıp, Middleware sayesinde session kontrolünü sürekli olarak yapabileceğiz. JWT token yaratma ve verify işlerimi için ise Jose Npm paketini kullanıyoruz. İyi seyirler.
Final Kodlar:
github.com/mehmetpekcan/nextjs-13-jwt-auth-example
Başlangıç Kodlar:
github.com/mehmetpekcan/nextjs-13-jwt-auth-example/tree/starter
00:00 - JWT Nedir?
02:33 - JWT ile Auth Mantığı?
03:57 - App’i Tanıyalım
06:42 - Auth Middleware’i Oluşturuyoruz
30:28 - Login Akışları
42:38 - Rol Sistemi
🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz:
pekcan.dev
www.linkedin.com/in/me...
Final Kodlar:
github.com/mehmetpekcan/nextjs-13-jwt-auth-example
Başlangıç Kodlar:
github.com/mehmetpekcan/nextjs-13-jwt-auth-example/tree/starter
00:00 - JWT Nedir?
02:33 - JWT ile Auth Mantığı?
03:57 - App’i Tanıyalım
06:42 - Auth Middleware’i Oluşturuyoruz
30:28 - Login Akışları
42:38 - Rol Sistemi
🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz:
pekcan.dev
www.linkedin.com/in/me...
Просмотров: 8 154
Видео
Next.js 13 - Redux ile State Management
Просмотров 7 тыс.Год назад
Bu video ile birlikte Next.js içerisinde Redux ile state management yapmak için gerekli olan kurulum/configuration akışlarını anlatıyorum. Özellikle yeni App klasörü ile birlikte gelen server component'lerden kaynaklı 3 farklı kullanım senaryomuz var: Client side, Server Side, Server to Client (Hydration). Final Kodlar: github.com/mehmetpekcan/nextjs-13-state-management Başlangıç Kodlar: github...
#50 - Statik Analiz - Commit Öncesi Test Kontrol - husky - lint-staged - Modern Frontend Testing
Просмотров 1 тыс.Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Statik Analiz - Commit Öncesi Test Kontrol - husky - lint-staged' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpe...
#49 - Dependency Injection - react-magnetic-di ile Daha İyi DI Yönetimi - Modern Frontend Testing
Просмотров 517Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Dependency Injection - react-magnetic-di ile Daha İyi DI Yönetimi' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superp...
#48 - Dependency Injection - Implementasyon - Modern Frontend Testing
Просмотров 479Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Dependency Injection - Implementasyon' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ...
#47 - Dependency Injection - Nedir? Neden İhtiyaç Duyarız? - Modern Frontend Testing
Просмотров 708Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Dependency Injection - Nedir? Neden İhtiyaç Duyarız?' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/meh...
#46 - Mocking - spyOn ile Fetch'i Mock'lamak - Modern Frontend Testing
Просмотров 389Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'spyOn ile Fetch'i Mock'lamak' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgil...
#45 - Mocking - Npm Paketi Mock Etmek - Axios - Modern Frontend Testing
Просмотров 377Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Npm Paketi Mock Etmek - Axios' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgi...
#44 - Mocking - Module Mock Etmek - Modern Frontend Testing
Просмотров 439Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Module Mock Etmek' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgili etiketler...
#43 - Mocking - Mock Function'ı Detaylandırma - Promise Mocking - Modern Frontend Testing
Просмотров 491Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Mock Function'ı Detaylandırma' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgi...
#42 - Mocking - Function Mock Etme - Modern Frontend Testing
Просмотров 533Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Function Mock Etme' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgili etiketle...
#41 - Mocking - Mock Nedir? Neden İhtiyaç Duyarız? - Modern Frontend Testing
Просмотров 770Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Mock Nedir? Neden İhtiyaç Duyarız?' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile...
#40 - Detaylar - beforeEach ve afterEach Kullanımı - Modern Frontend Testing
Просмотров 381Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'beforeEach ve afterEach Kullanımı' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ...
#39 - Detaylar - Hook Testing ve Act Kullanımı - renderHook - Modern Frontend Testing
Просмотров 322Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Hook Testing ve Act Kullanımı - renderHook' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan V...
#38 - Detaylar - Custom Renderer Setup - Modern Frontend Testing
Просмотров 310Год назад
En çok merak edilen konulardan bir tanesi olan Frontend Testing konusunu React kullanarak ele aldığım Modern Frontend Testing serisine hoşgeldiniz. Bu videoda 'Custom Renderer Setup' konusuna değiniyorum. 🔗 Bana aşağıdaki mecralardan ulaşabilirsiniz: pekcan.dev www.linkedin.com/in/mehmetpekcann/ _mehmetpekcan github.com/mehmetpekcan superpeer.com/mehmetpekcan Video ile ilgili etike...
#37 - Detaylar - Provider ile Component Sarmak - Custom Wrapper - Modern Frontend Testing
Просмотров 348Год назад
#37 - Detaylar - Provider ile Component Sarmak - Custom Wrapper - Modern Frontend Testing
#36 - Kullanıcı Etkileşimleri - Click, Double Click, Hover Events - Modern Frontend Testing
Просмотров 314Год назад
#36 - Kullanıcı Etkileşimleri - Click, Double Click, Hover Events - Modern Frontend Testing
#35 - Kullanıcı Etkileşimleri - Type ve Upload Events - Modern Frontend Testing
Просмотров 312Год назад
#35 - Kullanıcı Etkileşimleri - Type ve Upload Events - Modern Frontend Testing
#34 - Kullanıcı Etkileşimleri - Clear ve Select/Deselect Events - Modern Frontend Testing
Просмотров 301Год назад
#34 - Kullanıcı Etkileşimleri - Clear ve Select/Deselect Events - Modern Frontend Testing
#33 - Kullanıcı Etkileşimleri - Clipboard Events - Copy, Paste, Cut - Modern Frontend Testing
Просмотров 367Год назад
#33 - Kullanıcı Etkileşimleri - Clipboard Events - Copy, Paste, Cut - Modern Frontend Testing
#32 - Kullanıcı Etkileşimleri - Keyboard Events - Modern Frontend Testing
Просмотров 346Год назад
#32 - Kullanıcı Etkileşimleri - Keyboard Events - Modern Frontend Testing
#31 - Kullanıcı Etkileşimleri - Mouse/Pointer Events - Modern Frontend Testing
Просмотров 468Год назад
#31 - Kullanıcı Etkileşimleri - Mouse/Pointer Events - Modern Frontend Testing
#30 - Kullanıcı Etkileşimleri - UserEvents vs FireEvents - Modern Frontend Testing
Просмотров 392Год назад
#30 - Kullanıcı Etkileşimleri - UserEvents vs FireEvents - Modern Frontend Testing
#28 - Queries - DOM Query Selector - Modern Frontend Testing
Просмотров 343Год назад
#28 - Queries - DOM Query Selector - Modern Frontend Testing
#27 - Queries - waitForElementToBeRemoved - Modern Frontend Testing
Просмотров 330Год назад
#27 - Queries - waitForElementToBeRemoved - Modern Frontend Testing
#26 - Queries - waitFor ile Async Test Yazmak - Modern Frontend Testing
Просмотров 425Год назад
#26 - Queries - waitFor ile Async Test Yazmak - Modern Frontend Testing
#29 - Debugging - DOM'u Yazdırmak - Modern Frontend Testing
Просмотров 340Год назад
#29 - Debugging - DOM'u Yazdırmak - Modern Frontend Testing
#25 - Queries - findBy ile Async Test - DOM Update'i Beklemek - Modern Frontend Testing
Просмотров 391Год назад
#25 - Queries - findBy ile Async Test - DOM Update'i Beklemek - Modern Frontend Testing
#24 - Queries - queryBy ile Olmayan Elementleri Kontrol Etmek - Modern Frontend Testing
Просмотров 382Год назад
#24 - Queries - queryBy ile Olmayan Elementleri Kontrol Etmek - Modern Frontend Testing
#23 - Queries - Text Matching Yöntemleri - Modern Frontend Testing
Просмотров 445Год назад
#23 - Queries - Text Matching Yöntemleri - Modern Frontend Testing
kral emegine saglik
baya kaliteli anlatim emeginize saglik reyiz
En sonunda adam gibi proje yaparak ve gerçekten güzel bir anlatımla Next.js dersi bulabildim. Emeğine sağlık kardeşim.
hocam selamlar next js te redux kullanmak mantıklı bir yaklaşım mı acaba
cok kaliteli anlatim tarzi, emeginize saglik tesekkurler.
Eline emeğine sağlık hocam, cidden çok öz ve anlaşılır bir seri olmuş. Kendi adıma çok teşekkür ederim.
öğreneyim diye bir site yapmaya çalışıyorum. 4 saattir şunun cevabını arıyordum tam pes etmişken denk geldim :) çok teşekkür ederim bütün gece dua edicem sana
Çok açıklayıcı teşekkürler
Eğitimler süper. Genelde yorum yazılmadığını gördüm videolara bence bunun sebebi, insanlar o kadar akıcı bir şekilde eğitimlere odaklanıyor ki anlamıyor bile nasıl bittiğini :D Elinize emeğinize sağlık.
Versiyon 14 ile birlikte artık set ve remove işlemleride server tarafında yapılabiliyor
Seo konusundaki yorumlarınızın hiç birine katılmıyorum. 2022 yılından bu yana google arama botları chrome ile CRA aları tarayıp indekleyebilir ve bu konuda da çok başarılıdırlar. Araştırabilirsiniz. Kaynak aklımda değil ama bayağı açıklama bulabilirsiniz. CRA da tarama bütçesi ile ilgili bir sıkıntı var o da iyi bir configle aşılmayacak bir sorun değil.
Gzipped yazan eklentinin adı ne
Emeğine sağlık
o kadar keyifli bi anlatim ki,, isim var kapatmak istiyorum ogrenme istegim agir basiyor izlemeye devam ediyorum. anlatim bu kadar akici ve kusursuz olmasa ayni etkiyi yapmazdi. elinize saglik cook tesekkurler
Çok teşekkürler harika anlatım.👍
Merhaba head bir türlü çalışmadı
Türkiye de ki en kaliteli anlatımı yapıyorsunuz. Ezberden çıkıp nasıl çalıştığını öğrenmek nasıl bir lütuftur. Elinize sağlık.
Tesekkurler Hocam🤍
Hocam Bir tane Proje uzerinden anlatirmisiniz Folder structure falan bunlarda onemli Baya sknti yaratiyor tutorialdan gercek real world projelere gecmek
Selamlar, bazen kodlar arasında eksik parantezler vb şeyler kullanıyorsun fakat sayfayı kaydettiğinde editör otomatik eksikleri düzenliyor bunu hangi plugin ile sağlıyorsun acaba?
"prettier vscode" diye aratarak bulabilirsin. Visual Studio code'ye eklenti olarak ekleyebilirsin, daha sonra ayarlamalarını yap tamamdır.
hocam repositerine nerden ulaşabiliriz?
öğrenmek amacıyla bir çok react dersi izledim hepsinde kafam karıştı yarıda bıraktım. next js dersleri de daha önce izlemiştim ama pek verim alamamıştım. Anlatımın çok sade, ne bildiğini göstermek için değil öğrenilmesi için çekilmiş dersler olmuş. teşekkür ederim kardeşim.
Hocam sizden baka baka bir klon proje yaptım. Çok benzedi ama yapacak bir şey yok. Eğitim için teşekkürler.
haftalardır doğru düzgün next.js öğrenebilecegim kurslar arıyorum. udemy'de yabancı bir hocanın next.js kursuna aladım ama İngilizcem pek iyi olmadığı için anlamıyorum. altyazi ile takip ediyorum ama yeterli olmuyor. Üstüne hoca çok ama çok karmaşık anlatıyor hiçbir şey anlamıyorum. Aradım aradım bazı kaynakları takip ettim en son sizi buldum. cevher bulmuş gibiyim. muhteşem anlatıyorsunuz. en son videoyu 1 sene önce çekmişsiniz. lütfen içerik üretmeye devam edin. anlatımınız çok güzel. Bir çok Türkçe kaynak tükettim yazılım alanında ama gördüğüm en iyi anlatıcı sizsiniz. bunu değerlendirmelisiniz bence. iyi günler dilerim. dersler için teşekkürler.
Hocam merhaba video için teşekkürler. Eğer kullanıcı authsa login sayfasına yönlendirmesin, dashboardda kalsın istiyorum. Bunu tek bir middlewareda tanımlayabiliyor muyuz? Nasıl bir çözümü var yardımcı olur musunuz?
Hocam selamlar, Next.js 15'i de sizden dinlemeyi çok isterim.
Hocam merak ettiğim bir soru var. Her page, her component için bu loading.jsx i neden oluşturuyoruz ? tek bir loading kompanenti oluşturup her yerde çağıramıyormuyuz? MovieLoading, HakkımızdaLoading filan derken kod tekrarına giriyor gibi sanki
sektöre backend ile başlanır mı
bugüne kadar izledigim Turkce yazilim videolari arasinda en iyisi sizinki. En anlasilir akici Yazilim eğitim serisi bu video serisi.
hocam 13.3 versiyon ile root not-found.jsx geldi :)
bunları öğrendik ama yeni mezun oldugum için kimse geri dönüş yapmıyor 😢
Üzerinden zaman geçmiş. Paylaşım yapmayı bırakmışsınız. Videolarını izleyerek pixel perfect kendi tasarımımı birazda chat gpt ile html'e çevirdim. Emekleriniz için teşekkürler. Sizede göstermek isterim.
Hocam merhabalar, projeleriniz izlemeye ve olabilidğince takip etmeye çalışıyorum elinize emeğine sağlık. Bir projede primeflex kullanmamı istediler ve bir custom-theme oluşturmam gerekiyor bunu nasıl yapabilirim kaynakları çok fazla anlayamadım yardımcı olma şansınız var mı ?
css'e yeni başlayanlardanım oldukça açıklayıcı olmuş videon eline sağlık.
Anlatım için teşekkürler. v14 ile gelen generateMetadata fonksiyonu kullanılarak head file'ına gerek kalmadan(duplicate durumundan kaçınılıyor) da metadatalar üretilebiliyor.
Çok teşekkür ederim. Emeğinize sağlık. Nextjs'e yeni başlayanlar için çok başarıı bir eğitim serisi olmuş.
CSS'e yeni başladım sayılır gerçekten anlatımı güzel, etkili bir video olmuş elinize sağlık,
Hocam elinize sağlık anlatımınız çok güzel. ama örnekte sadece console çıktısı yazdıran fonsiyonlar var. Resolve içine text yerine method da yazabiliyor muyuz? Görsel arama motoru yazdım. ilk aramayı yaptıktan sonra div içinde resimler var ya, 2. aramayı yaparsa kullanıcı onları silip 2. arama sonuçlarını getirsin istoyoru. div.innerHTML=" " ; ile de çözülebilyor konu. ama promiseleri anlamak için bu yöntemle if(div.hasChild) ile sorgulatmat istiyorum ama öğrendiklerimi uyarlayamıyorum
@pekcanmehmet bu kursa başlamak için html css js ile belirli bir seviyede olmak gerekir mi? özellike javascriptte ne kadar ileri olmak gerekir
Hocam ellerinize sağlık çok güzel bir anlatım olmuş yeni başladım next.js ' e . Bu arada loadingi görüntülemek için delay koymak yerine network tabından internet hızınızı yavaşlatabilirsiniz . :)
Next.js 15 çıkıyor, yeni seri gelir mi?
çok kalıtelı bır ıcerık olmuş.
Mehmet Bey videolar için teşekkür ederim. Emeğinize sağlık. Her zaman içerik üretin, ben destekliyor olacağım.
Tesekkurler
teşekkür ederim
teşekkür ederim
teşekkür ederim
teşekkür ederim
teşekkür ederim