FULL-STACK BOOTCAMP MÜFREDATI — 2026
HTML/CSS'ten SaaS Dashboard'a
Temel HTML/CSS bilen birinin sektörde çalışır duruma gelmesi için tasarlanmış, sistem ve proje odaklı yoğun program. Her ders bir öncekinin üzerine inşa edilir.
dashboard-preview.tsx
Bu sayfa hocamız tarafından tasarlanmıştır.
- HTML/CSS'ten JS'e geçişin zihinsel modelini kurmak
let,const,varfarkını ve scope mantığını anlamak- Temel veri tiplerini ve
typeofdavranışını bilmek - Arrow function, destructuring ve template literal kullanmak
- Array metodlarını (
map,filter,reduce) işlevsel biçimde kullanmak
- 0–15 dk · Giriş ve Ortam Kurulumu
- VS Code + Node.js kurulumu kontrol
- Browser console'u açmak:
console.log("merhaba") - JS neden çalışır? Script etiketinden Node'a geçiş
- 15–35 dk · Değişkenler ve Tip Sistemi
letvsconst: ne zaman hangisi?varneden kullanmıyoruz- Tipler:
string,number,boolean,null,undefined,object,array - Dinamik tipleme tuzakları:
"5" + 1,typeof null, truthy/falsy
- 35–55 dk · Fonksiyonlar ve Arrow Functions
- Function declaration vs expression vs arrow function
- Default parametre, rest
...args - Pure function kavramı
- 55–75 dk · ES6+ Sözdizimi
- Destructuring:
const {name, age} = user - Spread:
[...arr1, ...arr2] - Template literal:
`Merhaba ${name}!`
- Destructuring:
- 75–90 dk · Array Metodları — Canlı Kodlama
map(): her elemanı dönüştürfilter(): koşula göre süzreduce(): tek değere indir
- En az 5 ürün içeren
sepetarray'i oluştur (ad, fiyat, adet, kategori) filterile yalnızca "elektronik" kategorisini süzmapile her ürünün toplam tutarını hesaplareduceile genel toplamı bul- Sonuçları template literal ile konsola yaz
- BONUS: İndirim kodu mantığı ekle —
"INDIRIM20"→ %20 indirim
Array metodları, final projedeki kullanıcı listesi, görev filtreleme ve istatistik hesaplama özelliklerinin temelini oluşturuyor.
- DOM'u programatik olarak okumak ve değiştirmek
addEventListenerile etkileşim kurmak- Promise ve
async/awaitile asenkron kodu okur-yazar hale gelmek fetchile gerçek bir API'dan veri çekmek ve DOM'a yansıtmak
- 0–20 dk · DOM Seçim ve Değiştirme
querySelector,querySelectorAllinnerHTMLvstextContent— güvenlik farkıclassList.add/remove/toggle
- 20–40 dk · Olaylar ve Event Delegation
click,input,submit,keydownevent.preventDefault()neden gerekir?- Event delegation: tek dinleyici ile dinamik öğeler
- 40–65 dk · Promise ve Async/Await
- Callback cehenneminden Promise'e geçiş
async functionveawait- Hata yönetimi:
try/catch/finally
- 65–90 dk · Fetch API — Canlı Uygulama
- HTTP GET — public JSONPlaceholder API
- Loading/error/success durumları DOM'a yansıtmak
- Gerçek proje benzeri haber kartı listesi
- JSONPlaceholder
/posts'tan 10 gönderi çek - Her gönderiyi kart olarak DOM'a ekle
- Arama kutusu ile kartları gerçek zamanlı filtrele
- Yükleniyor/hata/boş durumları ele al
- BONUS: "Yorumları Gör" butonu ekle
- Vanilla JS DOM manipülasyonunun neden ölçeklenemediğini anlamak
- Vite ile React projesi kurmak
- JSX: JS içinde HTML benzeri sözdizimi
- Functional component yazımı ve props ile veri aktarımı
- Component composition: büyük UI'ı küçük parçalara bölmek
- 0–15 dk · Neden React?
- Reaktif UI modeli: state değişince UI otomatik güncellenir
- Komponent = kendi mantığını ve görünümünü içeren bağımsız parça
- 15–30 dk · Proje Kurulumu
npm create vite@latest— React + JavaScript şablonu- Klasör yapısı:
src/,main.jsx,App.jsx
- 30–55 dk · JSX ve Component Yazımı
- JSX kuralları: tek root,
className, expression{} - Props: readonly, parent'tan child'a tek yönlü veri akışı
- JSX kuralları: tek root,
- 55–75 dk · Liste Render + Key
- Array.map() ile component listesi
keyprop neden zorunlu
- 75–90 dk · Tailwind CSS Entegrasyonu
- Tailwind kurulumu:
npm install -D tailwindcss - Utility-first mantığı — CSS dosyası yazmadan tasarım
- Tailwind kurulumu:
- 6 ürünlük statik veri ile ürün kataloğu yap
- En az 3 component:
App,UrunListesi,UrunKarti - Kategori rozetini farklı renkle göster
- Boş state: "Katalog boş" mesajı
- BONUS:
onFavorilecallback implementasyonu
useStateile reaktif state yönetimiuseEffect— yan etki yaşam döngüsü- Controlled components ile form kontrolü
- Lifting state up: state'i doğru yere taşımak
- Custom hook yazımı: tekrar kullanılabilir mantık
- 0–20 dk · useState Derinlemesine
- State immutability — doğrudan mutasyon neden kırılır
- Array/object state güncellemesi: spread ile kopyalama
- 20–40 dk · useEffect
- Dependency array:
[],[dep], bağımlılıksız - Cleanup fonksiyonu: timer, event listener temizleme
- fetch + useEffect ile veri yükleme
- Dependency array:
- 40–65 dk · Controlled Forms
- Her input için state tutmak vs
useRef - Validation: boş alan, email formatı, karakter sınırı
- Form submit ve reset mantığı
- Her input için state tutmak vs
- 65–90 dk · Custom Hook
useFetchhook'u: loading, data, error state- Hook kuralları: sadece component içinde çağrılabilir
- Todo uygulaması: ekle, tamamla, sil
useStateile state yönetimi- Filtreleme: Tümü / Aktif / Tamamlanan
- localStorage ile kalıcı hale getir
- BONUS: Öncelik seçimi (düşük/orta/yüksek) ve sıralama
- Node.js'in tarayıcı JS'den farkını kavramak
- Express ile HTTP sunucusu kurmak
- RESTful endpoint tasarımı: GET, POST, PUT, DELETE
- Middleware kavramını ve request pipeline'ı anlamak
- In-memory veriyle tam CRUD işlemleri
- 0–20 dk · Node.js Temelleri
- Event loop, non-blocking I/O
- CommonJS (
require) vs ESM (import) - npm:
package.json,node_modules,.gitignore
- 20–45 dk · Express Kurulumu
npm install express, ilk sunucu:app.listen(3000)- Route:
app.get('/api/users', ...) - JSON response:
res.json(), status kodları
- 45–70 dk · CRUD Endpoints
- GET tümü, GET tekil (
:idparam), POST, PUT, DELETE req.body,req.params,req.queryfarkları- Hata yönetimi: 404, 400, 500
- GET tümü, GET tekil (
- 70–90 dk · Middleware
express.json(), CORS middleware- Logger middleware: her isteği konsola yaz
- Postman ile API testi
- In-memory array ile tam CRUD API
- GET /tasks, POST /tasks, PUT /tasks/:id, DELETE /tasks/:id
- Her endpoint için doğru HTTP status kodu
- Body validation: başlık zorunlu
- BONUS: Pagination —
?page=1&limit=10
- Parola neden plaintext saklanmaz — bcrypt hash
- JWT yapısı: header.payload.signature
- Register + Login endpoint tasarımı
- Middleware ile route koruması
- Token yenileme ve logout mantığı
- 0–25 dk · bcrypt ile Parola Güvenliği
- Hash fonksiyonu vs şifreleme farkı
bcrypt.hash(password, 10)— salt roundsbcrypt.compare()ile doğrulama
- 25–50 dk · JWT Temelleri
- Token anatomisi: 3 bölüm, Base64 kodlama
jwt.sign(payload, secret, {expiresIn})jwt.verify()ile doğrulama ve hata yakalama
- 50–75 dk · Auth Endpoints
- POST /auth/register: validation → hash → kaydet → token
- POST /auth/login: bul → compare → token
- Authorization header:
Bearer {token}
- 75–90 dk · Middleware ile Koruma
authenticateTokenmiddleware- Korumalı route'lara uygulamak
req.user— token'dan kullanıcı bilgisi
- Register + Login endpoint'leri çalışsın
- Görev API'sine auth middleware ekle
- Her kullanıcı sadece kendi görevlerini görsün
- Hatalı token için 401 dön
- BONUS: Refresh token mekanizması
- İlişkisel veritabanı mantığını kavramak
- Prisma schema ile model tanımlamak
- Migration sistemi — veritabanı versiyonlama
- Prisma Client ile CRUD işlemleri
- Relasyon: User → Tasks (1:N)
- 0–20 dk · PostgreSQL Kurulumu
- pgAdmin veya psql CLI kurulumu
- Veritabanı oluşturma, bağlantı string'i
- Temel SQL: CREATE TABLE, INSERT, SELECT, WHERE
- 20–45 dk · Prisma Kurulumu
npm install prisma @prisma/clientschema.prisma: User ve Task modellerinpx prisma migrate dev
- 45–70 dk · Prisma Client CRUD
prisma.user.create(),findMany(),findUnique()where,select,includekullanımı- Relation:
include: { tasks: true }
- 70–90 dk · API'ye Entegrasyon
- In-memory array'leri Prisma sorguları ile değiştirmek
- Async/await ile veritabanı hataları yakalamak
- In-memory veriyi PostgreSQL'e taşı
- User ve Task modeli: şema tasarla, migration çalıştır
- Tüm CRUD endpoint'lerini Prisma ile yeniden yaz
- İlişkisel sorgu: kullanıcıyı görevleriyle getir
- BONUS: Task'a
categoryvepriorityekle
- React'tan Express API'ye fetch istekleri atmak
- JWT token'ı localStorage'da saklamak ve her isteğe eklemek
- Login → Dashboard akışını oluşturmak
- React Router ile sayfa yönlendirmesi
- Protected route: giriş yapmadan dashboard görünmesin
- 0–25 dk · CORS ve Proxy Kurulumu
- CORS neden gerekli: farklı origin'ler
- Vite proxy:
server.proxyyapılandırması
- 25–55 dk · Auth Flow
- Login formu → POST /auth/login → token sakla
axiosinterceptor veya custom fetch wrapper- Context API:
AuthContextile global auth state
- 55–75 dk · React Router
BrowserRouter,Route,Navigate- Protected route component
- Redirect: giriş sonrası dashboard'a yönlendirme
- 75–90 dk · Task CRUD UI
- Dashboard'da görev listesini API'dan çek
- Optimistic UI: sunucu cevabını beklemeden güncelle
- Login ve Register sayfaları çalışsın
- Dashboard'da görevler API'dan gelsin
- Görev ekleme ve silme UI'ı tamamla
- Logout: token sil, login'e yönlendir
- BONUS: Görev düzenleme modal'ı
- İstatistik kartları ve Recharts ile grafik entegrasyonu
- Arama + filtreleme UI'ı
- Profil sayfası: ad güncelleme, şifre değiştirme
- Tailwind dark mode:
darkMode: 'class' - Mobil uyumluluk ve erişilebilirlik
- 0–30 dk · Dashboard Stats ve Grafik
- Özet kartlar: toplam, tamamlanan, bugün eklenen
- Recharts kurulumu:
LineChartile haftalık trend - API'dan aggregate veri çekme
- 30–50 dk · Arama ve Filtreleme
- Debounced search: 300ms bekle sonra filtrele
- Kategori ve durum filtreleri
- URL'e filtre parametresi eklemek
- 50–70 dk · Profil Sayfası
- PUT /me: ad güncelleme
- Şifre değiştirme: mevcut şifreyi doğrula
- Avatar placeholder: baş harflerden renk üret
- 70–90 dk · Dark Mode ve Polishing
document.documentElement.classList.toggle('dark')- Tercihi localStorage'a kaydetmek
- Keyboard erişilebilirliği:
tabIndex,aria-label
- En az 3 istatistik kartı ekle
- Arama + kategori filtresi çalışsın
- Profil sayfasını tamamla
- Dark mode toggle ekle, tercih kaydedilsin
- Mobil uyumluluk: 375px'de kırılma olmasın
- BONUS: Recharts ile haftalık görev grafiği
- Git workflow: branch, commit, merge, PR süreci
- Ortam değişkenleri yönetimi: geliştirme vs prodüksiyon
- Backend'i Railway, frontend'i Vercel'e deploy
- CORS ve prodüksiyon konfigürasyonu
- Sektörde çalışma pratikleri: code review, PR etiketi, dokümantasyon
- 0–20 dk · Git Workflow
- Feature branch:
git checkout -b feature/kullanici-profili - Conventional Commits:
feat:,fix:,chore: - PR açmak ve description yazmak
- Feature branch:
- 20–45 dk · Railway ile Backend Deploy
- PostgreSQL servisi eklemek — bağlantı string'i
- Environment variables:
JWT_SECRET,DATABASE_URL - Prisma migration prodüksiyonda:
"migrate:deploy"
- 45–65 dk · Vercel ile Frontend Deploy
- GitHub repo bağlamak — otomatik CI/CD
VITE_API_URLprodüksiyon backend URL'i- SPA routing için
vercel.json
- 65–90 dk · Sektör Pratikleri
- README yazımı: açıklama, kurulum, screenshot
- Code review kültürü
- Güvenlik kontrol listesi: SQL injection, XSS, CORS
- Sonraki adımlar: TypeScript, Next.js, Docker
.envdosyası GitHub'a push'lanmadı ✓- Prodüksiyon
JWT_SECRETgüçlü ve benzersiz ✓ - CORS sadece frontend domain'ine izin veriyor ✓
- Prisma migration Railway'de çalıştı ✓
- Login → Dashboard akışı canlı ortamda test edildi ✓
- Proje GitHub'a push'lanmış,
mainbranch temiz - Backend Railway'de canlı, DB bağlantısı çalışıyor
- Frontend Vercel'de canlı, login → dashboard akışı çalışıyor
- README: açıklama, kurulum, canlı URL, teknolojiler
- En az 1 screenshot ekle (dashboard görünümü)
- BONUS: Kullanıcı onboarding — hoşgeldin ekranı
- BONUS: CSV dışa aktarma özelliği
Final Proje: SaaS Dashboard
5 hafta boyunca her derste bir parça eklenen, sektörde çalışır durumda olan, deploy edilmiş full-stack uygulama. Portfolyoya koyulabilir, iş görüşmesinde gösterilebilir.
Teknoloji Akışı
JavaScript'in temel yapı taşlarını — değişkenler, fonksiyonlar, array metodları — birleştirerek gerçek bir e-ticaret senaryo simülasyonu. filter, map, reduce zinciriyle kategoriye göre filtreleme ve toplam hesaplama.
- ✅ 5+ ürünlük sepet verisi (ad, fiyat, adet, kategori)
- ✅ Kategoriye göre filtreleme (sadece "elektronik")
- ✅ Her ürünün toplam tutarı (fiyat × adet)
- ✅ Genel toplam hesaplama
- ⭐ BONUS: İndirim kodu sistemi
DOM manipülasyonu, event listener'lar ve fetch API kullanılarak gerçek bir JSONPlaceholder API'dan haberler çekilip gösterilen dinamik sayfa. Arama kutusu gerçek zamanlı filtreleme yapar.
- ✅ JSONPlaceholder'dan 10 gönderi çekme
- ✅ Gerçek zamanlı arama kutusu
- ✅ Yükleniyor / hata / boş durumları
- ⭐ BONUS: Her karta yorum sayısını dinamik çek
Vite + React ile kurulan ilk gerçek component ağacı. Props ile veri aktarımı, koşullu render (stok durumu), Tailwind ile stil ve parent → child callback implementasyonu.
- ✅ App, UrunListesi, UrunKarti component'leri
- ✅ Kategoriye göre renkli rozet
- ✅ Stok durumu koşullu gösterimi
- ✅ Boş state mesajı
- ⭐ BONUS: Favorile callback sistemi
React'ın reaktif state modelini özümsetmek için ideal proje. useState ile görev listesi yönetimi, useEffect ile localStorage senkronizasyonu, controlled form ile ekleme ve öncelik filtreleme.
- ✅ Görev ekleme, tamamlama, silme
- ✅ Tümü / Aktif / Tamamlanan filtresi
- ✅ localStorage ile kalıcı depolama
- ⭐ BONUS: Öncelik seçimi ve sıralama
In-memory array ile tam işlevli bir REST API. Postman ile test edilebilen GET, POST, PUT, DELETE endpoint'leri, doğru HTTP status kodları, middleware pipeline ve hata yönetimi.
- ✅ GET / POST / PUT / DELETE endpoint'leri
- ✅ Doğru HTTP status kodları
- ✅ Body validation
- ✅ CORS ve JSON middleware
- ⭐ BONUS: Pagination parametreleri
Prodüksiyon kalitesinde kimlik doğrulama sistemi. Parola bcrypt ile hash'lenir, JWT token üretilip doğrulanır, middleware ile route'lar korunur. Her kullanıcı sadece kendi verilerini görür.
- ✅ Register: validation → hash → token
- ✅ Login: bul → compare → token
- ✅ Middleware ile route koruması
- ✅ req.user ile kullanıcı kimliği
- ⭐ BONUS: Refresh token mekanizması
id Int @id @default(autoincrement())
email String @unique
password String
tasks Task[]
}
id Int @id @default(autoincrement())
baslik String
tamamlandi Boolean @default(false)
userId Int
user User @relation(fields:[userId]...)
}
In-memory array'lerden gerçek kalıcı veritabanına geçiş. Prisma schema ile User ve Task modelleri tanımlanır, migration çalıştırılır, Prisma Client ile tip-güvenli CRUD yapılır.
- ✅ User ve Task modeli tasarımı
- ✅ Migration çalıştırma
- ✅ Prisma Client CRUD
- ✅ İlişkisel sorgu (include: tasks)
- ⭐ BONUS: category ve priority alanları
React frontend ile Express API'nin gerçek bağlantısı. JWT token Authorization header'da gönderilir, AuthContext ile global auth state yönetilir, korumalı route'lar login gerektiri.
- ✅ Login / Register sayfaları
- ✅ Dashboard: görevler API'dan
- ✅ Görev ekleme ve silme UI
- ✅ Logout: token sil, yönlendir
- ⭐ BONUS: Görev düzenleme modal'ı
İstatistik kartları, Recharts ile haftalık trend grafiği, debounced arama, kategori filtresi, profil sayfası ve dark mode toggle ile tamamlanan dashboard deneyimi.
- ✅ 3+ istatistik kartı
- ✅ Haftalık trend grafiği (Recharts)
- ✅ Arama + kategori filtresi
- ✅ Dark mode (localStorage kalıcı)
- ✅ Mobil uyumluluk (375px)
- ⭐ BONUS: Profil güncelleme
Projeyi gerçek internet ortamına taşıma. Vercel ile frontend CI/CD, Railway ile backend + PostgreSQL deploy. Git workflow, Conventional Commits, PR kültürü ve güvenlik checklist.
- ✅ GitHub'da temiz main branch
- ✅ Railway'de canlı backend + DB
- ✅ Vercel'de canlı frontend
- ✅ README ile canlı URL
- ⭐ BONUS: Onboarding + CSV export
Sıkça Sorulan Sorular
Full-Stack Bootcamp programı, ders akışı, teknik içerik, proje geliştirme süreci, ücretlendirme ve sertifika yapısı hakkında en çok merak edilen sorular
