ポートフォリオ紹介

https://spa-front-paradigm-shift.work/

ParadigShift は、再言語化と想起という要素を活用して学習を支援するSNSです。

再言語化は情報を自分の言葉で表現することで理解を深める手法であり、想起は情報を思い出すことです。このアプリでは、自分の再言語化を投稿したり他人の投稿を見ることで新たな視点を得たり、クイズを通じて情報を思い出すことで記憶を定着させ、物の見方や考え方の劇的な変化（paradigm shift）を促すことを目指しています。

ホーム画面

クイズチャレンジ画面

制作背景

私は大学生のころ理学部数学科に所属していましたので、 数学書を読む機会が沢山ありました。その数学書は数学科の教授が書いているので自分が普段使わないような言葉で書かれていました。 よってその数学書に理解できる言葉がなく数学的現象の理解に苦しんでいました

あまりにもわからないので私より数学の得意な同級生（自分と普段使う言葉が似通っている人）に解説をお願いしたところかなり鮮明に理解できて数学的現象の見え方がガラリと変化した経験（paradigm shift）から自分と物事の解釈の仕方が似ている人と解釈を共有してそれを記憶として定着させるアプリがあればとても便利なのではないかという仮説の元このようなアプリを作ることを思いつきました。

AWS構成図

ER図

使用技術

フロントエンド

• Vue.js v2.7.10
• Nuxt.js v2.6.10
• Vuetify（UIフレームワーク）
• JavaScript
• CSS

バックエンド

• Ruby v3.1.0
• Ruby on Rails v7.0.3（APIモード）
• Rspec（テスト）
• MySQL v8.0

インフラ

• docker/docker-compose
• AWS (VPC / ECR / ECS / RDS / Route53 / ACM / ALB / S3 / IAM)
• CircleCI (CI/CD)
• terraform

工夫した点

フロントエンド面

• 完全SPA化で作成しました。
• UIフレームワークにVuetifyを使用し、整ったUIを意識しました。
• VuetifyのGridシステムを利用し、レスポンシブデザインを実装しました。
• ユーザーが仮にどの画面にいたとしてもメインの機能にワンクリックで遷移できるよう導線を意識しました。

バックエンド面

• ダイレクトメッセージなどの応用が必要な機能を実装しました。
• RSpecを利用して、テストを実装しました。

インフラ面

• CircleCIを利用して、CI/CDを実現しました。
• Rails6 + Nuxt.js + MysqlをECS(Fargate)環境で動かしました。
• Terraformを利用して、インフラをコード化しました。

機能一覧

ユーザー基本機能

• 新規ユーザー登録
• ログイン・ログアウト/ゲストログイン
• プロファイル編集
  • アバター画像・ユーザー名・メールアドレス・パスワード
• マイプロファイル
  • 投稿・フォロー・フォロワー一覧
  • フォロー・フォロワー数表示
  • 自己紹介文
• フォロー・アンフォロー
• クイズリスト閲覧（お気に入り一覧）
• ParadigShiftの概要説明文閲覧
• 投稿をクイズリストに追加・削除（お気に入りの作成・削除）
• 自分の投稿の削除
• 投稿の詳細表示・投稿にコメント・投稿にレビュー

ホーム機能

• 自分の投稿とフォローしているユーザーの投稿一覧

投稿機能

• 自分が学んでいる分野の概念を再言語化した文章を投稿

クイズ機能

• 自分がお気に入りに入れた投稿をクイズとして出題
• ANSWER(クイズの答えを表示する)
• HIDE(クイズの答えを隠す)
• NEXT(次のクイズを表示する)

検索機能

• ユーザー検索
  • 全てのユーザー一覧
  • キーワード検索
• 投稿検索
  • 全ての投稿一覧
  • 投稿分野でフィルター

ランキング機能

• 評価の高い投稿をカテゴリー別に一覧で表示する

お知らせ機能

• 自分がフォローされた場合その旨を通知
• 自分の投稿がお気に入りに追加された場合その旨を通知

ダイレクトメッセージ機能

• 他のユーザーと直接チャットができる