Hyper Teknoloji Case Uygulaması

Canlı olarak görüntüleyin : https://hypercase.netlify.app/ Sade ve modern tasarımı ve duyarlı, akıcı kullanıcı deneyimine sahip bir arayüz geliştirmesi. Farklı cihazlarda sorunsuz bir alışveriş deneyimi sunar.

Özellikler

• Standart bir layout düzeni ve semantik elementler kullanılmıştır.
• Hem karanlık hem de açık tema desteği bulunmaktadır.
• Türkçe ve İngilizce olmak üzere çoklu dil desteği sağlanmaktadır.
• Animasyonlar ve sade geçiş efektleri uygulanmıştır.
• Banner oluşturulmuş ve geçişlerle desteklenmiştir.
• Grid yapıları kullanılarak modern bir düzen sağlanmıştır.
• SEO konusuna çok girilmemiştir vakit harcanmamıştır.
• Mobil ve tablet cihazlarla uyumlu olarak responsive şekilde tasarlanmıştır.
• Arama ve filtreleme özellikleri eklenmiştir.
• API'den ürün listeleme ve sayfa artırma (yükleme) işlevi bulunmaktadır.
• Kullanıcılar ürünleri sepete ekleyebilir, silebilir, boş liste ve sepet yönetimini(localStorage) yapabilirler.
• Fiyatlar, sayfanın diline göre değişir; Türkçe için TL, İngilizce için USD (1 USD = 32 TL) olarak gösterilmektedir.
• Ürünlerin detay sayfaları mevcuttur.

--

Kullanılan Teknolojiler

• HTML5
• CSS3
• JavaScript (ES6+)
• Tailwind CSS
• NPM Paket Yönetimi
• API Entegrasyonu

Nasıl Kullanılır

Proje yerel bir geliştirme sunucusunda çalıştırılmak üzere tasarlanmıştır.

1. Proje deposunu klonlayın.
2. Proje bağımlılıklarını yükleyin.
3. Projeyi başlatın.
4. Tarayıcınızda http://localhost:5500 adresine giderek pokemonların bilgilerini arayabilir ve görüntüleyebilirsiniz.

--

• Vanilla olarak pür bir şekilde kodlamış olsam da React ile de geliştirebileceğim bu projeyi kişisel tercih olarak bu şekilde geliştirdim.

tailwindCSS Derleme Kullanımı

 npx npx tailwindcss -i ./assets/css/tailwindInput.css -o ./assets/css/tailwindOutput.css --watch

Benimle iletişim kurmak için Adnan Şevki Kaşıkçı tıklayınız.