sunguru98 / Shopmate

Shopmate's Front end in Vue.js

Shopmate Front end Ecommerce Application

By Sundeep Charan Ramkumar

Shopmate - Website

---

Table of contents

1. Project commands
2. Technologies Used
3. File Structure
4. API Endpoints Used

---

Install Instructions

Installs code base

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

---

Technologies Used

• Design of the application

  • HTML
  • CSS (with SCSS preprocessor)

• Functionalities of the application

  • Vue.js (SPA Framework)
  • Vuex (for state management)
  • axios (for API calls )

• Bundling of the application

  • Vue CLI (uses webpack)

• Deployment of the application

  • Vue CLI (for build mode)
  • Netlify (for hosting)

---

File Structure

• src (Root directory)
  • assets (All static files)
    • img (Images of the app)
    • sass (The design files)
      • allproducts (Home page)
      • checkout (Checkout for all 4 phases)
      • common (Common Design rules)
      • pages (All pages)
      • productDetail (Detail view page)
      • shoppingCart (Popover cart)
  • components (Vue components)
    • auth (Auth page's components)
    • common (Common components)
    • header (Navbar component)
    • home (Home page component)
    • profile (Profile page component)
  • mixins (Common data and computed properties)
  • pages (All vue-routes and page logic)
  • store (Vuex store root folder)
    • modules (Modules for each function)
    • index.js (Central store file)
  • App.vue (Central file for all components)
  • main.js (Vue and Vuex imported here)
  • router.js (All routes registered)

---

API Endpoints Used

• GET
  • / departments
  • / categories
  • / attributes / inProduct / {product_id}
  • / products
  • / products / inCategory / {category_id}
  • / products / inDepartment / {department_id}
  • / products / {product_id} / reviews
  • / customer (with header accessToken)
  • / shoppingcart / generateUniqueId
  • / shoppingcart / {cart_id}
  • / shoppingcart / totalAmount / {cart_id}
  • / shipping / regions
  • / shipping / regions / {shipping_region_id}
• POST
  • / products / {product_id} / reviews (with header accessToken)
  • / customers (with header accessToken)
  • / customers / login (with header accessToken)
  • / shoppingcart / add
  • / stripe / charge
• PUT
  • / customer
  • / customer / address
  • / shoppingcart / update / {item_id}
• DELETE
  • / shoppingcart / removeProduct / {item_id}
  • / shoppingcart / empty / {cart_id}