スクール卒業課題 マルチテナントEC 「Digital Ichiba」

Digital Ichibaは、簡単に登録や出店できる、
マルチテナントECです。
私のHappiness Chainの卒業課題の成果物です。
卒業テーマは学生が自由選択できるので、
私は認証や決済を自力で組んでみたいと思い、
ECサイトに決めました。
どうせなら複数出店できるほうがいいと思って、
マルチテナントECにしました。

Next.js × Rails｜マルチテナントEC「Digital Ichiba」の全体設計と実装まとめ
詳しい技術課題は、上記の記事にまとめたので、
ここでは、ショップやカスタマー目線で見た機能を紹介したいと思います。

概要

Digital Ichiba は、
ハンドメイド作家や小規模ブランド、
セレクトショップのオーナー向けに設計された、
オンライン販売プラットフォームです。

初期設定を最小限に抑え、
最短5分で商品ページを公開し、販売を開始できます。
シングルページアプリケーション（SPA）によるスムーズな操作性と、
Stripeを利用した安全で信頼性の高い決済機能を備えています。

スマートフォン・パソコン・タブレットなど、
デバイスを問わず快適に利用できるUIにより、
商品ページの閲覧から購入までをスムーズに行えます。

複雑な設定や運用に悩むことなく、
「作る・伝える・売る」ことに集中できる環境を提供します。

ユーザー登録

IDとパスワードはハッキングに弱く、
なるべく二段階認証やパスキーを使う流れがあるので、
IDとパスワードによる認証を実装しませんでした。
自分で二段階認証やパスキーを実装するのが大変なので、
Googleを使ってログインするように設計しました。
初回登録とログインは同じボタンからできます。

出品する時か、購入する時に個人情報を登録するので、
初回登録時は、個人情報を登録する必要がなく、
Googleを通してログインすると、
カスタマーとしてスタートすることができます。

ショップ側の操作

まずは、出店するためにロールを申請します。
次に、Stripeと連結します。
そうすると新規で商品を出品できるようになります。

出店する

初回ログインすると、カスタマーとしてスタートします。
カスタマー用のダッシュボードに、
「ショップを開設」ボタンがあるので、
これをクリックすると、ロールをカスタマーからショップに変えることができます。
ロールがショップになると、商品を出品するモードが有効化されます。

ショップのダッシュボードには、
プロフィール編集、新規商品登録、Stripe連結、ショップページを見るのボタンがあります。

ショップのプロフィールを編集する

プロフィール編集ボタンを押すと、
ショップのプロフィールを編集できるようになります。
ショップの名前、説明文、アイコン画像、ヘッダー画像を登録できます。

登録するとこのように表示されます。

Stripeに登録する

Stripe連携を押すと、
Stripeの画面に遷移します。
住所や銀行口座を登録できます。
銀行口座は、Stripeの方で管理するので、
Digital Ichiba側で保管する必要がなく、
よりセキュアな設計になっています。

商品の新規登録

Stripeの登録が終わると、
商品の新規登録フォームが使えるようになります。
商品の名前、説明、税抜き価格、個数、イメージ画像を登録できます。

ショップの商品一覧に、登録した商品が出現します。

ショップのオーナーだけ、
クリックすると編集と削除ボタンが出現します。

ショップオーナー以外の人は、
購入画面が出現して、
個数を指定して、カートに入れることができます。

カスタマー側

カスタマーは、ログインして、
カートに商品入れると決済ができるようになります。

カートに商品を入れる

個数を選択して、カートに入れると
カート画面で確認できるようになります。

決済する

同時に複数のショップを処理すると複雑になるため、
ショップごとに決済するように設計しました。
決済ボタンを押すと、Stripeの決済画面に飛びます。

決済した後の挙動

ショップオーナーとカスタマーのダッシュボードに、
購買履歴がでてくるようになります。

詳細へをクリックすると、
注文の詳細画面を見ることができます。

Next.js × Rails｜マルチテナントEC「Digital Ichiba」の全体設計と実装まとめ
技術的なまとめと振り返りは、上記の記事をご覧ください。