【v0】製品寿命を管理するwebアプリを作ってみた

✅初めに

こんにちは、OhaGiです。
今回は、自宅にある日用品の「交換期限」を管理するWebアプリ KIGEN BOMB SQUAD を作った経験をまとめます。

Github URL

公開URL

🎯 作った理由

• 家の中の期限切れリスクを見える化したい
• 防カビ燻煙材や虫よけなど、使用期限を管理したい
• 見た目がスッキリしたUIで、誰でも直感的に使えるアプリにしたい

🛠 使用技術

• Frontend: Next.js 16 + React 19
• UI: Tailwind CSS / shadcn/ui
• データ保存: ブラウザの localStorage
• Hosting: Firebase Hosting

🖥 アプリの特徴

• 商品登録（名前 / カテゴリ / 期限）
• 期限順にソートして一覧表示
• カテゴリごとの管理
• 編集・削除が可能
• モーダルで詳細確認
• 期限が近いものは色で強調表示

🚀 開発のポイント

1. 小さくリリースする戦略

   • 前回制作した別アプリでは、細かく設計しすぎて開発が進まなかった
   • 今回は「まず動く状態をリリース → 細かく改善と機能追加」という方針を採用
   • これにより、初期段階からユーザーに使ってもらえる形に

2. Firebase Hostingにデプロイ

   • 拡張性が高く、将来的にFirestoreや認証機能を追加しやすい
   • 小さくリリースしても、後からサーバーサイド機能を追加可能

3. localStorage活用

   • サーバー不要で簡単に動作

💡 今後の改善

• Firestore を使ったクラウド同期

• 通知機能で期限間近をお知らせ

• スマホ向けUI改善