【要約】【個人開発：制作期間1ヶ月】自分の美容（髪型・ヘアカラー・ネイルなど）を記録し、予算も管理するアプリを作成しました！【React/TypeScript/Supabase/Firebase】 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者は、自身の美容に関する記録管理と支出把握において、日常的な不便を感じていた。過去の施術内容を即座に確認できず、予算超過にも気づきにくいという課題があった。これらは個人の記憶力や管理能力に依存しており、システムによる解決が必要であった。
- ・美容師への回答時に、過去のカラー情報を思い出せない。
- ・写真フォルダから目的の画像を探す手間が発生する。
- ・美容費の月次推移が可視化されておらず、予算管理が困難。
// Approach
開発者は、1ヶ月という限られた期間で価値を提供するため、MVP開発手法を採用した。モダンな技術スタックを選定し、機能の取捨選択と段階的な実装を徹底した。また、ユーザー体験を損なわないためのUI/UX設計にも注力した。
- ・React 19、TypeScript、Viteによる高速なフロントエンド開発。
- ・Supabaseを活用した認証、DB、ストレージの一元管理。
- ・Rechartsを用いた予算使用額のグラフ表示。
- ・react-selectによる店舗名・担当者名の入力補完。
// Result
開発者は、美容履歴の記録と予算管理を両立するアプリ「Bilog」を完成させた。モバイルでの利用を想定したレスポンシブ設計を実現している。これにより、美容に関する情報の蓄積と支出の可視化が容易になった。
- ・施術前後の写真比較機能による視覚的な履歴管理。
- ・予算超過時のアラート通知による支出抑制の支援。
- ・CI/CD環境の構築による開発プロセスの自動化。
Senior Engineer Insight
> 1ヶ月でのMVP完遂は、技術選定とタスク管理の成果といえる。Supabaseの無料枠制限（メール送信、ストレージ容量）を考慮した設計は実戦的だ。ただし、AIによるスタイリング生成はモバイル特有の崩れを招くリスクがある。実運用では、RLSの厳格な運用と、スケーラビリティを見据えたインフラ設計が不可欠となる。