ポートフォリオ制作

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

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

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

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

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

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

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

使用イメージ

全てのページがレスポンシブデザインとなっておりますが、
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が整っていないと、不信感が高まり、機能を実際に使ってもらえないと思ったため
色には統一感を持たせ、統一感のある見やすいデザインにしました。
私生活ではスマホでレシピ検索したり、レシピを見ながら料理することが多いため、
スマホでも違和感なく見れるようレスポンシブデザインにしました。

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

機能面

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

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