買い忘れ・買いすぎをなくすために、日用品在庫管理アプリ「Stockee」を自作した

はじめに

「あ、洗剤もう切れてた…」「この前買ったはずなのに、また買っちゃった」

こんな経験、ありませんか？

私はまさにこれで悩んでいました。洗剤やシャンプーなどのストック状況を把握できておらず、Amazonのセールで「安い！」と思って買ったら、すでに3つもストックがあった。逆に、「たしかストックあったはず」と勘違いして、セールを逃したことも。

既存の在庫管理アプリも試しましたが、業務用で機能が複雑すぎたり、逆にシンプルすぎて痒いところに手が届かなかったり。

「じゃあ、自分で作ろう」

そう思って1週間で作ったのが、日用品在庫管理アプリ Stockee です。

在庫一覧画面

デモ: https://stockee-theta.vercel.app/ GitHub: https://github.com/okmr2217/stockee

作ったもの

Stockeeは、日用品のストック状況をスマホから手軽に確認・更新できるWebアプリです。

主な機能

在庫の増減: +1/-1ボタンでワンタップ操作
閾値警告: 在庫が少なくなると警告表示
ドラッグ&ドロップ: よく使う品目を上に並び替え
グループ共有: 家族やルームメイトと在庫を共有
カテゴリ分類: 「食品」「日用品」などで整理

グループ設定画面

特にこだわったのは ワンタップで在庫更新 できるUI。買い物から帰ってきたら、ポチポチと数を増やすだけ。使ったらポチッと減らすだけ。この手軽さがないと、結局使わなくなると思ったからです。

技術スタック

カテゴリ	技術
フレームワーク	Next.js 15 (App Router)
言語	TypeScript
ORM	Prisma
DB	PostgreSQL (Supabase)
認証	Better Auth
UI	shadcn/ui + Tailwind CSS
ホスティング	Vercel
D&D	dnd-kit

技術選定の理由

Next.js 15 + App Router を選んだのは、Server ActionsでAPI Routes不要でCRUDが書けるから。個人開発ではこのシンプルさが正義です。

Better Auth は比較的新しい認証ライブラリですが、Prismaとの統合が簡単で、NextAuthより設定がシンプルでした。

shadcn/ui はコンポーネントをコピーして使うスタイルなので、カスタマイズが自由。デザインの一貫性も保ちやすいです。

Claude Codeとの協働開発

今回の開発は、Claude Code（AnthropicのAI CLIツール）をフル活用しました。

やってもらったこと

要件定義書の作成
Prismaスキーマの設計
Server Actionsの実装
UIコンポーネントの作成
バグ修正とリファクタリング

感想

正直、1週間で完成できたのはClaude Codeのおかげです。特に「この機能を実装して」と伝えると、既存のコードベースを理解した上で適切な場所にコードを追加してくれるのが便利でした。

ただ、丸投げではなく 対話しながら進める のがポイント。「この設計どう思う？」「3つの案を提案して」と聞きながら、最終判断は自分でする。このスタイルが一番うまくいきました。

苦労した点：Better Authの初期セットアップ

今回一番詰まったのは Better Auth の初期セットアップでした。

Better Authは比較的新しいライブラリで、日本語の情報がほぼありません。公式ドキュメントを読みながら進めましたが、Prismaアダプタの設定で何度かエラーに遭遇しました。

最終的にはシンプルな構成に落ち着きました：

// src/lib/auth.ts
export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: "postgresql",
  }),
  emailAndPassword: {
    enabled: true,
  },
});

ポイントは、最初から複雑な設定を入れずに 最小構成で動かしてから 機能を追加していくこと。OAuthなどは後から追加できるので、まずはメール認証だけで動かすのがおすすめです。

今後のロードマップ

現在も機能追加を進めています。

購入履歴: いつ何を買ったか記録
商品画像: 写真で視覚的に管理
在庫少通知（PWA）: 閾値以下でプッシュ通知

特にPWA対応は、買い物中にスマホで確認する使い方を考えると必須だと思っています。

おわりに

「自分の課題を解決するアプリを作る」のは、個人開発の醍醐味です。

今回は1週間という短期間でしたが、Claude Codeとの協働で実用的なアプリを完成させることができました。最新の技術スタック（Next.js 15、Better Auth、Prisma）を実践で学べたのも大きな収穫です。

同じような課題を持っている方は、ぜひStockeeを試してみてください。また、コードもGitHubで公開しているので、参考になれば幸いです。

デモ: https://stockee-theta.vercel.app/ GitHub: https://github.com/okmr2217/stockee