起源
來自後端友人的邀約，為家裡餐廳打造專屬 POS 系統，因此開啟了專案之旅。
一開始以為會是一個很簡單的專案，實際進行之後，發現有非常多的小細節，以及之前沒有使用過的套件與技術，雖然熬夜熬了好多天，但收穫滿滿，非常開心能有這次的合作。
專案簡介
人員配置為前後端各一位。
系統分為兩部分：
管理者管理系統、顧客點餐系統。
管理系統以平板橫向為切版依據，點餐系統以手機直向為切版依據。
詳細操作解說請參照 操作指南
開發工具
HTML5、CSS3、SASS、JavaScript、React.js、Redux、Axios、Socket.IO。
收穫
在這次的專案中，發現了許多以前沒有注意過的問題。
像是將高度設為 100vh，在手機使用 safari 開啟網頁後，發現跟自己想的完全不一樣。
一開始以為是高度設錯了，爬了文後才知道，原來手機版 safari 的 100vh，包含了上方與下方的工具列，根據爬到的文章資訊，在設定高度的同一層加入max-height: -webkit-fill-available後順利解決。
也發現了許多好用的套件，像是：
- react-datepicker — 日曆
- react-select — 下拉式選單
- exceljs — 匯出 Excel 檔案
在這次的專案中，深刻體會到套件所帶來的便利，期許自己有天也能成為造輪子的人，在網頁開發這條路上，為其他人帶來開發上的幫助。
困難
在這個專案裡，我覺得最困難的是購物車的邏輯，要考慮的層面非常多。
從不同 API 拿到後端資料，送出訂單所需資訊與打印購物車所需資訊不同，該怎麼整理資料？哪些要用 React state 儲存？哪些要用 Redux 儲存？哪些要用 sessionStorage 儲存？
如果選擇用 state 儲存，會不會因為重新渲染時狀態清空，影響到其他畫面？
往往在以為完成之時，迸出了沒注意到的 bug，但最後完成的時候，真的覺得非常有成就感。
反思
在這次的開發過程中，覺得自己最不足的地方在於全面性的思考，不足以明確的跟後端說需要哪些資料欄位，往往要到開發當下，才發現有欠缺的資料。
這件事到開發後期有逐漸改善，或許是因為對專案的熟悉度提升，也或許是與後端間的討論漸漸步上軌道，但我認為經驗才是最重要的一點，往後的目標是多與他人進行協作開發 side project，或是學習資料庫相關技術，開發全端專案，希望藉由這樣的練習，增進疏理資料流的能力。
