ポートフォリオ紹介

『ガジェコミ！』はガジェット好きが集まれるSNS型のWebアプリケーションです。

簡単に言ってしまえば『Twitterクローン』に近いものなので、SNSに必要な機能を重点的に実装済み。

スマホ利用を想定しているのでモバイルからも気軽にお試し下さい！（ゲストログイン有ります）

スマホ利用も想定したUI設計。

ネストした要素でもAjaxに動作します。

例）『コメントアイコンをタップ → コメント欄を表示 → 既にあるコメントに返信』

例）『コメントを削除』

ポートフォリオに使用した技術

Vuetifyコンポーネントを導入することで、スマホ利用を想定したレスポンシブデザインを実現。
Vuexストアでステート管理。
個人情報（パスワード）は、外部API（Firebase Authentication）に保存する仕組みで、外部APIで発行されるJWTをCookieに保存してログイン・ログアウト機能を実装しました。
未ログイン状態でアクセスして欲しくないページ（ /users/editなど）へのアクセス対策には、Nuxt.jsのmiddlewareを活用することで自動的にリダイレクトするようにしました。
ログイン状態でアクセスして欲しくないページ（ログインページ, 新規作成ページ）へのアクセスも同じくリダイレクトします。

名称	説明
Rails (API mode)	APIサーバーとして利用
PostgreSQL	データベース

名称	説明
Jest	フロントエンドテスト, Vuexストアの動作を少しだけ
RSpec	バックエンドテスト, バリデーションとアソシエーションのテストのみ

ローカル開発環境からデプロイまで一貫してDockerを使用。
ALBを通すことで常時SSL通信化。
CodePipelineは、『Sourceステージ => Testステージ => Buildステージ => Deployステージ』の順で実行され、Testステージで問題が発生した場合は当該ソースでのDeployは実行されません。
本番環境の環境変数については SSM で管理。『システム環境変数 => Terraform => SSM => 各AWSサービス』というフローで環境変数を受け渡しています。

インフラの全体像をまとめたものがこちら。 RDSにはPostgreSQLを採用し、画像を除いたデータを保管。画像データはS3に保管しています。

一貫性のあるテーブル名称を意識しました。

機能名	説明
ユーザー機能	新規登録、登録内容変更、アバター登録、ログイン、ログアウト、フォロー
つぶやき機能	投稿、編集、削除、画像複数枚登録
つぶやきコメント機能	つぶやきに対してコメント投稿、コメントへのリプライ投稿、削除、画像複数枚登録
つぶやきいいね機能	つぶやきをいいねできる、マイページのいいねタブにいいねしたつぶやきを一覧表示
掲示板機能	質問掲示板、雑談掲示板の作成、編集、削除、画像複数枚登録
掲示板コメント機能	掲示板に対してコメント投稿、コメントへのリプライ投稿、削除、画像複数枚登録
私物ガジェット機能	登録、編集、削除、画像複数枚登録
フィード機能	つぶやき新着表示、タイムライン表示、タグフィード表示
タグ管理機能	つぶやき・掲示板・私物ガジェットにはタグを登録可能、タグをタップしてタグ詳細ページを表示、タグ詳細ページではタグを含むコンテンツを表示
検索機能	各コンテンツを検索可能
通知機能	つぶやきにいいね・コメント、掲示板にコメント、他ユーザーからフォローされると通知を表示
管理者モード	Godmode のトグルスイッチをONにすると、一時的に管理者権限が有効化、各コンテンツの削除メニューが表示される