Stourl.com’u Nasıl Geliştirdim?
Başlarken not: Bu yazının ilk versiyonunu 2021 Temmuz ayında yazmıştım. Stourl.com’u 2020 yılında oldukça temel özellikleri ile kodlamıştım. Dolayısıyla bu yazınının ilk halinde o zamanki kullandığım teknolojiler yer alıyordu. Stourl.com’u yeniden başka teknolojiler kullanarak yazdım. Bu yazıyı güncelleyerek yeni haliyle ilgili bilgilere yer verdim.
Merhabalar, bu yazımda Stourl.com‘u nasıl geliştirdiğimi, geliştirirken neler kullandığım hakkında bilgi vereceğim.
Öncelikle Stourl ne işe yarıyor, kısaca bundan bahsedeyim. Stourl ile linklerinizi kaydedebilir, linkleri bir araya getirerek liste oluşturabilir, insanlarla kaydettiğiniz linkleri ve oluşturduğunuz listeleri paylaşabilirsiniz. Ayrıca belirli kategoriler üzerine kanallar açıp linklerinizi ve listelerinizi daha derli toplu halde insanlarla paylaşabilirsiniz.
Stourl fikri bu şekilde ortaya çıkmadı. 2014 senesinde, hayalimde çeşitli özellikleri olan bir link kısaltma aracı kurmak vardı. Bu araç ile linkleri şifreleyebilme, kısaltılan linke özel url oluşturabilme, kısaltılan linkleri kaydetme gibi birçok işlem yapılabilecekti. Daha sonradan sosyal ağ şekline dönüştürmeyi düşündüm ve insanların birbirleri ile link paylaşabileceği bir sosyal ağ haline getirdim.
İlk versiyonunu 2020'de yazdım. İkinci versiyonunu ise 2022'de başlayıp boş vakitlerimde ilerleterek 2024'te tamamlayabildim. Çalıştığım için çok vaktim olmuyordu ve ara sıra vakit ayırarak projeyi yeniden yazabildim.
Tercih Ettiğim Stack
Projeyi ilk yazdığım versiyonunda VueJs ve veritabanı olarak Firebase kullandım. Projeyi yeni versiyonda ise ReactJs ile yazmak istedim. Veritabanı kısmında Firebase’in sunduğu limitler aşırı düşük kalıyordu. Bundan dolayı bu sefer MongoDb tercih ettim.
İlk versiyonda firebase tercih ettiğimden dolayı bir backend projesine gerek yoktu. Sadece tek bir Vue projesi ile kodlamıştım. Yeni versiyonda MongoDb kullanacağım için NodeJs ile backend tarafını yazdım.
Geliştirme Aşamaları
Önce tasarımını yeniden oluşturmaya çalıştım. Belli bir yere kadar getirip tasarımı kodlamaya başladım. Frontend kısmında Vite ile bir React projesi oluşturdum. Css tarafında ilk versiyonda Scss tercih etmiştim, bu sefer tailwind kullanmak istedim. UI’ı kodlarken bu zaman içerisinde sürekli düzenlemeler yaptım. Hâlâ daha gözüme hoş gelmeyen yerler olabiliyor, o yerleri düzenliyorum.
UI kodlamasını bitirip backend projesini oluşturdum. Burada express ve mongoose kütüphanelerini kullanarak gerekli model’leri, controller’ları ve middleware’leri oluşturdum.
Daha sonra frontend tarafında çok düzgün bir structure oluşturmam gerekliydi. Şöyle bir düzen oluşturdum. Projede kullanılan temel componentleri (button, checkbox, modal, tooltip vs.) “components” klasörü altında topladım.
Partial olmayan ve bazı sayfalarda ortak kullanılan componentleri ise “common” altında topladım. Buna örnek olarak link ekleme componenti, kanal kart componenti vs.
Sadece bir kere kullanılmış ve component olamayacak kısımları ise pages altındaki her bir sayfanının kendi klasörü içinde “partials” klasöründe tuttum.
Ayrıca ortak fonksiyonlar, sabit değişkenler, enum’ları ise helpers altında tuttum.
Tr ve En olmak üzere iki dil seçeneği var. Bunun için bir kütüphane kullanmadım. Json dosyalarında metinleri depolayıp basit bir logicle bu yapıyı kurdum.
Store olarak “easy-peasy” kütüphanesini tercih ettim. Bu kütüphaneyi tercih etme sebebim Redux’a göre inanılmaz derecede daha basit ve daha yalın. İşimi çok rahat gördü. Projedeki modüller için (linkler, kanallar, kullanıcılar, genel) ayrı store’lar oluşturdum.
Projedeki iconlar için “tabler-icons” kütüphanesini tercih ettim. Oldukça kapsamlı bir kütüphane. Yinede bu kütüphanede olmayan iconları ayrıca projeye ekledim.
Barındırma
Barındırma konusunda hem backend projesini hemde frontend projesini Vercel üzerinde yayımladım. Hobi amaçlı geliştirdiğim bir proje olduğu için Vercel’in free kısmı işimi görüyordu.
— — —
Bu yazıda kısaca stourl.com’u nasıl yeniden geliştirdiğimi anlattım. Benimle burada yer alan mail adresim ve sosyal medya hesaplarım ile iletişime geçebilirsiniz.
Başka yazılarda görüşmek üzere.
