← CourseHub Web

CourseHub Web

CourseHub Academy\'nin tarayıcı sürümü. Next.js 16 + Tailwind v4 + React 19 ile yazılmış Coursera tarzı kurs platformu. Cloudflare Pages\'a statik export ile yayınlanır.

Next.js 16React 19 + CompilerTailwind v4Cloudflare Pages
SSG
Statik Export
Webpack
Build
CDN
Global Edge
SEO
🔗iOS uygulamasıyla aynı backend\'i paylaşır

Proje Hakkında

CourseHub Web, CourseHub Academy ekosisteminin tarayıcı tarafıdır. Repo klasör adı coursera_ ve package.name: "coursera" tarihsel/geçici isimlerdir; gerçek deploy hedefi coursehub-academy Cloudflare Pages projesidir. Statik export modunda derlenir, Cloudflare\'in global edge ağında saniye altı yükleme süresiyle servis edilir. iOS uygulamasıyla aynı backend (api.coursehub.academy) ve aynı kurs kataloğunu paylaşır.

Özellikler

Hero Carousel

HeroCarousel.tsx ile öne çıkan kursları döner banner şeklinde sergileme — ana sayfa odak alanı.

Explore Menu

ExploreMenu.tsx ile mega-menu yapısı — kategoriler, alt-kategoriler, ön plana çıkan kurslar açılır panelde.

Eğitmen Profilleri

/instructor/[id] dinamik route ile eğitmen sayfaları: bio, kurslar, deneyim, öğrenci sayısı.

Uzmanlık Alanları

/specializations/[slug] ile uzmanlık paketleri — birden fazla kursu kapsayan kariyer odaklı programlar.

Onboarding Akışı

/onboarding (giriş) → /onboarding/role-selection (öğrenci/eğitmen) → /onboarding/skills (ilgi alanları).

Statik Export

Next.js 16 statik build → Cloudflare Pages'a out/ klasörü ile deploy; SSR yerine SSG, hızlı CDN dağıtımı.

Tailwind v4

@tailwindcss/postcss ile en yeni Tailwind sürümü; tasarım sistemi ve responsive layout.

React Compiler

babel-plugin-react-compiler 1.0.0 ile React 19 derleyicisi aktif — manuel useMemo/useCallback gerekmez.

Webpack Build

"next build --webpack" — Turbopack devre dışı, deterministik build için webpack tercih edildi.

Custom Deploy Script

scripts/deploy-full.sh ve scripts/coursehub-domain-check.sh ile özel deploy ve domain doğrulama otomasyonu.

SEO Hazır

Next.js metadata API, app router, slug bazlı URL'ler — SEO friendly yapı.

iOS App ile Paylaşımlı Backend

CourseHub Academy iOS uygulamasıyla aynı api.coursehub.academy endpoint'lerini tüketir.

Sayfa Yapısı

Next.js App Router — dinamik segmentlerle [id] / [slug]

/Ana sayfa — Hero carousel, kategoriler, popüler kurslar
/specializations/[slug]Uzmanlık alanı detay sayfası (dinamik slug)
/instructor/[id]Eğitmen profil sayfası (dinamik id)
/onboardingİlk açılış karşılama ekranı
/onboarding/role-selectionRol seçimi: öğrenci / eğitmen
/onboarding/skillsİlgi alanı / beceri seçimi (kişiselleştirme)

Kullanıcı Yolculuğu

Anasayfadan kayda 6 adım

01

Anasayfa

Kullanıcı coursehub-academy.pages.dev (veya custom domain) sayfasına gelir. HeroCarousel öne çıkan uzmanlık programlarını rotate eder; ExploreMenu mega-menu ile kategori navigasyonu sunulur.

02

Onboarding (Yeni Kullanıcı)

/onboarding karşılama → /onboarding/role-selection: öğrenci mi eğitmen mi → /onboarding/skills: ilgi alanları seçimi. Tercihler local storage / backend'e kaydedilir.

03

Keşif (Explore)

ExploreMenu açılır; kategori → alt kategori → kurs listesi. Filtreler: seviye, dil, sertifika tipi, fiyat.

04

Uzmanlık Detayı

/specializations/[slug] — birden fazla kursu kapsayan kariyer programı; kurs sıralaması, beklenen tamamlama süresi, sertifika önizlemesi.

05

Eğitmen Profili

/instructor/[id] — eğitmen biyografisi, verdiği kurslar, öğrenci sayısı, ortalama puan; "Takip Et" CTA.

06

Kayıt & Erişim

Kullanıcı seçtiği kursa kayıt olur. iOS uygulaması varsa aynı hesapla devam edebilir; tüm istemciler tek backend kullanır.

npm Scriptleri

package.json scripts — dev/build/deploy zinciri

npm run devLokal geliştirme sunucusu
$ next dev
npm run buildProduction build (webpack ile)
$ next build --webpack
npm run deployCloudflare Pages'a yayın
$ wrangler pages deploy out --project-name coursehub-academy --branch production
npm run deploy:buildBuild + deploy zinciri
$ CI=1 NEXT_DISABLE_TURBOPACK=1 npm run build && npm run deploy
npm run deploy:fullTam deploy script (özel)
$ bash ./scripts/deploy-full.sh
npm run deploy:domain-checkDomain doğrulama kontrolü
$ bash ./scripts/coursehub-domain-check.sh

Teknoloji Yığını

Framework
Next.js 16.0.10
Build
Webpack (Turbopack devre dışı)
React
React 19.2.1 + React Compiler 1.0
Stil
Tailwind CSS 4 + @tailwindcss/postcss
TypeScript
TypeScript 5
Lint
eslint-config-next 16.0.10
Çıktı
Statik export → out/
Deploy
Cloudflare Pages (coursehub-academy)
Domain
coursehub-academy.pages.dev
Backend
api.coursehub.academy (paylaşımlı)
Klasör Adı
coursera_/ (geçici/eski)
package.name
coursera

iOS Sürümünü de İncele

Aynı kurs kataloğu, mobil deneyim. SwiftUI ile yazılmış native iOS uygulaması.

CourseHub Academy iOS →