QR kodla açılan, keynote sonu anket ve opsiyonel lead toplama uygulaması.
Bu proje şu akış için tasarlandı:
QR → labs.indigonix.ai → Next.js form → Supabase DB → local n8n → Google Sheets / e-posta bildirimi
- Mobil uyumlu 3 adımlı anket arayüzü
- KVKK aydınlatma metni sayfası taslağı
- Next.js API route ile sunucu tarafı kayıt
- Supabase SQL şeması
- n8n workflow JSON örneği
- Vercel + GitHub ile hızlı yayın akışı
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Supabase
- n8n (local veya server)
- Node.js 20+
- npm veya pnpm
- GitHub hesabı
- Vercel hesabı
- Supabase hesabı
- İsteğe bağlı: local n8n
npm install
npm run devTarayıcıda aç:
http://localhost:3000Supabase üzerinde yeni bir project aç.
Supabase SQL Editor içine supabase/schema.sql dosyasının içeriğini yapıştır ve çalıştır.
Bu tabloyu oluşturur:
survey_responses
Supabase Project Settings içinden şunları kopyala:
- Project URL
- anon public key
- service role key
.env.example dosyasını .env.local olarak kopyala.
cp .env.example .env.localSonra doldur:
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY=YOUR_SERVICE_ROLE_KEY
N8N_WEBHOOK_URL=
N8N_WEBHOOK_SECRET=
MIN_FORM_FILL_MS=2500SUPABASE_SERVICE_ROLE_KEYsadece server tarafında kullanılır.- Bu anahtarı kesinlikle client tarafına koyma.
N8N_WEBHOOK_URLboş bırakılırsa uygulama çalışır; sadece n8n bildirimi göndermez.
Form gönderildiğinde:
/api/submitendpoint’i çağrılır- Zod ile validasyon yapılır
- Honeypot alanı kontrol edilir
- Çok hızlı gönderimler bot ihtimaline karşı reddedilir
- Veri Supabase tablosuna yazılır
N8N_WEBHOOK_URLvarsa n8n’e ek payload gönderilir
docker run -it --rm \
--name n8n \
-p 5678:5678 \
-v ~/.n8n:/home/node/.n8n \
docker.n8n.io/n8nio/n8nSonra paneli aç:
http://localhost:5678n8n-workflow.jsondosyasını import et- Webhook node’un URL’sini al
- Bu URL’yi
.env.localiçindekiN8N_WEBHOOK_URLalanına yaz - Google Sheets ve SMTP credential’larını kendi hesabınla bağla
İlk aşamada local n8n yeterlidir. Ama production’da 7/24 çalışan akışlar için n8n’i kalıcı bir server veya VPS üstüne taşımak daha doğru olur.
n8n workflow içindeki Google Sheets node’unu kendi sheet’inle eşleştir.
Önerilen kolonlar:
- submitted_at
- rating
- key_insight
- ai_maturity
- desired_use_case
- biggest_challenge
- contact_opt_in
- name
- phone
- company
Böylece DB ana kaynak olur, Sheets operasyonel liste olarak kullanılır.
git init
git add .
git commit -m "Initial survey app"GitHub’da yeni repo açtıktan sonra:
git remote add origin YOUR_GITHUB_REPO_URL
git branch -M main
git push -u origin main- Vercel dashboard → Add New Project
- GitHub repo’nu seç
- Framework: Next.js olarak otomatik algılanır
Vercel Project Settings → Environment Variables kısmına .env.local içindeki tüm değerleri ekle.
Özellikle:
NEXT_PUBLIC_APP_URLNEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYSUPABASE_SERVICE_ROLE_KEYN8N_WEBHOOK_URLN8N_WEBHOOK_SECRETMIN_FORM_FILL_MS
Production URL’n hazır olduktan sonra:
NEXT_PUBLIC_APP_URL=https://labs.indigonix.aiolarak güncelle- yeniden deploy et
Vercel içinde bu projeye labs.indigonix.ai domain’ini bağla.
Adımlar:
- Vercel Project → Settings → Domains
labs.indigonix.aiekle- DNS tarafında gerekli CNAME / A kayıtlarını Vercel’in verdiği şekilde tanımla
QR kodun hedefi şu olsun:
https://labs.indigonix.ai
Etkinlik slaydında kısa bir CTA kullan:
Sunuma 60 saniyelik katkınızı bırakın. QR’ı okutun, görüşünüzü paylaşın.
İstersen daha sonra bu repo içine özel bir QR üretim scripti de ekleyebilirsin.
Bu repo içinde bir taslak KVKK sayfası var. Yayına almadan önce hukuk danışmanı ile nihai hale getirmeniz gerekir.
- Aydınlatma metni yayınla
- İletişim iznini ayrı checkbox olarak tut
- Veri minimizasyonu uygula
- İletişim alanlarını opsiyonel bırak
- Saklama süresi belirle
- Silme / anonimleştirme süreci tanımla
- Vercel + HTTPS kullan
- Supabase erişimlerini sınırla
- Service role key’i sadece server-side kullan
- n8n arayüzünü public açık bırakma
- Google Sheets erişimini sınırlı tut
İstersen sonraki sürümde şunları ekleyebilirsin:
- Cloudflare Turnstile
- rate limiting (Upstash Redis vb.)
- audit logging
- admin dashboard
- CRM entegrasyonu
Bu yapı CRM kararı verilmeden önce veri toplamak için tasarlandı.
Event başarılı olursa:
- Supabase’ten export al
- n8n ile HubSpot / Pipedrive / Zoho entegrasyonu ekle
- sadece
contact_opt_in = trueolan kayıtları CRM’e gönder
app/
api/submit/route.ts
kvkk/page.tsx
globals.css
layout.tsx
page.tsx
components/
SurveyForm.tsx
lib/
supabase.ts
types.ts
validation.ts
supabase/
schema.sql
n8n-workflow.json
.env.example
README.md
Bir sonraki sürümde şunları ekleyebilirsin:
- admin panel
- filtreleme ve export ekranı
- QR kampanya parametreleri (
?event=kamu-yz-2026) - çok dilli destek
- CRM entegrasyonu
- analytics dashboard
Kontrol et:
- Supabase env değişkenleri doğru mu?
- SQL tablo oluşturuldu mu?
- Vercel env’ler production ortamına eklendi mi?
Kontrol et:
N8N_WEBHOOK_URLdoğru mu?- workflow active mi?
- local n8n internete açık mı, yoksa sadece local mi?
Bu normal olabilir. Çünkü local makinendeki localhost adresi Vercel tarafından erişilemez.
Çözüm seçenekleri:
- geçici test için ngrok / Cloudflare Tunnel kullan
- ya da n8n’i public erişilebilir bir server’a taşı
Bu yüzden production’da local n8n yerine erişilebilir bir endpoint daha sağlıklı olur.
- Supabase tablo oluşturuldu
- Env değerleri doldu
- Vercel deploy başarılı
- Domain bağlandı
- Form submit test edildi
- KVKK metni güncellendi
- n8n webhook test edildi
- Google Sheets append test edildi
- E-posta bildirimi test edildi
- QR kod test edildi
- Mobil test yapıldı
Bu mimaride:
- Supabase = ana kayıt sistemi
- n8n = otomasyon katmanı
- Google Sheets = operasyonel görünüm
- Vercel = hızlı deployment
Bu sayede önce hızlıca veri toplamaya başlar, event başarılı olursa daha sonra CRM entegrasyonuna geçersin.