164-orion-innovation-turkey-bootcamp / hafta4-odev-assignment-emreedk

hafta4-odev-assignment-Emreedk created by GitHub Classroom

4. Hafta Ödevi

You can reach the project description video by clicking on the link below.

("https://youtu.be/IIznXYwROUg")

Installation

1. Clone the repo

git clone https://github.com/164-orion-innovation-turkey-bootcamp/hafta4-odev-assignment-Emreedk

2. Install NPM packages

npm install

3. Run Angular Project

ng serve --o

4. Run JSON-server

cd src/assets/data

json-server --watch db.json

I used json-server for native API. "https://github.com/typicode/json-server" If you want to test the project, you can install the node_modules files with the npm install command and run the project with "ng serve". Then, to run json-server, in a different terminal, you must first go to the data folder where the api is located (cd src/assets/data) and use the command "json-server --watch db.json".

About Project

This Project is Patika-Orion Innovation Turkey Angular Bootcamp assignment. In this project, I created an e-commerce clone. Package and Modules used in the project.

• AppRoutingModule
• HttpClientModule
• FormsModule
• ReactiveFormsModule
• Font Awesome
• Bootstrap 5
• Google Fonts
• AuthGuard

4. 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ü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ün detayına gidilirken, sayfa yönlendirilmesi (routing) yapılmalı
• Ürünler kendinizin belirleyeceği bir json kaynak dosyasından alınmalı
• Ü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

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