Logo Siber Güvenlik ve Ağ Teknolojileri Full Stack Bootcamp Bitirme Projesi

• Tek sayfadan oluşacak bir e-ticaret sitesi

Proje Detayları:

• Vue.js ile tek sayfadan oluşan bir e-ticaret sistemi tasarlayacağız.
• 10 adet kategori olacak.
• Tüm backend işlemleri Node.js ile yapılacak.
• Arayüz Vue.js ile yapılacak.
• Ürünler API’den çekilecek. İstenilen API kullanılabilir. API’yi kendiniz tasarlayabilirsiniz.
• ElasticSearch ile ana sayfada arama alanı yapılacak.
• Winston kullanılacak.
• Ürüne tıkladığımız zaman bir kutusu ekrana gelecek ve ürünün bilgileri yer alacak.
• Relational veritabanı için PostgreSQL kullanılacak.

Proje Detayları:

Frontend

Home Page

Aşağıda HomePagei göreceksiniz. Homepageda ürünler listeleniyor, sol üstte ürün eklemeye giden bir navigasyon var 'add product'.

Ve HomePagein bottom kısmı

Sayfanın altında footer ve 'go back to top' buttonu var.

Her ürünün üzerinde 'view product' butonu var, oradan ürünleri detaylı bir şekilde inceleyebilirsiniz soldan gelen bir drawerla. Aşağıdaki videosu mevcut

drawer-video.mp4

Ve şimdide görseli Sağ üstteki button sizi olduğunuz sayfaya tekrar yönlendirecek, yani ürünleri görmeye devam edeceksiniz. Fakat kırmızı renkli button ürünü silmenize neden olacak. Yanlışlıkla tıklarsanız bir sorun olmaz çünkü ürünü silmeden önce comfirmation için uyarı alacaksınız. Onaylandığı takdirde ürün kalıcı olarak silinecek

Add Product Page

Bu sayfada aşağıda görselde istenilen bilgileri girip ürün ekleyebilirsiniz. Ekleme işleminin ardından anasayfaya yönlendirileceksiniz Aşağıdaki görsel add product pagein nasıl göründüğünü gösteriyor

Kodlar

Backend Folder structure

Herşeyi küçük ve mantıklı parçalara bölerek ilerledim ki kodum maintainable sürdürülebilir olsun. Yukarıdaki dosya backend yapım

Biraz daha detay...