Skip to content

kei198609/english_app2

Repository files navigation

サービスのURL

https://mailmentor.link
登録せずにお試しいただくことができます。

サービス概要

Mailmentorは、英文ビジネスメール作成の初学者向けの学習アプリです。楽しみながら学べるように、問題に正解するごとにポイントが加算され、ユーザーのレベルが上がる機能を搭載しており、ユーザー同士の競争を通じてモチベーションを高められます。学習形式は、ドラッグ&ドロップでフレーズを並べ替えるインタラクティブな問題が用意されており、正しい並びで文を完成させることが求められます。学習進捗状況は直感的に理解できるグラフで表示され、英文メール作成のコツやテクニックを紹介する記事の共有も可能です。

制作背景

新社会人としてビジネス英語のメールを書く際に、適切なフレーズの選択や丁寧な表現が分からず困った経験があります。この経験を活かし、事前に学習し、自信を持ってメール作成に臨めるようにするアプリを考案しました。

アプリケーションのイメージ

LP画面

機能

概要

英文をドラッグ&ドロップで並び変え、正しい並び替えにすると正解判定され、ポイントが付与されるようにしました。

並び替え問題

学習の進捗状況はグラフで確認できます。

マイページ

記事を投稿し、共有することができます。

投稿時

投稿検索も可能です。

投稿検索確認

機能一覧

  • ユーザーに関連する機能

    • 新規登録
    • ログイン
    • 簡易ログイン
    • ログアウト
    • 登録情報編集、プロフィール画像アップロード、退会
    • 自身のプロフィールページの表示
    • 他ユーザーのプロフィールページの閲覧
  • フォローフォロワー機能

    • 他人をフォロー、アンフォロー
  • 投稿に関連する機能

    • 記事投稿機能(ジャンルを選択し投稿)
    • 投稿コメント機能(他人の投稿にコメント可能)
    • 投稿表示機能(自身の投稿を確認可能)
    • 投稿削除機能(自身の投稿を削除可能)
    • 投稿検索機能(ジャンル選択で検索可能)
  • いいね機能

    • 投稿にいいね可能
  • ブックマーク機能

    • 投稿をブックマーク可能
  • コメント機能

    • 投稿にコメント
    • 自身のコメント削除
  • 通知機能

    • 投稿にいいね、コメント時に通知
  • 英語学習に関する機能

    • 英文メール基礎問題を確認するとポイントが付与
    • 英文並び替え問題に正解するとポイントが付与
    • 英文をドラッグ&ドロップで並び変え、正しい並び替えにすると正解判定され、ポイントが付与
    • 各問題に正解すると、その問題は「正解済み」とマークされ、誤答の場合は「不正解」と表示される
  • レベルUP機能

    • 記事投稿、基礎チェック問題の確認、英文並び替え問題で正解した獲得したポイントによりレベルアップ
  • 学習進捗管理機能

    • 基礎チェック問題の確認状況、英文並び替え問題のクリア状況が円グラフで確認できる
  • その他機能

    • ページネーション
    • レスポンシブデザイン

使用技術

フロントエンド
Nuxt.js(SPA)
Vuetify
axios(バックエンドとの非同期通信)
ESLint/Prettier(静的解析、フォーマッター)

バックエンド
Ruby 3.1.3
Rails 7.0.4
RuboCop(静的解析、フォーマッター)
RSpec(自動テスト)
Nginx(Webサーバー)
Puma(APサーバー)
MySQL 8.0.31(データベース)

インフラ
Docker/Docker Compose
AWS(ECR,ECS,Fargate,VPC,S3,Route53,ALB,RDS,ACM,SSM,CloudWatch)
Terraform(インフラのコード管理)
GitHub Actions(RSpec自動テスト,自動デプロイ)

インフラ構成図

AWS

ER図

ER図

工夫した点

フロントエンド

  • Nuxt.jsによる完全SPA化
  • UIフレームワークにVuetifyを使用し、整ったUIを作成
  • VuetifyのGridシステムを利用し、レスポンシブデザイン設計
  • ESLint/Prettierを利用して、読みやすいコード作成
  • LPページを設け、ユーザーのスクロールを促すような背景デザインを作成

バックエンド

  • バックエンドとフロントエンドを完全に分離し、API通信を実装
  • N+1問題を考慮した実装
  • クイズ問題をseedで投入
  • RSpecを利用して、正常系テスト・異常系テストを実装

インフラ

  • Rails7(Nginx + Puma) + Nuxt.js + MysqlをECS(Fargate)環境で動作
  • GitHub Actionsを用いてCI/CDパイプラインを構築(RSpec自動テスト,自動デプロイ)
  • Terraformによるインフラのコード化

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published