介紹
很高興認識你，我叫 Tomobot！
我從事嵌入式軟體工程師工作三年了，但想轉行做前端工程師，所以今年四月開始學習React。
基於這些學習，我們花了大約兩個月的時間建立了這個應用程式。
我一直很喜歡 K-POP 偶像，我想向全世界更多的人傳播支持偶像的理念，所以我決定建立 K-POP 卡片應用程式。
建立的服務
我們建立了一個應用程式，允許用戶建立和分享原創卡片，表達他們最喜歡的 K-POP 偶像和團體。
我們為什麼要這麼做？
■ 談論自己喜歡的偶像時興奮起來很有趣
我超愛K-POP，也算是個所謂的“禦宅族”，每天都會看偶像的舞蹈影片，聽他們的歌，哈哈。平常我喜歡一個人看影片，支持自己喜歡的偶像，但我覺得和朋友們聊自己喜歡的組合和偶像更有趣，也更刺激。於是，我萌生了創作一些能引發話題的東西的想法。
■ 想要一個可以輕鬆與粉絲互動的地方
雖然可以透過社群媒體和官方粉絲網站與其他粉絲互動，但我不喜歡輕鬆地介紹我最喜歡的偶像，而且我必須親自主動與他們互動，所以我希望能夠輕鬆地分享我最喜歡的偶像的照片以及我喜歡他們的地方。
■ 想收藏自己喜歡的角色
我認為如果我能將我最喜歡的偶像以收藏品的形式表達出來並每次都看它們而不是僅僅在 Pinterest 或網路上查找它們會很有趣。
基於這些原因，我想要一個可以讓我分享我的收藏夾的應用程式。
人們對偶像的興趣源於他們的外表，因此我們開發了一款卡片式應用程式，可讓您查看偶像的全身照片並表達您對偶像的喜好！ ！
您建立了什麼功能？
★卡片功能
可以將自己喜歡的偶像製作成卡片，製作出獨特的原創卡片。
能夠看到自己喜歡的偶像就已經很開心了！ ！
該卡包括
-
作者
-
卡牌名稱
-
組名
-
會員名稱
-
影像
-
讚按鈕
-
YouTube 連結
-
YouTube 音樂連結
-
推薦要點備忘錄
有。
在YouTube連結部分，您可以發布您最喜歡的YouTube影片的共享連結，例如以您最喜歡的偶像為主角的音樂影片或節目。
您可以在 YouTube 音樂連結中發布 YouTube 音樂歌曲連結。
↓您可以在此註冊畫面上輸入每個資訊並按下儲存按鈕來建立一張卡片。
★按讚功能
我們加入了“喜歡”按鈕，以便您可以喜歡您喜歡的卡片。
我們加入了讓用戶想要製作更多自己喜歡的角色的卡片的元素，這樣如果該卡片有很多讚，用戶就會知道它很受歡迎！
★卡片列表及卡牌搜尋功能
您可以在此畫面查看已建立的卡片。
您可以使用左上角的搜尋欄位縮小按成員名稱或群組名稱顯示的卡片範圍。
我想創作出人們即使長時間觀看也不會感到厭倦的內容…
★卡片編輯功能
這是您可以編輯所建立的卡片的畫面。
點擊卡片列表介面右上角的“編輯卡片”，進入編輯介面。
僅顯示用戶自己建立的卡片，並且可以透過刪除卡片並輸入自己建立的卡片名稱來編輯卡片。
技術堆疊
-
語言
-
反應
-
TypeScript
-
DB設計
-
蘇帕貝斯
-
前端
-
Tailwind CSS
-
shadcn/ui
-
建置工具/開發環境
-
迅速地
-
測試
-
是
-
React 測試函式庫
-
持續整合/持續交付
-
Firebase
-
Github 動作
透過個人發展獲得的學習和領悟
你想要解決的問題比你使用的技術更重要。
剛開始開發的時候，我覺得既然是個人專案，就應該用未來有用的技術來做產品，而且我也想用AI來做個人開發。然而，基於我想使用的技術構思創意非常困難，即使有創意，也並非我真正想做的事。這次我做的KPOP卡片應用雖然沒有用AI，但我還是學到了很多東西，累積了經驗。最重要的是，我很享受開發的過程，而且因為這是我真正想做的，所以我才能夠完成它。
我學到了，個人發展應該先圍繞著你想解決的問題和你想服務的使用者。當然，學習所需的技能也很重要！
從最小價值產品到完成品
在這次開發中，我們採用了MVP理念來進行開發。
MVP代表Minimum Viable Product (MVP) ，這是一種常用於新創公司和新商業企業的敏捷開發方法。
-
目標是快速驗證產品或服務理念是否真的有價值。
-
不要建立全系列的功能，而是首先只實現實現核心價值的最小功能。
-
讓用戶嘗試並根據他們的反饋進行改進
-
與精實創業理念直接相關（建構→衡量→學習）
這是一種創造最低限度的價值、獲得用戶回饋，然後將其完成的開發方法。
這次，我們決定分階段建立產品MVP1 ～ MVP5 。
<
詳情>
已實施的 MVP 列表
最有價值球員1
您可以註冊卡片並查看已註冊的卡片。可以透過連結存取圖像和音樂。
全部
-
[ ] 建構開發環境
-
[ ] 使用 Vite 準備 React+TypeScript 開發環境
-
[ ] 部署到 Firebase（建立新專案）
-
[ ] 建立 Makefile（可以使用 make deploy 來部署）
-
[ ] 建置CI/CD環境（推送時自動部署與測試）
-
[ ] Tailwind CSS 簡介
-
[ ] shadcn/ui 介紹
-
[ ] 在supabase中建立用戶卡片表（用戶ID，卡片名稱，群組名稱，成員名稱，圖片連結，影片連結，歌曲連結，推薦積分備註）
-
[ ] 卡片介面UI、註冊介面UI、卡片列表UI的考量
-
[ ] 可以註冊卡片上寫的資訊。
-
[ ] 使用者ID、卡片名稱、團體名稱、成員名稱、圖片連結、影片連結、歌曲連結、推薦積分備註都會登記在superbase。
-
[ ] 可以檢視並操作已註冊的卡
-
[ ] 有一個卡片列表螢幕
-
[ ] 觸碰並操作卡片螢幕上的各個UI
- [ ] 画像は画像ボタンをタッチで画像ファイルをダウンロード
- [ ] 動画は動画リンクボタンをタッチでリンクを表示
- [ ] YoutubeAPI
- [ ] 音楽は音楽リンク入力欄にURLを記載で♬ボタンを押下で再生できるようにする
- [ ] YoutubeAPI, SpotifyAPI
-
[ ] 您可以透過群組名稱搜尋，查看目標群組的卡片。
-
[ ] 影片和音樂連結將帶您到外部網站
MVP2
您將能夠“喜歡”卡片，卡片創作者也將能夠看到您的“喜歡”
全部
-
[ ] 建立登入畫面
-
[ ] 使用者卡片表新增讚數
-
[ ] 卡片上顯示「讚」圖標
-
[ ] 您可以雙擊螢幕或按「讚」圖示來增加讚的數量。
-
[ ] 讚數將顯示在讚圖示旁。
-
[ ] 當貼文被按讚時，會出現動畫心形標記。
MVP3
向卡片加入教程
全部
- [ ] 按下教學按鈕即可進行教學。
MVP4
能夠刪除/編輯卡片
全部
-
[ ] 進入編輯畫面時，會顯示建立者ID與卡片ID相符的卡片。
-
[ ] 您可以使用右上角的刪除按鈕刪除卡片。
MVP5
能夠註銷
全部
- [ ] 建立註銷功能
關於這個MVP ，在開發接近尾聲時，我們做了許多修改，與最初的設想有所不同。我們意識到要交付最低限度的價值，但最終卻出現了各種各樣的要求。因此，儘管我們最初計劃在一個月內完成，但第一個 MVP1 花了一個月才完成。
然而，在社群中有人使用完成的 MVP1 並收到大量回饋之後，我心中設想的後續 MVP 的內容發生了變化，產品價值的不足之處也變得更加清晰。
這次經驗讓我明白，使用者回饋是創造有價值產品的最重要因素。
為了盡快將產品交付給用戶，我想定義自己的最低價值，如果可以實現，就爭取在那時完成 MVP。
事情沒有照計劃進行
原本計劃一個月完成，但由於動力不足、開發過程中想修改內容以及查找 Bug 原因等原因，最終花了兩個月的時間。我為每個MVP設定了稍早的截止日期，並管理了任務，但仍然無法按計劃進行。
一是我們對每個MVP都過於講究，二是我們在開發過程中最終將原本計劃使用的前端 CSS 框架換成了另一個框架，這需要進行重大重構。
即使在工作中，也不可避免地需要更改預先選擇的庫，但我認為如果我事先做了更多的研究，就可以避免這種情況。
此外，如果我制定的計劃包括研究，那麼計劃就不會首先失敗，所以從下次開始我會制定包括研究的計劃。
未來發展
雖然在開發過程中有很多不順利的地方，但仍有改進的空間。
-
現在您可以直接從卡片上編輯卡片。
-
現在您可以按建立者過濾卡片
-
現在您可以註冊多個圖像
-
允許使用者使用 Google 帳戶等登入。
-
使用 AI 增加一個有趣的功能
-
使內容遊戲化
如果可以的話，我想把這項服務發展成相容智慧型手機並且可以獲利的服務。希望以後能繼續發展，讓它變得更有趣！
結論
我意識到，儘管直到四個月前我才接觸過React, Typescript或DB ，甚至從未デプロイ任何東西，但如果我繼續穩步發展，我可以成為一個初學者，並透過個人發展創造出我喜歡的東西。
我的動力時好時壞，但我了解到最好的事情就是繼續努力，不要放棄！ ！
我們正在招募JISOU成員！
程式輔導JISOU正在招募新成員。
為什麼不在日本第一產出社群中發展你的事業呢？
如果您有興趣，請瀏覽我們的網站！
▼▼▼
原文出處：https://qiita.com/Tomoboo_319/items/ad233730a8d34635bb35
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式