Bu uygulama, Marvel Comics API'sini kullanarak Comics verilerini listeleyen ve Comic detaylarını gösteren bir Vue.js uygulamasıdır. Uygulama, Vue framework'ünü kullanmakta ve Vuex state yönetimiyle veri saklamaktadır.
-
Comics listesi: İndex sayfasında, Marvel Comics API'sinden çekilen veriler kullanılarak Comics başlığındaki verileri listeler. Her bir Comic için aşağıdaki bilgiler gösterilir:
- Başlık (title)
- Açıklama (description)
- Kapak resmi (thumbnail)
- Yaratıcılar (creators)
-
Favorilere ekleme: Her bir Comic itemi için favorilere ekleme işlemi yapılabilir. Header kısmında bulunan favori ikonu kullanılarak Comic itemi favorilere eklenir. Favori ikonu üzerindeki badge alanında, favorideki Comic sayısı gösterilir.
-
Comic detayları: Comic itemine tıklandığında, ayrı bir Comic detay sayfasına yönlendirilir. Bu sayfada, seçilen Comic'in detayları gösterilir. Tasarım açısından herhangi bir sınırlama yoktur, ancak bütünlüklü ve kullanıcı dostu bir tasarım tercih edilmelidir.
- Node.js
- Vue.js
- Vuex
- Sass
- axios veya benzeri bir HTTP kütüphanesi
- Vue.js
- Vuex
- Sass
- Vue Router
- axios
-
Depoyu klonlayın:
git clone <repository_link>
-
Proje dizinine gidin:
cd marvel-comics-app
-
Bağımlılıkları yükleyin:
npm install
-
.env
dosyasını oluşturun ve aşağıdaki değişkenleri doldurun:VUE_APP_API_BASE_URL=http://gateway.marvel.com/v1/public/ VUE_APP_API_KEY=<Marvel_API_Key> VUE_APP_HASH=<Marvel_API_Hash>
Not:
<Marvel_API_Key>
ve<Marvel_API_Hash>
değerlerini kendi Marvel Developer Portal hesabınızdan almalısınız. -
Uygulamayı başlatın:
npm run serve
-
Tarayıcınızda uygulamaya aşağıdaki URL'yi girerek erişebilirsiniz:
http://localhost:8080/