Vue Shopping Cart App

This is a solution to Reengen Full Stack Bootcamp with Vuejs and Nodejs Week-1 Project. It is built with Vuejs by using Vue CLI.

You can check the live demo here

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
• Author
• Project Setup

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• See the photos, title, category, price, available sizes and number of items to be selected,
• See the price changes based on the size of the shoe (larger numbers are higher in price)
• See different theme colors on product cards based on the shoe color
• See rating with stars out of 5
• Select up to 10 shoes once by selecting the number of shoes to be added to Cart,
• Add items to cart if a shoe is not yet added,
• Toggle Cart to see the shoes, it's size, color and number of items
• Increase the number of shoes in Cart if it already exists in Cart (Shoes with the same color and size will be added to the existing item in the Cart)
• See a notification for every item added to Cart
• Increase and decrease the number of selected shoes in Cart,
• Delete shoes with a delete button for each shoe in Cart,

Links

• Solution URL: Github Link
• Live Site URL: Vue Shopping Cart App

My process

Built with

• Semantic HTML5 markup
• CSS Custom Properties
• CSS Flexbox
• CSS Grid
• Mobile-first workflow
• BootstrapVue
• Vuejs

Author

• Website - Fatih Özoğlu
• Linkedin - Fatih Özoğlu

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.