鐵人檔案
好的開源專案，能夠從中學習到好的架構應該如何撰寫
也可以了解到哪些部分是我們平時在開發中可以去培養的習慣
藉由 lodestar-app 這個開源的 React 專案，學習我們過去開發中常常忽略的問題
期望能夠順利完賽XD
在昨天小小的 Review 過後今天我們正式進入到功能 首先我們先看到「Blog」頁面 Blog Blog 分為「文章總覽頁」和「文章內頁」我們今天先來看到文章...
昨天我們看完了文章總覽頁今天我們進到文章內頁 程式碼如下： import { Icon } from '@chakra-ui/icons' // ~中間略~...
昨天我們把 Blog 部分結束今天接著看 Program 的部分 Program 分為「探索課程頁」和「課程內頁」我們今天一樣先從探索頁開始 ProgramCo...
我們昨天大概看了一下探索課程頁今天我們來看看「ProgramCollection」和 「ProgramCard」這兩個元件 ProgramCollection...
今天我們看到課程的簡介頁 在課程簡介頁中最上方為 Banner 區塊他顯示課程封面圖、標題和標籤在封面圖的部分做了放大和模糊具體的實作方是如下： import...
終於進到我們最後的部分，「checkout」接下來我們會來看在這個專案中結帳的流程是怎麼進行的 我們以們前幾天的課程為例首先我們看到，如果課程為「0元」的情況分...
我昨天我們講到了購買流程今天我們看看這些元件是怎麼做的 以課程為例，他會有不同的課程方案可供選擇 首先是價格的部分 <PriceLabel var...
我們今天來看什麼情況下結帳的話面會出現不一樣的元件 當你選購的方案為「訂閱方案」且價格為「0 元代幣」這時候你點選「立即訂閱」時他會跳出下面這個 Modal 這...
今天我們來看到 checkout 的最後一個部分結帳頁 首先最上方是購物車裡面的商品他會顯示商品的縮圖、名稱、商品類型和價格如果是購買實體商品會有數量如果想移除...
經歷漫長的日子，終於到了第三十天我們先短暫的回顧一下功能的部分 Review 在功能的部分我們看了專案三個功能分別是部落格、課程和結帳由於時間有限加上專案功能繁...
