•5 dk okuma
Yazı yükleniyor...
İş aramak yorucu bir süreç. Özelleştirilmiş CV'ler hazırlamak, birden fazla başvuruyu takip etmek ve her birinin hangi aşamada olduğunu hatırlamak arasında, her şeyin kontrolünü kaybetmek oldukça kolay. Ben de bu süreci ilk elden deneyimledim ve her geliştirici gibi bir sorunla karşılaştığımda, bir çözüm oluşturmaya karar verdim.
İşte JobTrack böyle doğdu—iş arama sürecinin kaosuna netlik ve yapı getirmek için tasarlanmış açık kaynaklı bir iş başvuru takip sistemi.
İş aramam sırasında düzenli kalmak için çeşitli yaklaşımlar denedim:
- Excel tabloları: İşlevsel ama hantal, görsel çekiciliği veya sezgisel bir iş akışı yok
- Notion panoları: Daha iyi, ama yine de çok katı ve iş başvurularına özel değil
- Zihinsel takip: Bu yaklaşımdan bahsetmeyelim bile
İhtiyacım olan şey, bir veritabanının yapısını kanban panosunun görsel netliğiyle birleştiren, iş başvuru sürecine özel bir şeydi. Daha da önemlisi, verilerimin tam kontrolünü istiyordum ve aracı tam ihtiyaçlarıma göre özelleştirebilmek istiyordum.
🎯 Çözüm
JobTrack, iş başvurularını bir pipeline olarak ele alan full-stack bir uygulama. Her başvuru, ilk gönderimden nihai karara kadar aşamalardan geçiyor ve arayüz bu yolculuğu görsel olarak yansıtıyor.
✨ Temel Özellikler
Kanban Tarzı Takip: Başvurular 8 farklı aşamadan geçiyor (Başvuruldu → Test Case → İK Görüşmesi → Teknik Görüşme → Yönetim Görüşmesi → Teklif → Kabul/Red). Sürükle-bırak ile durum güncellemeleri çok kolay.
Eksiksiz Başvuru Bağlamı: Her başvuru ilgili her şeyi saklıyor—şirket adı, pozisyon, çalışma türü, konum, maaş beklentisi, başvuru kaynağı, işveren iletişim bilgileri ve en önemlisi, o başvuru için gönderdiğiniz gerçek CV (PDF olarak).
Akıllı Filtreleme: Şirketler ve pozisyonlar arasında gerçek zamanlı arama, durum, çalışma türü ve kaynak için çoklu filtre desteği. Tüm filtreler URL'de kalıcı, böylece belirli görünümleri yer imlerine ekleyebilir veya paylaşabilirsiniz.
Önemli Başvuruları Sabitle: Kritik başvuruları, diğer sıralama veya filtreleme ne olursa olsun listenin en üstünde tutun.
Özgeçmiş Ekleri (PDF): Her başvuru için gönderdiğiniz tam CV'yi yükleyin.
İletişim Yönetimi: İşveren ve görüşmeci iletişim bilgilerini saklayın.
Notlar ve Ön Yazılar: Her başvuru için detaylı notlar tutun.
Çok Dilli Destek: İngilizce ve Türkçe için tam destek, ek diller için altyapı hazır.
🏗️ Teknik Derinlemesine İnceleme
🧰 Teknoloji Yığını
Geliştirici deneyimini önceliklendiren ve aynı zamanda üretime hazır bir ürün sunan teknolojiler seçtim:
Next.js 16 (App Router): React Server Components ile en son Next.js mükemmel performans sağlıyor. App Router'ın dosya tabanlı yönlendirmesi ve yerleşik API rotaları mimariyi temiz ve sürdürülebilir yaptı.
Supabase: PostgreSQL, kimlik doğrulama ve depolamayı manuel olarak kurmak yerine, Supabase tüm bunları hazır sağlıyor. Row Level Security (RLS) politikaları, kullanıcıların yalnızca kendi verilerine erişebilmesini sağlıyor ki bu çok kiracılı bir uygulama için kritikti.
TypeScript + Zod: Uçtan uca tip güvenliği ve çalışma zamanı doğrulama. Her form gönderimi, API çağrısı ve veritabanı işlemi Zod ile tanımlanan şemalara karşı doğrulanıyor.
Tailwind CSS + shadcn/ui: Utility-first stil ile erişilebilir, birleştirilebilir bileşenler. Tüm UI shadcn/ui bileşenleriyle oluşturuldu—CSS özgüllüğü veya tam uymayan bileşen kütüphaneleriyle uğraşmaya gerek yok.
Zustand: İstemci tarafı durum yönetimi için Zustand, Redux'un karmaşıklığı olmadan yeterli yapı sağlıyor. Onu öncelikle filtre durumlarını ve UI tercihlerini yönetmek için kullanıyorum.
next-intl: Çok dilli destek genellikle sonradan akla geliyor, ama next-intl bunu çok kolay hale getirdi. Tüm metinler JSON çeviri dosyalarında saklanıyor ve dil değiştirme sayfa yenilemesi gerektirmiyor.
🎨 Mimari Öne Çıkanlar
Row Level Security: Her veritabanı tablosunda, kayıtları kimliği doğrulanmış kullanıcılara bağlayan RLS politikaları var. Bu veritabanı seviyesinde gerçekleşiyor, yani uygulama kodumda bir hata olsa bile kullanıcılar birbirlerinin verilerine erişemez.
Varsayılan Olarak Server Components: Uygulamanın çoğu React Server Components kullanıyor, istemci bileşenleri sadece etkileşim gerektiğinde (formlar, modallar, sürükle-bırak). Bu JavaScript paketini küçük tutuyor ve ilk sayfa yüklemelerini hızlı yapıyor.
İyimser UI Güncellemeleri: Bir başvuruyu farklı bir durum sütununa sürüklediğinizde, veritabanı güncellemesi arka planda gerçekleşirken UI hemen güncelleniyor. Güncelleme başarısız olursa UI otomatik olarak geri dönüyor.
Supabase Storage ile Dosya Yükleme: Özgeçmiş ekleri, uygun erişim politikalarıyla Supabase Storage bucket'larında saklanıyor. Dosya yükleme akışı ilerleme takibi ve değiştirilen dosyaların otomatik temizlenmesini içeriyor.
URL Durum Yönetimi: Tüm filtreler ve arama sorguları nuqs kullanılarak URL ile senkronize. Bu, uygulamayı geleneksel bir web uygulaması gibi hissettiriyor—belirli filtrelenmiş görünümlerin bağlantılarını paylaşabilir veya tarayıcının geri düğmesini beklendiği gibi kullanabilirsiniz.
🗄️ Veritabanı Şeması
Temel applications tablosu basit ama kapsamlı:
CREATE TABLE applications (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
user_id UUID REFERENCES auth.users(id),
company_name TEXT NOT NULL,
position TEXT NOT NULL,
status TEXT NOT NULL,
work_type TEXT NOT NULL,
location TEXT,
salary TEXT,
source TEXT,
url TEXT,
recruiter_name TEXT,
recruiter_phone TEXT,
recruiter_email TEXT,
notes TEXT,
cover_letter TEXT,
resume_path TEXT,
is_pinned BOOLEAN DEFAULT FALSE,
applied_date DATE,
created_at TIMESTAMPTZ DEFAULT NOW(),
updated_at TIMESTAMPTZ DEFAULT NOW()
);
Her kayıt oluşturulduğunda veya güncellendiğinde, user_id'nin kimliği doğrulanmış kullanıcıyla eşleştiğinden emin oluyorum. RLS politikaları bunu veritabanı seviyesinde zorunlu kılıyor.
💻 Geliştirme Deneyimi
Hedeflerimden biri temiz, sürdürülebilir bir kod tabanı oluşturmaktı. İşte nasıl göründüğü:
Bileşen Organizasyonu: components dizini, alan özel klasörlere (applications, auth, layout) ve genel bileşenler için bir ui klasörüne ayrılmış. Bu, aradığınızı bulmayı kolaylaştırıyor.
Server Actions: REST endpoint'leri oluşturmak yerine, tüm veri mutasyonları için Next.js Server Actions kullanıyorum. Bu, karmaşıklığı azaltıyor ve ilgili kodu bir arada tutuyor.
Her Yerde Tip Güvenliği: Form doğrulamadan API yanıtlarına kadar her şey tiplendirilmiş. Zod şemaları veri yapıları için tek doğruluk kaynağı görevi görüyor.
Hata Yönetimi: Toast bildirimleri, başarılı veya başarısız tüm kullanıcı eylemleri için anında geri bildirim sağlıyor. Yükleme durumları Suspense sınırlarıyla yönetiliyor.
🎓 Zorluklar ve Öğrenilenler
Sürükle-Bırak Durum Yönetimi: İyimser güncellemelerle sürükle-bırak uygulamak beklenenden daha zordu. Kanban panosunun bir kartı sürüklediğinizde hemen güncellenmesi gerekiyor, ama aynı zamanda sunucunun güncellemeyi reddettiği durumu da ele alması gerekiyor. Sonunda geçici UI durumunu yönetmek için Zustand kullandım ve hata durumunda geri alma yaptım.
Dosya Yükleme UX: Supabase Storage, hazır olarak ilerleme takibini desteklemiyor. Yükleme ilerlemesini göstermek ve kesintiye uğrayan yüklemeler gibi uç durumları ele almak için XMLHttpRequest ile özel yükleme mantığı uygulamak zorunda kaldım.
Server Components ile Çok Dilli Destek: next-intl'i App Router ile sorunsuz çalışacak şekilde ayarlamak dikkatli kurulum gerektirdi. Anahtar, hem sunucu hem de istemci bileşenleriyle çalışan uygun bir locale provider oluşturmaktı.
RLS Politikası Hata Ayıklama: Row Level Security politikaları yazmak güçlü ama hata ayıklaması sinir bozucu olabiliyor. Üretimde onlara güvenmeden önce Supabase SQL editöründe politikaları iyice test etmeyi öğrendim.
🌟 Neden Açık Kaynak?
Açıkta inşa etmeye ve topluluğa katkıda bulunmaya inanıyorum. Bu proje MIT lisanslı ve tamamen açık kaynak, birkaç nedenden dolayı:
- Öğrenme Kaynağı: Diğer geliştiriciler modern araçlarla gerçek dünya full-stack uygulamasının nasıl oluşturulacağını görebilir
- Katkılar Memnuniyetle Karşılanır: Birinin özellik fikri veya hata düzeltmesi varsa, doğrudan katkıda bulunabilir
- Güven: Kullanıcılar kodu inceleyebilir ve verileriyle tam olarak ne olduğunu görebilir
- Portfolyo: Üretime hazır uygulamalar oluşturma yeteneğimi gösteriyor
🔮 Sırada Ne Var?
JobTrack tamamen işlevsel olsa da, düşündüğüm birkaç özellik var:
- Analitik Panosu: Başvuru trendlerini, başarı oranlarını ve işe alım süresini görselleştirme
- E-posta Hatırlatıcıları: Otomatik takip bildirimleri
- Takvim Entegrasyonu: Görüşme tarihlerini Google Calendar veya Outlook ile senkronize etme
- AI Özellikleri: Profilinize göre iş eşleştirme veya iş ilanlarından başvuru detaylarını otomatik doldurma
- Mobil Uygulama: React Native kullanarak native mobil deneyim
🚀 Deneyin
Uygulama jobapplytracker.com adresinde canlı ve kaynak kodu GitHub'da mevcut.
İster aktif olarak iş arıyor olun ister sadece teknoloji yığını merak ediyor olun, geri bildiriminizi duymak isterim. Issue açmaktan, PR göndermekten veya doğrudan benimle iletişime geçmekten çekinmeyin.
Sonuç
JobTrack'i oluşturmak hem kişisel olarak faydalı hem de teknik olarak ödüllendiriciydi. Karşılaştığım gerçek bir sorunu çözdü ve bu süreçte Next.js, Supabase ve modern React pattern'leri konusundaki anlayışımı derinleştirdim.
Ana Çıkarımlar:
- Next.js 16 App Router full-stack uygulamalar oluşturmayı inanılmaz derecede sorunsuz hale getiriyor
- Supabase RLS özel backend mantığı olmadan veritabanı seviyesinde güvenlik sağlıyor
- Her yerde tip güvenliği (TypeScript + Zod) hataları üretime ulaşmadan önce yakalıyor
- Açık kaynak açıkta inşa etmek ve topluluğa katkıda bulunmak anlamına geliyor
Bir dahaki sefer iş ararken JobTrack'i deneyin. Ve benzer bir şey oluşturuyorsanız veya yığının herhangi bir kısmı hakkında sorularınız varsa, iletişime geçmekten çekinmeyin. 🚀