vagabondms / flexible-counter-app

This project demonstrates switching between implementations of a store (Vuex, Redux, Valtio, MobX) and UI libraries/frameworks (Vue, React and Svelte).

Flexible Counter App

This project demonstrates switching between implementations of a store (Vuex, Redux, Valtio, MobX) and UI libraries/frameworks (Vue, React and Svelte).

Please refer to the article for more details about the architecture: A different approach to frontend architecture.

Instructions

Run the app

npm run dev

Switching back and forth

• To replace an implementation of the store with another, go to src/modules/counter/infrastructure/store/counter.store.ts and comment/uncomment the equivalent sections of the code.

• To replace Vue with Svelte (or vice versa):

  • Go to src/main.ts and comment/uncomment the equivalent sections of the code.
  • Go to vite.config.ts and comment/uncomment the equivalent parts of the code.

• To switch to React, you'll have to rename:

  • index-tsx.html to index.html
  • tsconfig-tsx.json to tsconfig.json
  • vite-tsx.config.ts to vite.config.ts