Skip to content

5個推薦前端工程師的練習專案

February 14, 2022 | 01:17 AM

前端工程師要找到好的工作一定得需要作品集才有辦法說服人,但是在還沒開始工作前怎麼去累積作品呢? 在我剛開始自學的時候,也是找了很多開放的第三方API接口以及別人做過的網站來重新設計與開發放到作品集裡面去找工作,記得那時候每天光想要做什麼項目當練習也是想了老半天。今天分享五個我自己曾經做過的初學項目給剛要轉職的朋友們做參考,同時我也會附上我當時串接的API以及參考範例。


電影介紹網站

電影網站很多功能可以寫,基本的搜尋、排名、電影介紹,TMDB的api文件也還算好閱讀,很適合剛想要練習串API的新手做練習。
參考範例: Reactjs-TMDB-App
API: THE Movie Database API
參考套件: axios

Trello Board

Trello的操作介面非常適合前端工程師拿來做練習,可以練習到怎麼做拖拉介面以及排序等等操作..
參考範例: react-trello-board
參考套件: react-beautiful-dnd

天氣溫度變化圖

相信蠻多前端工程師第一個做的練習就是串接天氣API顯示溫度,但這樣的練習其實還可以再更進一步做變化,試著把api會來的一週溫度資料做成圖表看看
參考範例: weather analytics chart
參考套件: rechart, vue-chart

番茄鐘倒數計時器

倒數計時功能並不難,但可以試著把倒數計時加上動畫以及暫停功能或是設定時間長短,嘗試更多不一樣的變化練習。
參考範例: react-countdown-clock

貸款計算

蠻多銀行的網站都有這個貸款試算功能,這也是很適合新手工程師練習的題目,同樣也能加上圖表做更多不一樣的變化練習。
參考範例: mortgage-mobx


以上五個範例是我找過比較合適初學者練習的題目,如果想要更進階的練習可以到這個網站去搜尋看看有沒有自己有興趣的題目https://react.rocks/


請我喝杯咖啡

如果你喜歡這篇文章覺得它對你有那麼點幫助的話,歡迎贊助我喝一杯我最愛的路易莎澳洲小拿鐵。

街口支付
悠遊支付