Project ini dibuat untuk menyelesaikan program Project-Based Virtual Intern : Front End Developer Core Initiative x Rakamin Academy.
Pada task terakhir VIX Front End Core Initiative diberikan tugas untuk membentuk sebuah interface dari sebuah website Ecommerce. Ditugaskan untuk membuat dua halaman yaitu menβs clothing dan womenβs clothing. Pada task ini, akan bekerja dengan tim UI UX dan juga tim Backend, sehingga website yang akan kalian bangun telah memiliki komponen design juga code API nya.
Tugas kalian adalah membentuk tampilan website, dengan ketentuan :
- Menampilkan data yang didapat dari API https://fakestoreapi.com dengan index merupakan angka 1-20 yang di tiap index-nya memiliki kategori yang berbeda, misalnya https://fakestoreapi.com/products/1 yang memiliki kategori menβs clothing
- Produk yang ditampilkan hanya 1, namun akan berubah setiap kali user menekan tombol Next Product
- Sediakan loading element/loader yang akan ditampilkan ketika menunggu balasan dari API sehingga desain tetap UX friendly. Loader bisa berupa spinner (https://www.w3schools.com/howto/howto_css_loader.asp) atau skeleton (https://dev.to/devggaurav/build-a-simple-card-skeleton-loader-component-using-html-andcss-3a20)
- Membentuk tiga halaman website sesuai dengan desain yang telah di sediakan di Figma berikut ini
π¦ ecommerce
ββ node_modules
ββ public
ββ src
β ββ assets
β β ββ style
β β β ββ page.css
β β ββ image
β β ββ bg-shape.svg
β β ββ bg-unavailable-product.svg
β ββ components
β β ββ ProductDisplay.vue
β ββ App.vue
β ββ main.js
ββ .gitignore
ββ babel.config.js
ββ deploy.sh
ββ jsconfig.json
ββ package-lock.json
ββ package.json
ββ README.md
ββ vue.config.js
npm install
-- install npm package
```npm run serve`` -- menjalankan project
npm run build
-- membuild project
#!/usr/bin/env sh
# abort on errors
set -e
# build
npm run build
# navigate into the build output directory
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:Abdulmuktinur/ecommerce-catalog.git master:deploy
cd -
- Desktop Version
- Menampilkan 20 Data
- Membuat loading menunggu balasan dari API
- Menampilkan data berdasarkan kategori men's clothing dan women's clothing
- Responsive to mobile
- login page
- home page
- Keranjang