Todo Manager

Demo  GitHub 

完整撰寫前端、後端程式，並打包。可新增、刪除、修改 todo，若已完成還可註記。

前端使用技術

• 原生 JavaScript
• XMLHttpRequest  實現 AJAX
• Async function / Await 
• SCSS 
• Webpack 打包

後端使用技術

• Node.js 、Express、Firebase
• RESTful API

React Project Collections

Demo  GitHub 

用 React 寫出 15 種常見的網頁區塊或技術。包含 slider、navbar、tabs、todo、search 等。

此專案 CSS 非我本人撰寫，僅 React.js 和 JSX 為本人撰寫。

使用技術

• React.js
  • useState
  • useEffect
  • useContext
  • useReducer
  • useRef
  • useCallback

Tenzies

Demo  GitHub 

Tenzies 遊戲。 所有方塊都選到同樣數字即獲勝。 Roll button 可隨機更換未選取的號碼

使用技術

• React.js
  • Hooks

Tic-Tac-Toe

Demo  GitHub 

Tic-Tac-Toe OOXX 遊戲。 提供歷史紀錄功能，紀錄每一步驟，並可回朔。

使用技術

• React.js
  • Hooks
  • class component

Resistance服飾電商網站

Demo  GitHub  

前台：

可瀏覽商品，將商品加入購物車、註冊/登入會員、送出訂單、會員訂單。版型自行設計切版。

後台：

可新增產品、文章、優惠券，可察看訂單

使用技術

• Vue CLI 建置專案
• 使用 Vue Axios 接 RESTful API
• 使用 CKEditor
• 使用 Swiper
• 使用 VeeValidate
• 使用 Promise 、 Async function / Await 語法
• 使用 Firebase 服務 
  • Authentication
  • Storage

快篩地圖

Demo  GitHub 

透過 Vue CLI 快速建置專案，結合 Leaflet.js 和 OpenStreetMap ，連接 API 後取得全國快篩藥局資訊，並顯示於地圖上。提供定位、搜尋篩選功能。

使用技術

• Vue CLI 建置專案
• 使用 Vue Axios 接 API
• 使用 Leaflet.js 
• 使用 OpenStreetMap 
• 使用 Geolocation API
• 使用 Promise 、 Async function / Await 語法

個人技術部落格

medium