All Projects → thanhchungbtc → Vue Shopping Clean Architecture

thanhchungbtc / Vue Shopping Clean Architecture

Shopping cart app demonstrate clean architecture

Projects that are alternatives of or similar to Vue Shopping Clean Architecture

Tdcapp
Sample app which access the TDC (The Developer's Conference) REST API.
Stars: ✭ 55 (-8.33%)
Mutual labels:  clean-architecture, unittest
Kotlinmvparchitecture
Clean MVP Architecture with Dagger2 + Retrofit2 + Mockito + Fresco + EasiestGenericRecyclerAdapter using Kotlin. Added Unit Tests(Kotlin Tests)!
Stars: ✭ 143 (+138.33%)
Mutual labels:  clean-architecture, unittest
CleanArchitecture
Android App Architecture
Stars: ✭ 14 (-76.67%)
Mutual labels:  clean-architecture, unittest
Taskhelp Api
TODO管理 Node.js Express Typescript練習用プログラム
Stars: ✭ 40 (-33.33%)
Mutual labels:  clean-architecture
Exchange Rates Mvvm
Sample Android project which incorporates MVVM, databinding, RxJava2, Dagger2 and Clean Architecture approach.
Stars: ✭ 43 (-28.33%)
Mutual labels:  clean-architecture
Posts Mvvm Daggerhilt Dynamic Feature Rxjava3 Flow Sample
Posts Api sample with Kotlin RxJava3/Coroutines Flow, Clean Architecture, Offline first/last with Room + Retrofit2, Dagger Hilt, Dynamic Feature Modules, Static Code Analysis, Gradle DSL, MockK+ MockWebServer with Test Driven Development including Api and Database tests
Stars: ✭ 41 (-31.67%)
Mutual labels:  clean-architecture
Clean Architecture Example Java Spring Boot
An example of Robert C. Martin's Clean Architecture with Spring Boot
Stars: ✭ 59 (-1.67%)
Mutual labels:  clean-architecture
Testable Mock
换种思路写Mock,让单元测试更简单
Stars: ✭ 977 (+1528.33%)
Mutual labels:  unittest
Stocktradetracking
A showcase for modularized MVVM Architecture for Android, powered by Kotlin Coroutines and Clean Architecture.
Stars: ✭ 60 (+0%)
Mutual labels:  clean-architecture
Kotlin Android Scaffolding
An android project structure using kotlin and most common libraries.
Stars: ✭ 53 (-11.67%)
Mutual labels:  clean-architecture
Business Search App Java
Showcases object oriented programming in Java, Java Swing, Kotlin, and Android
Stars: ✭ 53 (-11.67%)
Mutual labels:  clean-architecture
Objectfiller.net
The .NET ObjectFiller fills the properties of your .NET objects with random data
Stars: ✭ 43 (-28.33%)
Mutual labels:  unittest
Go Restful
🚀 A real world production-grade RESTful Web Services proof-of-concept project.
Stars: ✭ 58 (-3.33%)
Mutual labels:  clean-architecture
Aspnet Core Clean Arch
It is a clean architecture project template which is based on hexagonal-architecture principles built with .Net core.
Stars: ✭ 60 (+0%)
Mutual labels:  clean-architecture
Phpspec Code Coverage
Generate Code Coverage reports for PhpSpec tests
Stars: ✭ 59 (-1.67%)
Mutual labels:  unittest
Cleanarchitecturetemplate
A template for a dotnet core api / mvc "clean architecture" project.
Stars: ✭ 50 (-16.67%)
Mutual labels:  clean-architecture
Stocker
Stocker is a currency monitoring app. It offers instant currency rates of banks.
Stars: ✭ 38 (-36.67%)
Mutual labels:  clean-architecture
Company Structure
A company structure with a list of projects and their users
Stars: ✭ 48 (-20%)
Mutual labels:  unittest
Vuex Flash
VueJs Flash Message Component within Vuex
Stars: ✭ 54 (-10%)
Mutual labels:  vuex2
Lady Happy Android
Open Source multi-module app for Handmade Hats company with modern approaches under the hood.
Stars: ✭ 60 (+0%)
Mutual labels:  clean-architecture

Clean Architecture VueJS

Clean architecture with vue, shopping cart demo

Demo

Development

yarn serve

Production

yarn build

Unit test

yarn test:unit

Description

This is an example of implementation of Clean Architecture in Vue

It has major of 4 layers:

  • Entity layer
  • Repository layer
  • Usecase layer
  • Application layer - where the ui happend

Tools used

  • inversify
    Dependency injection for typescript
container
  .bind<CartRepository>("CartRepository")
  .to(CartRepositoryImpl)
  .inSingletonScope();

Usage

constructor(
    @inject("CartRepository") private cartRepository: CartRepository
) {}
  • vuetify
    Material design ui library

  • vuex-module-decorators
    Access vuex store in a type-safety way

Instead of writing as

this.$store.dispatch('cart/addProductToCart', {product: this.product, quantity: 1})

We write

const cartStore = getModule(CartStore, this.$store)
cartStore.addProductToCart({product: this.product, quantity: 1})

TODO

  • [x] In memory repository
  • [ ] Use pouchDB to persist user's cart data
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].