Zines - 線上行銷網頁編輯器

專為行銷人打造，所見即所得的行銷頁編輯器。

前端部分，由於在編輯器上會有滿多的交互行為所以一開始便規劃透過React、Redux去做介面的顯示和狀態的管理，然而又因為行銷頁面有SEO的考量，便以server render方向下去設計，而選用了Next.js ，並且為了因應之後海外的市場，因此也在一開始就有做i18n (react-intl)。

架構部分，Render server (Node) 、API server (PHP) 和RDS (MySQL)等service皆是部署在AWS上，流程上，透過Docker和Circle CI去做持續交付、部署。

使用技術： React, Redux, redux-thunk, Next, glamor, ESLint, Jest, Docker, CircleCI, EC2, ECS, ALB, Route 53, S3, Lambda。

Zines CMS - 行銷網頁管理資訊後台

管理行銷網頁和顯示網頁資訊的後台介面。

前端部分，因為後台部分不用做到SEO，所以就以SPA的方式下去設計，而routing方面則是用我們自己寫的簡易的react-router去做管理，然後一樣有做i18n (react-intl)。

架構部分， 用Nginx當作靜態網頁的web server，而相關的service也同樣是部署在AWS上，持續交付、部署也一樣是透過Docker和Circle CI。

使用技術： React, Redux, Recompose, create-react-app, redux-thunk, styled-components, ESLint, Jest, Docker, CircleCI, EC2, ECS, ALB, Route 53, S3。

LiTV JS Module

模組化的跳窗介面和信用卡購買介面。

因為公司網站的架構慢慢變大，因此有很多功能和視圖就需要切出來另外做模組化，以便好維護和日後的擴展。

實作上，先把view append到Document Fragment (虛擬的DOM tree)中，並且select 出需要的DOM element儲存在變數中，在呼叫show的接口時，再把Fragment append到要render的DOM element中，只return要公開的方法，把不必要公開的方法用匿名函式的特性隱藏起來。

架構的設計採用的是revealing module pattern (跳窗模組) 和prototype pattern (信用卡購買介面模組) 的方式。

使用技術：Vanilla JavaScript and a little bit CSS, HTML。

iApp - 自媒體平台

產品展示及導入編輯頁面的portal頁。

由一位設計師一位PM及兩位後端人員和我 (前端) 組成的五人團隊，進行為期五個月左右的開發，圖示為初期的Beta版本。

流程上，PM跟設計師討論出整體設計風格及樣式，再由我切出template給後端，然後再根據需求加上樣式 (CSS) 及效果 (JS)。

使用技術： HTML5 (template) , CSS (介面樣式、轉場效果), jQuery (選單、按鈕),  masonry.js & infinitescroll.js (瀑布流效果), Bootstrap (RWD), Git, Github

Travel leader - 系上專題實作

Android地圖遊戲APP。

和系上同學合作開發的畢業專題 - 為期三個月，本人負責遊戲內容的規劃、實作及Google Map API的串接。

實務上，使用 Java去實作外部的Android介面，再透過Android SDK提供的Webview去完成主遊戲程式和API的串接。

使用技術：HTML5 (template) , Javascript (遊戲邏輯), Google map API (地圖資料串接), Android API (外部介面&內部嵌套),  JSON (資料串接), LocalStorage (存擋紀錄功能)