DEMO I'm using React JS (using typescript) as a framework to develop this app. Implementing isomorphic app, better debugging, customize everything from scratch.
src/client/components
contains all shared componentssrc/client/store
contains all stores, could be represented as ViewModelsrc/client/screens
contains all the screens inside this app, structured by route logicsrc/server
contains the client server
- For the UI, I'm using
material-ui
- Styling using
styled-components
- State management using
Redux
I'm using (Model-View-ViewModel) as an app architecture.
- The
Model
can be found at my own portfolio api - The
View
can be found atscreens
- The
ViewModel
can be represented as the redux reducers itself. So all the requests can only be triggered from ViewModel. There's no way to direct interaction between Model and View
- Implementing isomorphic app
src/server/index.ts
contains server config, both for development (run-time webpack compile) and productionsrc/server/renderer.tsx
contains rendering task used by both dev and prod env.src/server/api.tsx
contains all APIs that could be fetched before render.src/server/StoreFactory
singleton pattern used for storing redux store to be calculated and transferred to the client.- Redirects all mobile characteristic user-agent request to The Mobile App Version
Thanks for Gitlab CI and my aws account that this can be up at https://yahya.ngopi.men
- clone repo
- run
yarn install
- run
yarn dev