スクール模擬案件完成
Webアプリケーション
フリマアプリ
商品出品・購入・決済に加え、取引チャットと相互レビューを実装したフリマアプリです。購入後の取引状況も確認できるようにしました。
制作の背景
学習課題として、認証、商品管理、決済、取引中のユーザー間コミュニケーションまでを含むWebアプリケーションを制作しました。
主な実装内容
- メール認証を伴うユーザー登録・ログイン・ログアウト
- 商品の出品、一覧表示、詳細表示、キーワード検索
- 商品の購入とStripeを利用したカード・コンビニ決済
- お気に入り登録・解除とマイリスト表示
- 購入・出品履歴の表示とプロフィール編集
- 商品ごとの取引チャット、メッセージの投稿・編集・削除
- 未読メッセージ数の表示と、最新メッセージ順の取引一覧
- ユーザー単位での取引チャットの非表示
- 取引完了時の通知メールと、取引相手を評価する5段階レビュー
- プロフィール上での平均評価の表示
設計上の課題と対応
課題
- 購入者と出品者の間で進行する取引の状態や、メッセージの未読状況を管理すること
- 購入後のコミュニケーションから取引完了、相互レビューまでの流れを画面とデータでつなげること
対応
- 商品ごとの取引チャットを作成し、メッセージの時刻と未読状態を用いて取引一覧を表示する構成にした
- 取引完了時に通知メールを送信し、購入者・出品者の双方がレビューを送れる流れを実装した
- チャットをユーザー単位で非表示にできるようにし、取引一覧を整理できるようにした
品質確認
- Feature Testで、商品の出品、一覧・詳細表示、検索、お気に入り、購入履歴を確認
- Stripeの決済処理をモックし、カード・コンビニ決済と購入済み状態への更新を確認
- Feature Testで、取引チャット、メッセージ投稿・編集・削除、未読表示、並び順を確認
- Feature Testで、取引完了時のメール送信、レビュー保存、平均評価の表示を確認