("https://commerce-out.netlify.app/login")
("https://youtu.be/W5ubadZA9RA")
Admin : username: [email protected] , password : Admin123
You can login with this username and password if you want to check my project as admin or you can register with a random e-mail address to check the project as customer.
Hello There; On this e-commerce site that I coded for a week, I tried to use a modular structure in this e-commerce project. With TypeScript, I took care to assign types to all data types and also tried to take advantage of all the modules Angular offers us to increase the project performance.I would like to briefly talk about the features I use;
Reactive Forms Custom Validations Fire Reader Library Route Guards Interceptors Resolvers Lazy Load(Preloading-Strategy)
and also i used Google-Firebase backend-services for this project
Firebase Auth Module Firebase Realtime Database Module Firebase Storage (store files)
In this project as you can watch on youtube video, there is a user interface for a customer and a admin interface. Customers can buy see details of products and add products to their shoppin carts and checkout. Admin iterface can upload/delete products on website and check orders from customers checkouts to ship.
Bootstrap Scss FontAwesome
For styling i used Bootstrap,Scss and FontAwesome.During coding the project sometimes i need some special mediaqueries to make project real responsive. For example you can find that changes on login.component.scss file.
<img src='src/assets/shop.jpg' raw=trueScss
1-install Angular CLI version 13 or 14 2-open a terminal and run git clone "https://github.com/164-orion-innovation-turkey-bootcamp/hafta4-odev-assignment-onurutku.git" 3-run "npm install" to call node modules. 4-run "ng s --o"
This project was generated with Angular CLI version 13.1.4.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
- Hafta Ödevi Ürün satışının, kullanıcı kaydının ve girişinin yapıldığı, web uygulaması geliştirilecek.
Fonksiyoneliteler:
//• Uygulama responsive tasarımı desteklemeli, mobil ve bilgisayar ekranlarına uyumlu çalışmalı (ui component frameworkleri, libraryleri kullanılabilir) //• Kullanıcılar uygulamaya üye olabilmeli ve giriş yapabilmeli (json dosyasına kayıt oluşturulup, json dosyasından doğrulama yapılabilir, ya da ekstra bir api yazılabilir) //• Ürün kartında bulunması gerekenler; ürünlerin resmi, adı, açıklaması ve fiyatı //• Ürün listesi ana sayfada gösterilmeli, kullanıcılar isterlerse ürünlerin detayına, ürünlerin üzerine tıklayarak bakabilmeli //• Ürünlerin detay sayfasında, ürünün daha büyük bir resmi ve daha detaylı bir açıklama metni olmalı //• Ürün detayına gidilirken, sayfa yönlendirilmesi (routing) yapılmalı //• Ürünler kendinizin belirleyeceği bir json kaynak dosyasından alınmalı
//Gereklilikler: //• Reactive form yaklaşımı kullanılmalı //• Form işlemlerinde validasyon yönetimi yapılmalı ve kullanıcı dostu bir uyarı mesajı üretilmeli //• Http istekleri için HttpClient paketi kullanılmalı //• Comment kullanımına dikkat edilmeli //• TypeScript özelliklerinden type ve access modifiers kullanımına dikkat edilmeli
//Ekstralar: //• Ürünlerin detay kısmında, ürün ile ilgili oluşturulacak dummy(sahte) yorumların ve değerlendirmelerin görüntülenmesi //• Component mimarisinin anlaşılır, tekrar kullanılabilecek şekilde kurgulanması
//Teknolojiler: Angular (13), JavaScript, TypeScript
//• Ürünlerin filtrelenmesi için; kategori seçeneği (dropdown, selector, kategorileri siz belirlemelisiniz) ve bir arama çubuğu oluşturulmalı, anahtar kelimesinin ürün adında geçip geçmediğine bakılmalı //• Ürünler sepete eklenip daha sonrasında satış işlemi gerçekleştirilmeli //• Satış işlemi için ayrı bir json dosyasına log kaydı atılması yeterli //• Kullanıcı sisteme giriş yapmadan ürünleri görmemeli