タイトル

プロジェクト概要

「24時間で消えるアルバム」は、作ったアルバムが開封してから24時間後に閲覧できんくなるWebアプリケーションです。閲覧期限があることで思い出の詰まった写真たちの価値を高めることができます。

• ユーザーフロー:

1. 新規登録・ログイン: ユーザーはアカウントを作成し、ログインします。

2. アルバム作成: ユーザーは任意の名前を付け、写真を複数枚アップロードしてアルバムを作成します。コメントも一緒につけることが可能です。 作成したアルバムは開封するまでであれば後からでも写真の追加をすることができます。

3. 閲覧: 「開封」ボタンを押すと、その時点から24時間のカウントダウンが開始されます。「アルバムを開くこと」ボタンを押すとそのアルバムを閲覧できます。

4. 消滅: 閲覧開始から24時間後、アルバムは自動的にロックされダッシュボードから表示されんくなり、誰からも見られなくなります。

技術スタック

• フロントエンド: Next.js (App Router)

Reactのフレームワークであり、ルーティング、APIの管理、SSR/SSGによる高速なページ表示を実現します。

• UIライブラリ: shadcn/ui

Tailwind CSSとRadix UIをベースにしたコンポーネント集です。高いカスタマイズ性と、クリーンなデザインを両立させ、迅速なUI開発を可能にしました。

• バックエンド: Supabase

オープンソースのBaaS（Backend as a Service）であり、データベース（PostgreSQL）、認証機能、ファイルストレージ、API生成を統合的に提供します。

• デプロイ: Vercel

Next.jsのアプリケーションに最適化されたホスティングプラットフォームです。Gitとの連携により、コードをプッシュするだけで自動的にデプロイが行われ、開発効率を大幅に向上させました。

構成図

• ユーザー: ブラウザ（PC、スマートフォン）からアプリケーションにアクセスします。

  • Next.js(Vercel): フロントエンド: ユーザーインターフェースを提供します。

  • API Route: バックエンドとして機能し、Supabaseと通信してデータの読み書きを行います。

• Supabase:

  • Auth: ユーザーのログインと認証を管理します。

  • Database (PostgreSQL): アルバム情報（閲覧日時、有効期限など）を管理します。

  • Storage: アップロードされた写真ファイルを保存します。

  • Cron Jobs: （未実装だが今後の機能拡張として記載）閲覧期限が切れたアルバムを定期的に削除する処理を自動で実行します。