Client/Server side for SnapPay 👆

• SnapPay
  • SnapPay Client Design Doc 📘
    • Overview
      • Working scenarios 📋
      • Thoughts on Tech Stacks 💡
      • Client design 📃
        • UI Components
        • System Design
      • misc stacks
  • TODO
  • Takeaways
  • References

A Chrome Extension that retrives url, uploads products, and let other users buy stuffs with simple url-based shopping and transaction features.

_UPDATE: SnapPay Server -> SnapPay Admin _

1. When an user added a product to the url, SnapPay extension detects it from the server
   • input: url, link to server storage for product added url
   • output: chrome.notification
   • issues: how to effectively communicate with server in chrome side (background.js?)
2. User can see added product in SnapPay, add it to SnapPay Cart, and checkout
   • input: ProductData (product name, price, quantity, and stuffs), CartData (ProductData, price, UserData), User Authentification (OAuth? JWT?)
   • output: Transaction Class (thinking of iamport, naver pay...)
   • issues: how to send user+cart data to transaction server/api?
   • problems:
3. Users can see what they bought and ordered on their own profile pages
   • input: UserData + transaction/order data from app server
   • output: profile page

What should I use for this app? I might need:

• Single Page Application for simplicity
• Good state management across pages and tabs
• extensibility and fairly good scalabilty

sooooo I picked VueJs, but it was not enough. Vanilla vue lacks 1) routing, 2) state management when it goes crazy, 3) weak typing cuz of javascript.

To fix this, I added some options:

• typescript for static typing
• vue-router for smooth routing
• vuex for elegant store/state management

Seems like vue-cli w/ webpack template was the best option for me to pull it off.

p.s. typescript got me suffer with its type checking, but it worths it. So much easier for debugging...

Main.vue // Main page wrapper for the extension
|--NavBar.vue // page navigation using vue-router
|--Products.vue // when notification fires up, users can see this page
    |--Product.vue
|--Cart.vue // when user adds products to cart, they can go see their cart
|--Checkout.vue // checkout page, probabily need to show transaction page
|--Profile.vue // profile page
Option.vue // just in case...

Client side pseudo-logic

• Database: sqlite3 or aws rds (to leverage cloud...)
• connection w/ servers: axios
• third party transaction api: Naver Pay? or Iamport

• Client
  • Is there any way to simplify the system more?
• Server
  • Should it eventually migrate to AWS EC2 and AWS RDS...? or nah

• 2018-10-25 - Should draw a diagram before start coding, bro... It actually got me understand how it should be and how I want it to be

https://scotch.io/tutorials/vue-authentication-and-route-handling-using-vue-router#toc-setup-nodejs-server

https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex

https://dev.to/nkoik/-vuex-pattern-smart-module-registration-15gc

https://codeburst.io/dynamic-modules-with-vuex-and-vue-b9c481ca792

https://glebbahmutov.com/blog/vue-vuex-rest-todomvx/

https://github.com/bahmutov/vue-vuex-todomvc

https://github.com/matheusazzi/shop-vue