Daha Az Karbon.
Kullanıcıların günlük yaşam alışkanlıklarını interaktif bir anket üzerinden değerlendirerek tahmini karbon ayak izlerini hesaplayan ve sonucu kategori bazlı karşılaştırmalarla sunan sürdürülebilirlik odaklı web projesi.
TÜBİTAK 4006 · Lise Projesi
- 01 · Rol
- Web development · UI implementation · Calculation logic
- 02 · Platform
- Responsive Web
- 03 · Dönem
- 10. sınıf · TÜBİTAK 4006
- 04 · Durum
- TÜBİTAK 4006 · Lise Projesi
Proje bağlamı
Daha Az Karbon, 10. sınıfta TÜBİTAK 4006 kapsamında geliştirdiğim karbon ayak izi farkındalık projesidir. Kullanıcı ilk olarak karbon ayak izi, sürdürülebilir yaşam ve çevresel etkiler hakkında bilgi veren landing page ile karşılaşır. Ardından 10 adımlı değerlendirmeye geçerek ulaşım, beslenme ve günlük yaşam alışkanlıkları gibi farklı kategorilerdeki soruları yanıtlar. JavaScript tabanlı hesaplama mantığı bu cevaplardan tahmini yıllık karbon ayak izini oluşturur; sonuç ekranı toplam CO₂e değerini, kategori dağılımlarını, farklı ülke ve bölge ortalamalarıyla karşılaştırmaları ve azaltım önerilerini görsel olarak sunar. Projenin kullanıcı arayüzünü, etkileşimlerini, hesaplama akışını ve frontend geliştirmesini tek başıma gerçekleştirdim.
Temel problem
Projedeki temel problem, karbon ayak izi gibi kullanıcı için soyut ve veri ağırlıklı olabilecek bir konuyu basit, anlaşılır ve etkileşimli bir dijital deneyime dönüştürmekti. Uzun bir form yerine adım adım ilerleyen bir survey deneyimi oluşturmak, cevapları hesaplama mantığına güvenilir biçimde aktarmak ve ortaya çıkan sayısal sonucu yalnızca tek bir değer olarak değil; kategoriler, karşılaştırmalar ve uygulanabilir öneriler üzerinden anlaşılır hâle getirmek gerekiyordu. Aynı zamanda landing, survey ve result ekranları arasında görsel bütünlüğü koruyarak mobil ve masaüstünde akıcı bir deneyim oluşturmak önemliydi.
Geliştirdiklerim
- 01
Landing page, 10 adımlı survey ve detaylı result page olmak üzere projenin temel kullanıcı deneyimini geliştirdim.
- 02
Kullanıcının karbon ayak izi testini başlatmasından sonuç ekranına ulaşmasına kadar olan uçtan uca akışı tasarladım ve uyguladım.
- 03
Anket cevaplarını JavaScript ile değerlendirerek tahmini yıllık karbon ayak izi sonucunu oluşturan client-side hesaplama mantığını geliştirdim.
- 04
Ulaşım, enerji, beslenme, atık, uçak seyahatleri ve alışveriş gibi farklı etki kategorilerinin sonuç içerisindeki dağılımını hesaplayıp görselleştirdim.
- 05
Toplam karbon ayak izi değerini farklı ülke ve bölge ortalamalarıyla karşılaştıran sonuç görünümünü geliştirdim.
- 06
Hesaplama sonucuna göre kullanıcıya karbon ayak izini azaltmaya yönelik öneriler sunan sonuç deneyimini oluşturdum.
- 07
Survey ekranında adım göstergesi, progress bar, seçim durumları ve ileri/geri navigasyonu bulunan yönlendirilmiş form deneyimini geliştirdim.
- 08
Tailwind CSS kullanarak sürdürülebilirlik temasına uygun, yeşil ağırlıklı ve responsive bir görsel sistem oluşturdum.
- 09
Framer Motion kullanarak sayfa ve içerik geçişlerini, giriş animasyonlarını ve kullanıcı etkileşimlerini daha akıcı hale getiren motion detayları ekledim.
- 10
Landing page içerisinde karbon ayak izi farkındalığı, hayvanlar ve ekosistemler ile proje hakkında bilgilendirici içerik bölümleri oluşturdum.
- 11
Projeyi Netlify üzerinde yayınlayarak TÜBİTAK 4006 çalışmasını internet üzerinden erişilebilir canlı bir web uygulamasına dönüştürdüm.
Teknik yaklaşım
Proje Vite üzerinde JavaScript, Tailwind CSS ve Framer Motion kullanılarak geliştirildi ve tamamen client-side çalışan bir mimariye sahip. Kullanıcı deneyimi üç ana aşamadan oluşuyor: bilgilendirici landing page, 10 adımlı carbon-footprint survey ve detaylı result page. Survey boyunca verilen cevaplar frontend tarafında tutuluyor ve her seçeneğin hesaplama modelindeki karşılığı JavaScript fonksiyonlarıyla değerlendirilerek tahmini yıllık CO₂e değeri oluşturuluyor. Sonuç verisi yalnızca toplam değer olarak gösterilmiyor; ulaşım, enerji, beslenme, atık, uçak seyahatleri ve alışveriş gibi kategorilere ayrılarak progress-bar tabanlı görsellerle sunuluyor ve farklı ülke/bölge ortalamalarıyla karşılaştırılıyor. Tailwind CSS responsive layout, typography, spacing ve durum stillerini yönetirken Framer Motion ekranlar ve içerik parçaları arasındaki geçişlere, giriş animasyonlarına ve mikro etkileşimlere hareket katıyor. Projede backend, kullanıcı hesabı veya veritabanı bulunmuyor; survey state'i, hesaplama ve sonuç üretimi tamamen tarayıcı tarafında gerçekleşiyor.
Sistem yapısı
- 01
Frontend
Vite · JavaScript - 02
Styling
Tailwind CSS - 03
Motion
Framer Motion - 04
Flow
Landing · 10-Step Survey · Result - 05
Calculation
Client-side Carbon Estimation - 06
Result
CO₂e · Categories · Comparisons · Tips - 07
Deployment
Netlify
Mevcut durum
Proje tamamlanmış durumda ve Netlify üzerinden canlı olarak erişilebiliyor. Kullanıcılar landing page üzerinden karbon ayak izi testini başlatabiliyor, 10 adımlı survey'i tamamlayabiliyor ve cevaplarına göre oluşturulan tahmini yıllık CO₂e değerini; kategori dağılımları, küresel karşılaştırmalar ve azaltım önerileriyle birlikte görüntüleyebiliyor. Proje, TÜBİTAK 4006 kapsamında 10. sınıfta geliştirdiğim erken dönem web çalışmalarından biri olmasının yanında sürdürülebilirlik konusunu çalışan ve görsel olarak tamamlanmış bir dijital ürüne dönüştürdüğüm projelerden biridir.