1
/
5

ポートフォリオ制作

Link: https://tasty-life.site/

Github: https://github.com/YukiIshizaki0525/TastyLife

Qiita:https://qiita.com/yuki_ishizaki/items/f20e7090561d77372bde


ポートフォリオを制作した背景

私自身一人暮らしで、日々自炊を行っていて、以下のことが「課題」と感じています。

  1. 作る料理がマンネリ化してしまい、モチベーションが下がり、自炊を突然やめてしまう
  2. 一人暮らしの自炊についての相談できる機会がない
  3. 冷蔵庫に保管している食材を管理できていないため、腐らせてしまったり余っているのに買ってしまう

上記課題を解決できる「自炊のモチベーションアップや悩みが解決できるアプリケーション」を作成しようと決意しました。

使用イメージ

全てのページが レスポンシブデザインとなっておりますが、
GIFはPCサイズとなっております。

レシピ投稿/タグ付け

  • 材料と作り方はレシピによりそれぞれのため、非同期でフォームを追加削除できます
  • レシピの完成イメージはあらかじめ確認したいため、画像プレビューされます



相談投稿

  • 投稿する内容が掴みにくいため、投稿しやすい様にプレスホルダーに投稿内容サンプルを記載



食材登録

  • 登録した食材の個数や賞味期限を確認できるため、無駄な買い足しや廃棄を防止できます。



タグ検索

  • 気分に合わせてサッとレシピを決めたい時に有効です。
  • タグの種類を限定し既定6つのタグから検索が可能です。



相談ソート

  • 関心のある相談や回答数の多い相談を見つけるきっかけとなり、新しい発見により私生活にも活かせます。



ゲストログイン

  • ゲストユーザーは多くの人が使うアカウントであるため、ゲストユーザーアカウントのみ編集削除ができない仕様になっており、退会処理もできない仕様になっています。



使用技術

  • フロントエンド HTML/CSS/Sass/JavaScript(ES6)
  • バックエンド Ruby 2.6.5/Rails 6.0.3
  • テスト基盤 RSpec 3.9/FactoryBot 4.10.0
  • インフラ Docker 20.10.7/Docker Compose 1.29.2
    AWS(VPC, EC2, IAM, RDS, InternetGataway, SecurityGroup, Subnet, Route53, ALB, ACM, S3, CloudFront)
    Nginx 1.15.8


AWS構成図



ER図


機能一覧

豊富な全34機能!
自炊でのモチベーションアップ、自炊ならではの悩み解決に貢献できます。
今後も、オリジナリティあふれる機能を増やしていきます。


工夫点

UI/UX

サイトのUI/UXが整っていないと、不信感が高まり、機能を実際に使ってもらえないと思ったため
色には統一感を持たせ、統一感のある見やすいデザインにしました。
私生活ではスマホでレシピ検索したり、レシピを見ながら料理することが多いため、
スマホでも違和感なく見れるようレスポンシブデザインにしました。

  ✔︎レスポンシブデザイン
  ✔︎ページタイトル、文字色、ボーダー等の色を統一
  ✔︎直感的な操作
  ✔︎多彩なアクションで動きのあるサイト
  ✔︎導線設計


機能面

私自身、自炊の相談がしにくい・食材が管理できないなどの課題があったため
それに対応できるよう相談投稿や食材管理機能を追加し、一般的なレシピサイトとの差別化を図りました。
レシピがすぐに決まらず、めんどくさくて作らなかった場面も多々あったので、
レシピをすぐ決めて、自炊継続できるようタグ検索、ワード検索機能を追加しました。

  ✔︎大手レシピサイトとの差別化
  ✔︎レシピをすぐ決めて、自炊継続できるようタグ検索、ワード検索
  ✔︎関心のある相談をソートして見れる
  ✔︎保管中の食材の管理無駄遣い防止


テスト

  • バリデーションや機能がうまく動作しているか自分で確認しきれないことが多く、コードに信頼性を持たせるため、単体テストと統合テストを多く実装しました。

ModelSpec結果

SystemSpec結果


  ✔︎コードに信頼性を持たせ、ユーザーに安心して使ってもらえるようにRSpecで十分なテストの実施

今後の展望

自炊を行う知り合いに使ってもらっていて、ユーザーの貴重な意見を参考に日々改善を行っています。

今後、追加予定の機能及び変更点を5点ほど列挙します。

  • アプリケーション自体をVue.jsでSPA化
  • 現在の食材管理状況を毎日18:00にメールで登録済みメールアドレスに配信
  • 作る料理を前もって、カレンダー予約できる機能
  • 材料や作り方をドラッグ&ドロップして入れ替えられる仕様
  • 作り方の画像プレビュー機能の追加