04 / 04

Keepr

React, Flask, PostgreSQL ve Expo ile geliştirilen full-stack dijital arşiv. Web’de karşılaşılan bağlantıları saklamak, kategoriler altında düzenlemek, hatırlatıcılarla geri getirmek ve farklı cihazlar arasında erişilebilir tutmak için tasarlandı.

Durum: Tamamlandı
Rol: Ürün tasarımı, full-stack geliştirme, mobil deneyim, API ve veri mimarisi
Teknolojiler: React · Flask · PostgreSQL · Expo

Genel Bakış

Kaydedilen bağlantıları pasif bir listeden kullanılabilir bir dijital hafızaya dönüştürmek.

Bağlam: Keepr, daha sonra okunmak, izlenmek veya kullanılmak üzere saklanan dijital bağlantıları tek bir düzenli çalışma alanında toplayan full-stack bir kişisel bilgi alanıdır. Web arayüzü; bağlantı ekleme, kategori oluşturma, arama, filtreleme, sıralama, favorileme, sabitleme ve toplu işlemleri destekler. Expo tabanlı mobil uygulama ise cihazın yerel paylaşım menüsünden bağlantı alarak kaydetme süresini kısaltır.
Hedef: Bağlantı saklamayı tek başına yeterli görmemek: hatırlatıcılar, paylaşılan koleksiyonlar, alt klasörler ve klavye aksiyonlarıyla kaydedilen içeriğin daha sonra gerçekten tekrar kullanılabilmesini sağlamak.
Norvane’in rolü: Ürün tasarımı, full-stack geliştirme, mobil deneyim, API ve veri mimarisi

İhtiyaç

Kullanıcılar ilgilendikleri içerikleri çoğu zaman açık sekmeler, mesajlaşma uygulamaları, notlar ve tarayıcı yer imleri arasında dağıtır.

Bu yöntemler içeriğin saklanmasını sağlasa da daha sonra bulunmasını, sınıflandırılmasını ve doğru zamanda yeniden hatırlanmasını garanti etmez. Bir bağlantı yalnız URL olarak saklandığında, onu kaydettiren bağlam da birlikte kaybolur.

Keepr’ın temel ürün problemi, bağlantıyı kaydetme süresini mümkün olduğunca kısaltırken büyüyen bir arşivi okunabilir, aranabilir ve eyleme dönüştürülebilir tutmaktır.

Dağınık saklama alanlarıBağlantıların farklı uygulamalarda ve açık sekmelerde kaybolmasını azaltmak.
Zayıf yeniden bulmaKaydedilen içeriği kategori, arama ve sıralama üzerinden yeniden erişilebilir yapmak.
Unutulan içeriklerHatırlatıcılar aracılığıyla bağlantıları doğru zamanda yeniden görünür hâle getirmek.
Cihazlar arası sürtünmeMobilde görülen bir bağlantıyı arşive aktarmak için gereken adımları azaltmak.
Büyüyen koleksiyonlarKlasör, alt klasör, paylaşım ve toplu işlem yapılarıyla büyük arşivleri yönetilebilir tutmak.

Çözüm

Keepr üç katmandan oluşur: React ve TypeScript tabanlı web arayüzü, Expo React Native mobil uygulaması ve Flask REST API. İki istemci de aynı API ve aynı veri katmanı üzerinde çalışır; ayrıştıkları yer yakalama biçimidir.

Paket erişimi yalnız arayüzde özellik gizleyerek değil, sunucu tarafında da kontrol edilerek uygulanır. Bu, arayüz katmanını atlayan bir isteğin paket sınırını da atlamasını engelleyen tarafta tutar.

Tasarım tarafında sistem açık ve koyu tema, nötr yüzeyler, küçük radius değerleri ve kontrollü indigo vurgu üzerine kuruludur. Vurgu rengi ana aksiyon, aktif durum ve odak geri bildirimi için ayrılmıştır; hareket ise uygulamayı sürekli canlı tutmak yerine değişen durumları açıklamak için kullanılır.

Önce yakalama süresi
Kaydetme akışı, kullanıcıyı sınıflandırmaya zorlamadan tamamlanabilir; düzenleme sonraya bırakılabilir.
Kayıt kullanıcı onayıyla
Panoda algılanan bağlantı bir öneri olarak gösterilir; hiçbir bağlantı onay olmadan arşive yazılmaz.
Sınırlar sunucu tarafında
Paket gerektiren işlemler arayüzde gizlenmekle kalmaz, API katmanında da erişim kontrolünden geçer.
Sınırlı hiyerarşi
Klasör derinliği iki seviyeyle sınırlandırılır; dairesel referanslar backend doğrulamasıyla engellenir.
Durum yalnız renkle anlatılmaz
Paylaşılan klasörler ve salt okunur roller rozet ve etiketlerle de ayrılır.

İstemci ve API

React ve TypeScript web arayüzü
Expo React Native mobil uygulaması
Bearer JWT ile Flask REST API
Kullanıcı, bağlantı, kategori, paylaşım ve hatırlatıcı işlemleri
PostgreSQL ilişkisel veri katmanı

Bağlantı akışı

Web ekleme alanı veya mobil paylaşım menüsü
API tarafında URL formatı doğrulaması
Hedef sayfanın metadata alanlarından başlık algılama
Kaydın oluşturulması ve isteğe bağlı kategori ataması
Arama, favori, sabitleme, hatırlatıcı ve paylaşım akışlarına dahil olma

Tasarım token’ları

Vurgu — indigo#4F46E5
Vurgu — etkileşim#4338CA
Uyarı ve silme#EF4444
Açık tema — zemin#F8F9FA
Açık tema — birincil metin#1A1A1A
Koyu tema — zemin#0A0A0A
Koyu tema — yüzey#121212
Koyu tema — birincil metin#F5F5F7

Özellikler

Bir URL’yi düzenlenebilir bir kayda dönüştürmek

Kullanıcı yeni bir bağlantı eklediğinde sistem URL formatını doğrular ve kaydın başlığını hedef sayfanın metadata alanlarından algılamaya çalışır. Başlık; Open Graph, Twitter Card veya HTML title alanlarından okunur.

Bağlantı isteğe bağlı bir kategoriye atanabilir; başlık ve açıklama kullanıcı tarafından düzenlenebilir. Kayıt oluşturulduktan sonra arama, favori, sabitleme ve hatırlatıcı akışlarına dahil olur.

URL format doğrulaması
Metadata alanlarından başlık algılama
Düzenlenebilir başlık ve açıklama
İsteğe bağlı kategori ataması

Panodaki bağlantıyı kullanıcı niyetine dönüştürmek

Kullanıcı Keepr sekmesine geri döndüğünde, tarayıcı izni mevcutsa pano içeriği kontrol edilebilir. Geçerli bir web adresi algılandığında ekranın altında hızlı kaydetme yüzeyi gösterilir.

Bağlantı kullanıcı onayı olmadan kaydedilmez: algılama yalnız öneriyi üretir, kaydetme aksiyonu kullanıcıda kalır. Pano erişimi tarayıcı izinlerine bağlı olduğu için bu akış her ortamda garanti edilmez.

Yalnız tarayıcı izni varsa çalışır
Otomatik kayıt yok
Web ve mobil hızlı kayıt

Hızlı tarama ile ayrıntılı incelemeyi dengelemek

Bağlantı kartları başlık, kaynak, kategori ve kayıt durumlarını yoğun fakat sade bir düzende sunar. Bir kayıt seçildiğinde inspector paneli açılarak bağlantı bilgileri ve kullanılabilir aksiyonlar daha geniş bir yüzeyde gösterilir.

Panelden bağlantı açma, düzenleme, kategori değiştirme, favori ve sabitleme durumunu değiştirme, hatırlatıcı oluşturma ve silme işlemleri yürütülür. Aksiyonların bir bölümü paket erişimine bağlıdır.

Kart ve liste düzenleri
Tek yüzeyde bağlantı aksiyonları
Pakete duyarlı aksiyonlar

Büyüyen arşivi arama ve sınırlı hiyerarşiyle taramak

Keepr; başlık, açıklama ve URL alanlarında metin araması yapar. Kayıtlar kategori veya favori görünümü üzerinden filtrelenebilir, en yeni, en eski ve alfabetik olarak sıralanabilir. Sabitlenmiş bağlantılar varsayılan sıralamada öne alınır. Arama alanına Command + K veya Control + K ile odaklanılır.

Bağlantılar ana kategoriler ve alt klasörler altında düzenlenir. Hiyerarşi en fazla iki seviyeyle sınırlıdır; dairesel referanslar ve desteklenmeyen derinlik backend doğrulamalarıyla engellenir. Bir kategori silindiğinde içindeki bağlantılar birlikte silinmek yerine kategorisiz alana taşınabilir.

Başlık, açıklama ve URL araması
En yeni, en eski ve alfabetik sıralama
İki seviyeli alt klasör sınırı
Klasör silmede bağlantı koruması

Koleksiyon üzerinde işlem yapmak ve klavyeyle hızlanmak

Seçim modu; birden fazla bağlantının aynı anda taşınmasını, silinmesini, favori durumunun değiştirilmesini veya sabitlenmesini destekler. Salt okunur erişime sahip olunan paylaşılan koleksiyonlarda düzenleyici toplu aksiyonlar kapalıdır.

Tekrarlayan arşiv işlemleri klavyeden yürütülebilir: F favori durumunu, P sabitleme durumunu değiştirir, A hatırlatıcı panelini açar, Delete veya Backspace bağlantıyı siler, Escape açık paneli kapatır.

F — favori, P — sabitle, A — hatırlatıcı
Delete veya Backspace — sil
Salt okunur koleksiyonlarda kapalı

Kaydedilen bağlantıyı doğru zamanda yeniden görünür kılmak

Pro ve Team kullanıcıları bir bağlantı için tarih ve saat belirleyerek hatırlatıcı oluşturabilir. Backend tarafındaki zamanlanmış görev belirli aralıklarla zamanı gelen kayıtları kontrol eder ve uygun e-posta yapılandırması mevcutsa bağlantı başlığını ve adresini içeren bir hatırlatma e-postası gönderilir.

E-posta servisi yapılandırılmamışsa mevcut geliştirme davranışı log çıktısına düşer. Favori ve sabitleme aksiyonları ise aynı ihtiyacın kalıcı hâlidir: önemli kayıtları arşivin yüzeyinde tutar, sabitlenmiş bağlantılar varsayılan sıralamada öne alınır.

Tarih ve saat bazlı hatırlatıcı
Zamanlanmış backend kontrolü
E-posta yapılandırması yoksa log fallback
Favori ve sabitleme — Pro ve Team

Özel arşivden kontrollü paylaşıma ve ortak klasöre

Team kullanıcıları bir ana kategoriyi paylaşılabilir koleksiyon hâline getirebilir. Paylaşılan sayfa, kök kategorideki bağlantılarla alt klasörlerin içeriğini responsive bir görünümde sunar; özel olarak işaretlenen bağlantılar bu çıktıya dahil edilmez. Sonuç, bağlantıya sahip ziyaretçiler için salt okunur bir sunum alanıdır.

Aynı yapı ekip çalışmasına da açılır: kategori bazlı davet oluşturulur ve davet edilen kullanıcı viewer veya editor rolüyle koleksiyona erişir. Viewer yalnız görüntüler, editor bağlantı ekleyip düzenleyebilir. Arayüz paylaşılan klasörleri ve salt okunur durumları görünür etiketlerle ayırır.

Kök kategori bazlı paylaşım
Özel bağlantılar paylaşıma dahil değil
Viewer ve editor rolleri
Ortak klasörler — Team

Aynı arşive farklı yakalama biçimleriyle erişmek

Web uygulaması büyük koleksiyonların düzenlenmesi, aranması ve toplu yönetimi için geniş bir çalışma alanı sunar.

Expo tabanlı mobil uygulama hızlı kayıt ve hareket hâlindeki kullanım senaryolarına odaklanır: işletim sisteminin paylaşım menüsünden Keepr seçildiğinde paylaşılan URL yakalanır ve kategori seçimiyle kaydedilir. İki istemci de aynı API ve aynı veri katmanı üzerinde çalışır.

Web — düzenleme ve toplu yönetim
Mobil — paylaşım menüsünden yakalama
Tek API, tek veri katmanı

E-posta doğrulamasını kısa ömürlü kod ve token oturumuyla yönetmek

Kayıt sırasında kullanıcı adı, e-posta, şifre ve gerekli onay bilgileri alınır; hesap doğrulanmadan normal oturum akışına geçilmez. Altı haneli OTP veritabanında düz metin olarak saklanmaz: kodun HMAC-SHA256 özeti kaydedilir ve girilen değer zaman uyumlu karşılaştırmayla doğrulanır.

Doğrulama tamamlandığında yaklaşık on beş dakikalık kısa ömürlü access token ile kriptografik olarak üretilen ve veritabanında takip edilen refresh token oturumu oluşturulur. Refresh token kullanıldığında eski kayıt iptal edilip yenisi üretilir; iptal edilmiş bir tokenın tekrar kullanımı algılanırsa ilgili oturumlar kapatılabilir.

Başarısız giriş denemeleri IP ve e-posta bağlamında kaydedilir ve eşik aşıldığında geçici erişim blokları uygulanabilir. Parola güncellemelerinde geçmiş parolaların tekrar kullanımı engellenir; kayıt, giriş, çıkış, parola değişikliği ve toplu bağlantı işlemleri audit log üzerinden izlenir.

OTP düz metin olarak saklanmaz
Kısa ömürlü access, izlenen refresh token
Başarısız deneme takibi ve geçici blok
Parola geçmişi ve audit log

Özellik erişimini Free, Pro ve Team katmanlarında modellemek

Free katmanı bağlantı kaydetme, kategori kullanımı, arama ve düzenlemeyi kapsar. Pro; tema ve vurgu rengi seçimi, favoriler, sabitleme ve hatırlatıcıları açar. Team ise Pro’nun üzerine alt klasörleri, ortak klasörleri ve koleksiyon paylaşımını ekler.

Backend katmanı yalnız arayüzde özellik gizlemekle yetinmez; paket gerektiren API işlemleri sunucu tarafında da erişim kontrolünden geçer. Mevcut proje kapsamında paket yükseltme işlemi test amaçlı bir mock endpoint üzerinden simüle edilir — gerçek ödeme veya abonelik tahsilatı bulunmaz.

Sunucu tarafında paket kontrolü
Yükseltme test amaçlı mock endpoint
Gerçek ödeme altyapısı yok

Teknik Yapı

Web ve mobil istemcileri aynı API ve veri katmanında birleştiren bir monorepo. İstemciler Bearer JWT üzerinden Flask API ile haberleşir; PostgreSQL kullanıcı, kategori, bağlantı, token ve audit kayıtlarının ilişkisel katmanını oluşturur.

Web arayüzü: React 19 · TypeScript · Vite · Tailwind CSS · TanStack Query · Framer Motion · Lucide React
Mobil: Expo · React Native · expo-share-intent · lucide-react-native
Uygulama katmanı: Flask · Flask-SQLAlchemy · Flask-Migrate · PyJWT · BeautifulSoup · cloudscraper
Veri: PostgreSQL

Sonuç

Keepr; bağlantı kaydetme, sınıflandırma, arama, hızlı aksiyon, hatırlatma ve paylaşım ihtiyaçlarını web ve mobil deneyimler üzerinden tek ürün mimarisinde birleştirir.

Proje yalnızca görsel bir yer imi arayüzü değil; kimlik doğrulama, token oturumları, paket erişimleri, ilişkisel veri modeli, ortak klasör yetkileri, zamanlanmış görevler ve çapraz platform yakalama akışlarını birlikte ele alan bir full-stack ürün çalışmasıdır.

Mevcut kapsam ve sonraki geliştirme alanları

Gerçek ödeme veya abonelik tahsilatı bulunmaz; paket yükseltme test amaçlı bir mock endpoint üzerinden çalışır.
SMTP yapılandırması üretim ortamında doğrulanmadığı sürece OTP ve hatırlatıcı e-posta teslimi aktif bir hizmet olarak sunulmaz.
Metadata çıkarımı bağlantı başlığıyla sınırlıdır; açıklama ve görsel çıkarımı doğrulanmış bir özellik olarak gösterilmez.
Okuma süresi tahmini doğrulanmadı; yeterli içerik verisi olmadan güvenilir biçimde üretilemez.
Çevrimdışı çalışma ve senkronizasyon roadmap aşamasındadır.
Detaylı kullanım analitiği roadmap aşamasındadır.
App Store ve Google Play yayını doğrulanmamıştır.
Mobil paylaşım akışı gerçek cihaz ve build üzerinde ayrıca doğrulanmalıdır.
Paylaşılan koleksiyonlar salt okunur sunum sağlar; parola koruması veya erişim analitiği bulunmaz.
Ürün bağımsız bir güvenlik denetiminden geçmemiştir.

Sonraki proje

EstateFlow

React, TypeScript, FastAPI ve Firebase ile geliştirilen tam yığın emlak platformu. İlan keşfi, filtreleme, harita üzerinde konum, detay sayfaları, favoriler, karşılaştırma ve rol tabanlı yönetim paneli içeriyor.

Projeyi İncele

Benzer bir dijital ürün üzerinde mi çalışıyorsunuz?

İhtiyacı, mevcut durumu ve hedeflerinizi paylaşın. Uygun başlangıç noktasını birlikte değerlendirelim.

Projenizi Anlatın

Proje özeti