Shoe Shopping Cart – Vue.js

Reengen FullStack Bootcamp – Vue.js & Node.js Bootcamp Week-1 project

Project Demo

Live Demo

Link 1

Link 2

Whats’s This Project About

Firstly, this project is all about how awesome Vue.js is.

What can you do in this project ?

  • Choose category from navigation bar. Items will be filtered.
  • Choose the color of the shoe. Item’s classes will apply.
  • Choose the size for shoe. Price will change accordingly.
  • See the rating of the shoe.
  • Change the item count to add multiple items at once.
  • Add To Cart button alert you when you add product.
  • Add, Subtract or Delete functions apply in cart.
  • You can see all the items you add in the cart.
  • Total price of items shown.

How this project handled?

- Vue CLI
- Vue.js
- BootstrapVue
- JavaScript
- CSS
- HTML

Live Demo

Link 1

Link 2

What can be done better?

  • Alerts can be add for Subtract and Delete functions.
  • Cart can be designed better.
  • Stock of items can be tracked.

Further Reading

Vue CLI

BootstrapVue

Vue Directives

React vs Vue

BootstrapVue

Vue vs React – Comparison

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

GitHub

View Github