This contains everything you need to run your app locally.
View your app in AI Studio: https://ai.studio/apps/89069b0d-a85f-4a98-80a3-9ab2dc14c4c8
Prerequisites: Node.js
- Install dependencies:
npm install - Set the
GEMINI_API_KEYin .env.local to your Gemini API key - Run the app:
npm run dev
An interactive, responsive, and prompt-driven web application designed to accelerate multiplication table mastery through gamified cognitive learning paths.
Matematik Serüveni, geleneksel ezberci eğitim modellerini kırarak, öğrencilerin matematiksel işlem kabiliyetlerini artırmayı hedefleyen modern bir web uygulamasıdır. Bu projenin en kritik özelliği, mimarisinin uçtan uca AI Studio (Prompt-Driven Development) ve No-Code Engineering prensipleriyle koordine edilmiş olmasıdır.
Proje; gereksinim analizinden (Requirements Engineering), CI/CD dağıtım süreçlerine (Deployment Lifecycle) kadar tam bir Product Owner (Ürün Sahibi) vizyonuyla yönetilmiştir.
Application, kullanıcı deneyimini (UX) en üst düzeyde tutmak için modüler bir yapıda kurgulanmıştır:
- Interactive Arena (Çarpım Arenası): Dinamik soru üretme algoritmaları ile kullanıcıyı sürekli aktif tutan canlı oyun motoru.
- Visual Block Modeling (Görsel Blok Modellemesi): Soyut matematiksel Çarpım Tablosu kavramları somutlaştırarak pedagojik öğrenimi destekleyen görsel matris yapıları.
- Gamified Progression (Kamp Mücadelesi): Kullanıcı motivasyonunu artırmak amacıyla kurgulanmış aşamalı zorluk seviyeleri ve skor takibi (Scoreboard).
- Responsive Layout: Hem masaüstü hem de mobil cihazlarda (Mobile-first responsive design) kusursuz çalışan esnek arayüz.
Projenin altyapısı, yüksek performans, hızlı derleme (Fast Build) ve modern tasarım standartları baz alınarak seçilmiştir:
| Bileşen | Teknoloji | İş Analizi Açısından Rolü (Rationale) |
|---|---|---|
| Frontend Framework | React (TypeScript) |
Bileşen tabanlı (Component-based) yapısı sayesinde sürdürülebilir ve ölçeklenebilir kod mimarisi. |
| Build Tool | Vite |
Hızlı modül değişimi (HMR) ve optimize edilmiş paketleme (Bundling) ile yüksek performans. |
| Styling Engine | Tailwind CSS v4 |
Utility-first yaklaşımıyla sıfır CSS karmaşası ve hızlı UI/UX iterasyonları. |
| CI/CD Platform | GitHub Actions |
Kod her push edildiğinde otomatik olarak çalışan ve canlıya alan otomasyon hattı. |
| Hosting | GitHub Pages |
Bulut tabanlı, sunucusuz (Serverless) ve kesintisiz canlı yayın altyapısı. |
Proje, kurumsal yazılım standartlarına (Enterprise Standards) uygun şekilde zırhlandırılmıştır:
- Relative Base Path Optimization:
vite.config.tsüzerinde yapılan mimari dokunuşla, uygulama bağıl yollara (base: './') taşınmıştır. Bu sayede klasör çakışmaları (Path conflicts) ve404 Not Foundhataları kökten çözülmüştür. - Secret Scanning & Guardrails: Kod tabanında (Codebase) hassas veri, şifre veya API anahtarı sızıntısını engelleyen koruma kalkanları aktiftir.
- Dependabot Integration: Projenin kullandığı tüm üçüncü parti kütüphaneler (Dependencies) olası exploit ve güvenlik açıklarına karşı GitHub sunucuları tarafından 7/24 izlenmektedir.
Bu projenin yaşam döngüsü tam bir otomasyon üzerine kuruludur. Geliştirme sürecinde manuel paketleme (Manual deployment) riskleri tamamen ortadan kaldırılmıştır:
- Local Development: VS Code ortamında değişiklikler tamamlanır ve test edilir.
- Version Control: GitHub Desktop aracılığıyla değişiklikler izlenir, anlamlı commit mesajları ile
main branchyapısına işlenir. - Continuous Integration (CI): Kod GitHub'a ulaştığı an
.github/workflows/deploy.ymlsihirbazı otomatik olarak tetiklenir. - Continuous Deployment (CD): GitHub Actions bulut sunucuları projeyi sıfırdan derler (build app) ve saniyeler içinde canlı linki günceller.
Uygulama tamamen canlı ortamda test edilebilir ve dünyanın her yerinden erişime açıktır:
🔗 Matematik Serüveni - Canlı Oyun Linki
- Tuncay Şahin