6個素人，45天，復刻了一個33萬人使用的程式碼分享社群平台

Editor即時渲染，使用Ace Editor套件做出Editor，部分元件使用React

我負責以下部分：

Save Button：建立API後，用Javascript打API

按下左上角Settings按鈕可以套用你想要用的套件或框架，使用React / 串接cdnjs

Your Work 頁面 可針對自己的作品搜尋、排序，此頁面使用React render

我負責以下部分：

搜尋、排序：Rails Active Record查詢

本頁面Pen的API：blueprinter gem搭配oj gem產出JSON

之前刪除掉的Pen可以在1hr內救回來

此頁面由我負責，使用paranoia gem軟刪除實現

Styling：Tailwind CSS、Sass

最上方可以輸入關鍵字搜尋全站的Pens，此功能由我負責，使用Rails Active Record查詢

Trending 分頁可看到近一天被關注較多的Pens，此頁面由後端撈資料後渲染，使用impressionist gem

Follow 分頁可看到你追蹤的作品的Pens，此頁面由後端撈資料後渲染

同時你可以對所有的Pens按讚表示你對作者的贊同

我負責以下部分

Follow：user的self-referential，搭配Stimulus前端打API

Trending：Rails Active Record 查詢

按讚：建立API，搭配Stimulus打API

你也可以留言與作者技術交流，或是Share Link給朋友看，留言評論由Stimulus搭配API實現

點擊左側選單的CodePain PRO按鈕，選擇喜歡的方案後，可以進入綠界金流付款頁面

我負責以下部分：

串接綠界金流

建立訂單 / 產品

使用Stimulus切換月費 / 年費

付款後，會員升級為PRO，可增加設定權限功能，讓其他人不會看到你的作品