-
A-Tree (Chrome extension for Github users)
Repo: https://github.com/shinenic/a-tree
Chrome Extension: https://chrome.google.com/webstore/detail/a-tree-github-review-help/niogapfhnkbjmpnnobldcekclbgkbiah
針對 Github (以及 Enterprise)使用者在瀏覽 Repositories 方便以及 Review Pull requests 下的使用情境， 製作 Tree view / file search / switch between commits/pulls 等快捷方便的 Extension 提供開發者使用
使用技術
- React
- Material-UI
- React-window (Apply virtualization for large repositories and pull requests)
- React-query
- Webpack
-
台中歌劇院導覽系統
https://ntt360.weacloud.org (for mobile)
使用React整合VR軟體KRPano完成SPA網頁應用程式，並使用XState管理複雜的使用者流程，來建立順暢的使用體驗。
-
React-Krpano-Hooks (npm library)
Npm: https://www.npmjs.com/package/react-krpano-hooks
Demo: https://shinenic.github.io/react-krpano-hooks/#/
使用React hook整合VR軟體KRPano成獨立custom hooks，用以幫助React開發人員能快速串接KRPano並取得其API以及狀態資訊等等。
-
使用狀態機&React的獨立Component練習
-
Picture Carousel with Drag & Pinch Actions(Mobile-First)
Demo: https://gp8p3.csb.app/
實作可縮放以及拖曳的圖片幻燈片，並使用各個狀態來控制增進使用者體驗的細節
-
Toast component
Demo: https://codesandbox.io/s/xstate-react-toast-with-counter-mnrzf
使用狀態處理Toast從出現到消失以及暫停等等的各種狀態，再依狀態顯示不同的Style
-