Bu makalede kendi frontend geliştirme ortamımı, kullandığım araçları, eklentileri ve proje standartlarımı paylaşmak istiyorum. IDE tercihimden tarayıcı eklentilerime, proje klasör yapımdan kod standartlarıma kadar tüm detayları burada bulabileceksiniz.
Bu paylaşımın başka frontend geliştiricilere fikir vermesi ve kendi çalışma düzenlerini oluştururken ilham olmasını amaçlıyorum.
Geliştirme Ortamı
Geliştirme sürecimde 13" MacBook Pro M1 kullanıyorum, ilerleyen zamanlarda bunu Mac mini M4 Pro modeline yükseltmeyi planlıyorum. Ekipmanlarımı 27" 4K ASUS monitör, G513 Carbon klavye ve G703 mouse ile birlikte kullanıyorum.
Günlük Rutinim
Güncel kalmak için farklı kaynaklardan yararlanıyorum. Takip ettiğim blog yazarlarını Raindrop hesabımda paylaştım. Ayrıca GitHub Trends sayfasında günlük, haftalık ve aylık bazda TypeScript ve SCSS başlıklarını düzenli olarak inceliyorum.
Takip Ettiğim Bloglar - Raindrop
Kullandığım IDE
Uzun süre boyunca geliştirme ortamımda VSCode kullandım. Ancak Cursor’un sunduğu yapay zeka destekli yetenekleri deneyimledikten sonra Pro üyelik aldım ve artık ana geliştirme ortamım olarak Cursor kullanıyorum.
Cursor’da özellikle Ask Mode benim için çok değerli. Teknik konularda kapsamlı bir geliştirme yapmam gerektiğinde veya fikir aşamasında tartışmaya ihtiyaç duyduğumda önce Ask Mode ile planımı netleştiriyorum, ardından projeyi kodlamaya başlıyorum. Bu sayede hem zaman kazanıyorum hem de daha doğru teknik kararlar alabiliyorum.
Bunlara ek olarak, çoğunlukla ChatGPT 5 ile sohbet ediyorum. Konular bazen teknik olurken bazen de tamamen günlük planlarım veya bağımsız konular olabiliyor.
Cursor Rules
Cursor’u kullanırken kendi kod standartlarımı korumak adına özel Rules girdim. Bu sayede her projede aynı yazım, stil ve standartlar korunuyor.
Ben bu kuralları IDE’ye yazarak tüm projelerimde aktif olacak şekilde ayarladım, ancak istenirse proje bazlı .cursorrules dosyası da oluşturulabilir.
Tarayıcı Eklentilerim
Geliştirme sürecinde ve günlük kullanımda Chrome tarayıcısını tercih ediyorum.
Daily.dev eklentisini özellikle tavsiye ediyorum. İlgi alanlarınızı seçtiğinizde, her yeni sekme açtığınızda bu alanlarla ilgili en güncel paketler, YouTube videoları ve makaleler gibi içerikleri karşınıza getiriyor.
Kullandığım tüm eklentileri Raindrop hesabımda listeliyorum. İncelemek isteyenler buradan ulaşabilir: Raindrop - Uygulama ve Eklentiler
Proje Yapım
Projelerimde kullandığım folder structure hibrit bir yapı: Feature-based + Atomic Design + Layered Architecture. Hem tekrar kullanılabilirliği hem de ölçeklenebilirliği öncelikli tutuyorum.
Next.js projelerinde kullandığım src klasörü yapım:
src
├── app
├── assets
├── components
│ ├── icons
│ ├── features
│ ├── shared
│ ├── skeletons
│ ├── ui
│ └── widgets
├── constants
├── data
├── helpers
├── hooks
├── i18n
├── lib
├── providers
├── schemas
├── services
├── stores
├── types
└── .middlewareKlasör yapımın detaylı halini GitHub - Next.js Boilerplate Projesi linki üzerinden inceleyebilirsiniz.
Sizin çalışma ortamınız nasıl? Bana önerebileceğiniz araçlar, eklentiler veya yöntemler varsa bana ulaşabilirsiniz. Görüş ve önerilerinizi duymaktan memnuniyet duyarım.