Skip to content

brunogarcia/vue3-shop

Repository files navigation

Vue3 Shop

Description

The app runs a online shop which sells 3 products.

The current prices of the products are the following:

Code         | Name         |  Price
---------------------------------------
CAP          | Cap          |   5.00€
TSHIRT       | T-Shirt      |  20.00€
MUG          | Coffee Mug   |   7.50€

And we are offering users these discounts:

  • 2-for-1 promotions: buy two of the same product, get one free, applied to CAP items.
  • bulk discounts: buying 3 or more of TSHIRT product, the price of that product is reduced 5%. E.g., if you buy 3 or more TSHIRT items, the price per unit should be 19.00€.

Architecture

Based on the article "A different approach to frontend architecture"

  • Application
    • This layer contains application logic.
    • This layer is implemented via Vue Composable Functions.
    • Organized via services with use cases.
  • Domain
    • This layer is for business logic.
    • There is just pure TypeScript code with no frameworks/libraries.
  • Infrastructure
    • This layer is responsible for communications with the outside world and storing local data.
      • Store: State Management implemented with Vuex.
      • HTTP Requests/Responses.
  • User Interface
    • This layer is basically made of Vue views and components.

Directories

└── src
    └── application
        └── services (Contains the composable functions) 
    ├── domain
        ├── checkout
        └── discount-rules
    ├── infrastructure
        ├── http (In charge of making the requests to the API)
        └── store (Contains the Vuex modules)
    └── ui
        ├── assets (Contains the styles of the UI)
        ├── components (Contains the Vue components)
            └── core (Contains the core components)
        ├── types (Contains the types of the UI)
        ├── utils (Contains the utils of the UI)
        └── views (Contains the Vue views)
└── tests
    └── unit (Contains the unit tests of the app)
        ├── _mocks (Mocks: Vuex State, Vuex Store, Vuex Context and Princing Rules)
        ├── domain (Unit tests for the business logic)
        ├── infrastructure
            └── store (Unit tests for the Vuex modules)
        └── ui
            ├── components (Unit tests for Vue components)
            ├── helpers (Unit tests helpers)
            └── views (Unit tests for Vue views)

Tasks

App scaffolding

  • [chore] Create a Vue app with these plugins: Typescript, ESlint, Prettier, Vuex, Jest and PostCSS

API

  • [feat] Create the products resource

Checkout service

  • [feat] The checkout manages the discount rules
  • [feat] The checkout manages the pricing rules
  • [feat] The checkout can scan a product
  • [feat] The checkout can remove a product
  • [feat] The checkout knows the total items
  • [feat] The checkout knows the total cost
  • [feat] The checkout knows the total cost with discounts
  • [feat] The checkout knows the discounts applied

Data management

Modal

  • [feat] Create modal Vuex module
  • [feat] Create modal initial state
  • [feat] Create modal actions
  • [feat] Create modal mutations
  • [feat] Create modal getters

Shopping

  • [feat] Create shopping Vuex module
  • [feat] Create shopping initial state
  • [feat] Create shopping actions
  • [feat] Create shopping mutations
  • [feat] Create shopping getters

Composable Functions

  • [feat] Create the composable functions for the modal module
  • [feat] Create the composable functions for the shopping module

App UI

  • [feat] Create App component

Products UI

  • [feat] Create view: products
  • [feat] Create component: common title
  • [feat] Create component: product header
  • [feat] Create component: product list
  • [feat] Create component: product item
  • [feat] Connect products with the data manager

Summary UI

  • [feat] Create view: summary
  • [feat] Create component: summary items
  • [feat] Create component: summary discounts
  • [feat] Create component: summary total cost
  • [feat] Create component: summary checkout
  • [feat] Connect summary with the data manager

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

About

App developed with Vue 3, Vuex, Typescript, Jest, and Testing Library

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published