跳至主要内容

Wei's Profile

Everyday is another day to be better than you were yesterday

githubyoutubeinstagrammedium-post

關於我

前端網頁程式開發

前端網頁程式開發

React
手機應用程式開發

手機應用程式開發

React Native Expo
自媒體經營者

自媒體經營者

Youtube

求學經歷

曾經參與過的專案 (比賽專題)

去中心化二手車交易與管理平台

使用以太坊私有鏈打造一個去中心化二手車交易與管理平台,透過跟特定廠商合作來使汽車維修和保養的資料透明公開,使消費者在購買二手車時能夠信任該部汽車的車主。

擔任的角色:全端

🎉 資訊應用服務創新競賽 入圍亞太中文組

#Ethereum

#Solidity

#Metamask

#Slither

#React

水情報你知 FloodingHelper

因台灣每年都有民眾至溪邊戲水而遭遇危險,危險通常是因上游下暴雨造成溪流暴漲,但下游民眾不知情,等溪流暴漲在逃跑就來不及了,故該專題開發了一款水情通知APP,會依照危險程度推播訊息給使用者。

擔任的角色:全端

🏅 資料創新應用競賽 多元氣象服務組-銅獎

🏅 校內專題競賽(三) 第一名

🏅 校內專題競賽(二) 第二名

#Android Studio

#Codeigniter 3

#MySQL

Place Radar

蒐集台灣、韓國、日本的開放資料並分析該國家的某區域人口年齡分佈與幸福生活指數等,透過這樣的方式讓要在該區域買房子的人快速了解周遭的生活機能以及居住品質。

擔任的角色:後端

🏅 亞洲跨國際黑克松 入圍台灣前五名

🏅 亞洲跨國際黑克松 最佳黑客獎

#Codeigniter 3

#MySQL

服務足跡 Footprint

為了能夠讓教育資源運用在真正需要的地方,該專題蒐集了全台灣的國中小開放資料,並可針對特定條件進行搜尋,例如:學生總數、學校坪數、是否為偏鄉學校等,搜尋後會將結果以 Google Map 的方式顯示給服務團隊看,讓服務團隊能夠將資源投入到正確的地方。

擔任的角色:後端

🏅 資訊應用創新競賽 教育開放資料組-第二名

🎉 資料創新應用競賽 入圍社會經濟空間組

#Codeigniter 3

#MySQL

個人作品 (Side Projects)

Youtube 頻道經營

日常會分享一些程式語言或工具的使用方式,透過這樣的方式來記錄自己曾經做了哪些事情,以後如果忘記程式或工具的使用方式也可以透過影片幫助自己回想起來,同時也抱持著有一天這部影片搞不好能夠幫助到人的想法。

Github 主頁面經營

將相關比賽經歷和學習過的程式語言與工具列出,並利用 Github Action 來實作自動化功能,當 Youtube 頻道有新影片上傳或是 Medium Post 有新文章上傳時,就會觸發 Action ,將影片與文章連結自動更新至 Github 主頁面。

#Github Action Workflows

#Markdown

花單(材料)統計網

女朋友上班的地方常常需要統計訂單(花單)需要使用哪些花材,所以做了一個網站,讓她們能夠在網站上輸入各種花的型號,網站會自動帶出該種類的花需要哪些花材,也可以自己增加花材的數量,如果有問題的話,能夠透過歷史訂單追蹤某日的花單。

#Next.js 13

#MongoDB

#Mongoose

#Puppeteer

圖書 APP

因家人有買書的習慣,但常常會忘記該本書是否已經買過,導致又買了一樣的書,為了解決此問題,用了 React Native 製作一款APP供家人使用,將書籍資料建檔以後即可在該APP查詢,透過手機掃描書籍ISBN號碼後,可以進行本地搜尋或線上搜尋來確認這本書是否已經購買過。

#React Native Expo

#BarCode Scanner

#GraphQL

#MongoDB

#Mongoose

#Puppeteer

圖書網站

家人反映有時候也會在網路上購買書籍,要開 APP 查詢有點不方便,於是將圖書 APP 另外開發成網頁版。

#Next.js 13

#MongoDB

#Mongoose

樂高零件搜尋網

因為有在接觸 Lego Moc,所以常常需要在蝦皮上面購買樂高零件,但零件可能有些店家有,有些沒有,如果用手動的慢慢找會很耗費時間,所以寫了一個網站來讓自己搜尋,前端是使用 React,後端架 Express 並搭配 Puppeteer 將資料爬取下來開 API 給前端。

#React

#Express

#Puppeteer

寶可夢資料查詢網站

在玩遊戲的時候發現有些遊戲的資料不太好查詢,於是使用 puppeteer 爬蟲將相關的資料爬取下來後彙整,並使用 React 製成網頁公開分享給大家去使用,也製作了英文和中文語系的切換,這也是自己第一次使用 react-i18next。

#React

#Puppeteer

3D-Portfolio Clone

觀看 Youtube 的 Clone 影片,Clone 出 3D Portfolio,初步的認識如何使用 React 做出 3D 網站,也將影片中學習到的技術與套件使用到自己的個人網站上。

#React

#three

Open-Sea Clone

觀看 Youtube 的 Clone 影片,Clone 出 Open Sea ,在過程中也接觸到新的工具 ThirdWeb,透過 ThirdWeb 能夠快速地建立想要的智能合約類型,例如 ERC20、ERC721 ,而我們只需要透過 ThirdWeb 提供的 SDK 去操作智能合約,就能讓網站達到去中心化。

#React

#ThirdWeb

#Sanity.io

3D-Shirt Clone

觀看 Youtube 的 Clone 影片,Clone 出 3D Shirt,也學到怎麼使用 OpenAI 自動產生圖片並顯示在 3D 物件上。

#React

#three

電影介紹 網頁

使用 React 來製作一個電影介紹網站,主要是練習如何使用 React 去 Fetch 別人的 API,並把拿到的資料進行整理並顯示在畫面上供別人查看,在該次開發也遇到了問題,因網頁載入時會直接將電影的圖片顯示出來,如果圖片太多張則會導致網頁有效能的問題,於是最後使用了 Image Lazy Loading 來解決此問題。

#React

#Redux

#Axios

調酒介紹 網頁

使用 React 來製作一個調酒介紹網站,同樣是去 Fetch 別人的 API ,而該專案是想練習 React 如何製作動畫特效。

#React

#Redux

電影介紹 APP

第一個React Native專案,學習如何使用 React Native Expo 進行開發,在開發結束將專案打包成APK檔案時,發現 Expo 預設產生的 APK 檔案非常大,於是寫了一篇使用原生 React Native 打包 APK 的文章給自己看。

#React Native Expo

Disney Plus TMDB Review (Chrome Extension)

練習如何開發瀏覽器擴充套件(Chrome),該擴充套件使用了 TMDB API 來查詢電影的相關資料,進入到 Disney Plus 頁面,電影的右上角就會有電影的總評分,將滑鼠移至電影上,會有評分人數、電影釋出日期及電影知名度分數的資料。

#HTML

#CSS

#JavaScript

#Chrome Extension

怪獸電力公司 刻板練習

在閒暇之餘喜歡挑戰自己對於 CSS 的熟悉程度,所以都會找喜歡的卡通或電影來製作一個簡單的 Landing Page。

#HTML

#CSS

#JavaScript

Ben10 刻板練習

在閒暇之餘喜歡挑戰自己對於 CSS 的熟悉程度,所以都會找喜歡的卡通或電影來製作一個簡單的 Landing Page。

#HTML

#CSS

#JavaScript

辛普森家庭 刻板練習

在閒暇之餘喜歡挑戰自己對於 CSS 的熟悉程度,所以都會找喜歡的卡通或電影來製作一個簡單的 Landing Page。

#HTML

#CSS

#JavaScript