Memehub — Web & Mobil Uygulama
TanStack Start ve React 19 ile geliştirilmiş web arayüzü; aynı REST API ve iş mantığı üzerinden Flutter mobil istemcisiyle monorepo mimaride çalışan; Meilisearch tabanlı toleranslı arama, çoklu medya, Pinterest tarzı koleksiyonlar, Cloudflare R2 ve better-auth sunan tam yığın meme platformu.
- süre
- 6 hafta
- ekip
- Solo
- rol
- Full-Stack Developer (Web, API, Mobil, Altyapı)
- kategori
- Full Stack · Mobil
Memehub, kullanıcıların meme içeriklerini hızlıca bulmasını hedefleyen, yazım hatalarına duyarlı arama deneyimi sunan bir platformdur. Arka planda Meilisearch ile alt yüz millisaniye seviyesinde öneri ve tam metin arama sağlanır; içerikler PostgreSQL ve Drizzle ORM ile modellenir, medya dosyaları Cloudflare R2 üzerinden S3 uyumlu API ve imzalı yükleme URL’leri ile saklanır ve önizleme/format dönüşümleri için sharp kullanılır. OCR ve anahtar kelime çıkarımı için tesseract.js devreye alınır.
İş kuralları uygulama içinde tekilleştirilmiş servis katmanında toplanır; web hem sunucu fonksiyonlarını hem mobil ve üçüncü taraflar için `/api/v1/*` REST yüzeyini aynı Zod doğrulaması ve servislerle paylaşır. Kimlik doğrulama better-auth ile e-posta/şifre ve mobil için bearer token senaryolarına göre yapılandırılır. Flutter istemcisi web ile hizalı tasarım token’ları ve akışlarla Riverpod, go_router, Dio (önbellek katmanı ile) ve güvenli token saklama kullanır.
Yüklenen içerik moderasyon kuyruğundan geçer; yerleşik admin paneli ile onay akışı desteklenir. Arayüz Türkçe i18n ile sunulur; OKLCH tabanlı açık/koyu tema ve sistem tercihi desteklenir. Kalite tarafında Vitest birim testleri, Playwright e2e ve oxlint/oxfmt ile tutarlı kod stili hedeflenir. Yerel geliştirme için Docker Compose (PostgreSQL, Meilisearch); üretim için Dokploy tabanlı stack (`docker-compose.prod.yml`) kullanılır.
- Yazım hatasına toleranslı arama: Meilisearch ile tam metin ve hızlı otomatik tamamlama / öneri
- Zengin medya: JPG/PNG/WebP, GIF, MP4/WebM; YouTube, Instagram, X (Twitter), TikTok gömülü oynatıcılar
- Pinterest tarzı koleksiyonlar: kaydetme akışı, panolar, uzun basarak varsayılan panoya hızlı kayıt
- Paylaşılabilir profil ve panolar: `/u/<id>` ve `/u/<id>/c/<slug>`; public / unlisted / private görünürlük
- Tek kaynaklı iş mantığı: sunucu fonksiyonları ve REST handler’ların ortak servis + Zod şemaları kullanması
- Güvenli medya yükleme: R2 için imzalı URL’ler, CDN üzerinden dağıtım
- Kimlik doğrulama: better-auth; web için oturum, mobil için bearer plugin
- Moderasyon: insan onaylı yükleme kuyruğu ve admin arayüzü
- Görüntü ve metin işleme: sharp ile thumbnail/format; tesseract.js ile OCR tabanlı anahtar kelime yardımı
- Çift istemci: TanStack Start + React 19 web; Flutter native mobil, ortak REST kontratı
- Mobil UX: Riverpod, önbellekli ağ katmanı, güvenli token, ızgara/liste, medya oynatma
- Kalite: Vitest, Playwright e2e; oxlint / oxfmt ile kod stili
- Tema ve erişilebilirlik: OKLCH tasarım token’ları, sistem / kullanıcı karanlık mod tercihi, Türkçe i18n
teknolojiler · 33
- TanStack Start (Vite, Nitro)
- TanStack Router
- TanStack Query
- React 19
- Tailwind CSS v4
- Drizzle ORM
- PostgreSQL 16
- Meilisearch 1.x
- better-auth
- Cloudflare R2 (AWS SDK v3, imzalı yükleme)
- sharp
- tesseract.js
- Zod
- react-hook-form
- Vitest
- Playwright
- pnpm
- oxlint / oxfmt
- TypeScript
- Flutter
- Dart
- flutter_riverpod
- go_router
- Dio
- dio_cache_interceptor
- freezed / json_serializable
- flutter_secure_storage
- cached_network_image
- flutter_staggered_grid_view
- video_player / chewie
- Material Design / intl
- Docker Compose
- Dokploy (docker-compose.prod.yml)
ekran görüntüleri · 5 kare
