💥背景・課題

• 先日ポートフォリオサイトを構築した。
• ただ、現状「Works」セクションがコードベタ書きとなっており、 新規追加時にコード追加・デプロイが必要で追加の手間がかかっている課題感あり。

🎯目的

• 今後Worksの追加・更新をしやすくし、ポートフォリオ拡充の手間を下げる

🏗️ 技術構成

• 今回学習目的も強いため、Rails・Next.jsなどモダンで触ってみたいな〜と思っていたものを中心に構成。

• インフラは基本無料枠充実してるものを選定。

  • フロント　　 ：Next.js+TailWind CSS

  ↑既存Portfolioサイトを拡張するイメージ

  • バックエンド：Ruby on Rails
  • DB　　　　 ：PostgreSQL + ActiveRecord + dry-schema
  • 画像管理　　 ：S3に保存、URLのみをDBで管理
  • 自動テスト
    • フロント 　 ：Jest
    • バックエンド：RSpec
  • インフラ
    • フロント.　 ：Vercel
    • バックエンド：Docker + Render
  • セキュリティ
    • 管理画面認証 ：Google OAuth（GitHubは後回し）
    • 各種API認証. ：Bearer認証（Authorizationヘッダに付与)

🖥️ 画面構成

1. ログイン画面（Google）
2. Works一覧画面（追加・編集・削除）
3. 追加画面/編集画面

↑これで編集したWorkがポートフォリオサイトで見れる仕様

🚪 管理画面導線仕様

• /admin へのリンクはサイト上には表示しない
• Ctrl+Kなどの隠しコマンド押下時にヘッダに出現、押下するとログイン画面に遷移
• リンクは「10秒で自動非表示」or「画面クリックで即非表示」