面試歸面試，作品歸作品，非本科需要倚靠作品來佐證你在程式開發上的學習與成果，比較有機會獲得面試機會，也會增加你對於程式碼的熟悉度與實戰經驗，很推薦規劃至少一個作品來實作。

如何準備作品集

通常1–2個就可以了，把你覺得最吸睛、最值得拿出來講的技術，都放在這1–2個作品上。不用做太多的原因主要是面試官時間有限，其實不是每一間都有空去詳細看你的作品，但有作品就可以作為面試的敲門磚，以及面試時了解你對程式開發的經驗與細節交流。

如果有自己想做的主題，可以就你想做的主題，在youtube或是google搜尋關鍵字，會有蠻多教學的，不管是文章、影片、或是線上付費課程，只要符合你的需要，我覺得都蠻適合作為作品的。

如果沒想法的話，這裡有快速傳送門，可以跟著操作，然後再稍微做點微調修改（例如：版面配置、圖片、檔名、函式與變數命名、增加或替換功能），務必在面試瞭解程式碼在做什麼，畢竟這些都是你呈現給面試官的內容，問了你答不出來，就失去了一個展現能力的機會。

Youtube作品教學頻道

底下是我精選的youtuber，通常都會跟著影片做一次，然後蠻多功能就可以應用在你自己的作品，基本上功能都大同小異，就是寫法可能不同而已。（創新來自於模仿？！）

Tuat Tran Anh

EdRoh

JavaScript Mastery

Lama Dev

Kishan Sheth

Code With Antonio

鐵人賽文章教學

自己做一個價值幾十萬的動態網站，學會Mern開發、前台UI設計各式觀念與各式Lib、typescript你該學會的前端技術

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術

YT影片教學

分享幾個類別的影片，這些都是我收藏起來之後想實作玩玩看的影片，在挑選的時候記得注意看一下有沒有source code可以對照，有時候寫錯可以直接對照，減少debug的時間。

每個類別之所以會挑不止一個，主要是想了解不同人對於類似的功能會怎麼撰寫，也當作是一種練習，希望可以累積多一點經驗，增加對這些功能的熟悉度。

Ecommerce電商

MERN Multi Vendor Ecommerce Series

Mern Stack ecommerce project

Complete E-Commerce in React and Node.js

Build a Fullstack E-commerce using Next.js

Netflix Clone

React Node.js Netflix App | MERN Stack + JWT Full Tutorial

MERN Stack Project | React Project | Netflix Clone with React, Redux Toolkit, Nodejs, MongoDB.

Part 1 | Full Stack Responsive React Movies App With API | MERN Project | React Tutorial
Part 2 | Full Stack Responsive React Movies App With API | MERN Project | React Tutorial

Blog

Blog MERN stack project

Node.js Blog App REST API with MongoDB | MERN Stack Tutorial For Beginners

Build a Fullstack Blog App using MERN (mongo, express, react, node)

Full-Stack Blog App Tutorial | Next.js MongoDB Blog App Project Full Course

Expense Tracker 記帳APP

Build a Budgeting App with React Router

Full Stack Development with React and Node js - Expense Tracker Application.

參考別人的作品也是一個方式

104或是cakeresume也有蠻多求職者的作品，就去逛逛看看，或許會有些新靈感，也可以參考他們的呈現方式。

我自己沒有另外做一個網站放作品，主要放在104跟cakeresume。

• 有在104的履歷參考搜尋關鍵字參考別人的作品（ex:前端 or frontend）
• 也有在cakeresume的portfolios頁面搜尋關鍵字參考別人的作品（ex:前端 or frontend）

作品需要簡易的後端與資料庫服務

提供兩個BAAS ( Backend as a Service ) 作為Serverless的參考

使用上建議直接搭配完整的專案教學會比較容易上手。

Firebase

Supabase

作品做完後需要部署程式碼

提供幾個PAAS ( Platform as a Service ) 作為部署程式的參考

需要教學的話就google'想要使用的PAAS' + '教學'就有很多影片或是文章可以跟著操作囉！

Firebase - Hosting

Railway

Vercel

Render

Netlify

Cloudflare-Pages ( 前端) Cloudflare-Workers( 後端 )

zeabur ( 中文介面＆台灣新創 )

cyclic

六角學院的好文推薦

想不到好題目做 side project？我們整理超過 20 份可商用授權的設計稿，不論音樂播放器、todolist、新接龍、番茄鐘從小到大應有盡有！

整理出一份開發者做 side project 時，常用的推薦服務

接下來會分享兩個作品，從無到有以及優化改版的紀錄，目前持續龜速進行中，基本上就是一直會當面試的作品，因為兩個作品都是我很想做的事情，詳細內容就等後面的介紹囉