Next.js14(App Router)を使用したイメージギャラリーです。
簡易版Pixiv的な感じを構想しています。
言語・フレームワーク - TypeScript,Next.js14(App Router)
CSSフレームワーク - Tailwind
デプロイ - Vercel
データベース - Supabase(Postgresql)
ストレージ - Supabase
認証機能 - Auth.js(旧NextAuth.js)
スライダー - Swiper
アナリティクス - Vercel,GA4
スピード計測 - Vercel
9/18現在、GITHUBとGOOGLEでの認証ができるようになっています。 できればPixivとかの認証もしたいのですが、可能なのかどうか調査中です。 ※X(旧Twitter)の仕様変更で、Auth.jsを使用したX(Twitter)のログインは難しくなっているようなので採用しない方針とします(9/17現在)
ログインされたアカウントは自動的にデータベースに保存され、セッションの管理までデータベースで完結しています。
10/12現在
・ログイン
・アップロード
・プロフィールページにてアップロードした画像のプレビュー
・トップページにてアップロードされた全画像のプレビュー
・プレビューにて一致するタイトルとアイコン、名前を表示
・マイプロフィールを追加
・ユーザープロフィールを追加
・アイコン,ユーザー名からユーザープロフィールに遷移
・アップロードコンテンツの削除
・タイトルや概要欄の編集
・ダッシュボード機能(切り替えタブと投稿作品の一覧)
・トップページスライダー
・コメント投稿・読み込み
・タグの追加と表示
・ランキングページの追加(仮,機能未開発)
・閲覧回数(リロードで加算されてしまうので改善の余地有り)
・いいね機能
・いいね回数
・ダッシュボード機能
・最近投稿されたイラスト
・合計リアクション数
・閲覧数
・視聴数
・TOP3の視聴数
追加予定
・ダッシュボード機能
・合計リアクション数
・TOP3
・いいね
・コメント
・各ページのレスポンシブ対応
・各ページのServerActionsへの改修(現在アップロードページのみ対応)
・スライダーなどに使う画像,記事のアップロードをするページまたは別のサイトを開発
・各ページのレイアウト・デザインの改修
インターンの関係でこのプロジェクトの開発が遅れる可能性あり。
毎日更新はやめるつもりないので少しずつでも開発は進めます。
閲覧回数の機能が一旦実装できたと仮定して、いいね機能をあらかた進めるつもりです。
また、ダッシュボードのTOP3や合計リアクション数なども同時に開発を進めます。
スライダーが常時ただのダミー画像だと味気がないし、ある意味がないのでそちらのアップロード方法と画像や記事などを作ります。