デモ EC サイト

URL

https://ec-site-demo-mgdi1wzui-ken2122.vercel.app/

テスト用アカウント

メールアドレス：a@gmail.com
パスワード：testpass
※デモアプリのため、アカウントの追加はお控えください。

使用技術

Next.js
Redux
TypeScript
CSS-Modules
CSS in JS
Material-ui
Firebase(Firestore,Storage)

使用方法

ログイン

最初にログイン画面が表示されるので、上記のパスワードを入力します。

商品の購入

1. トップページの商品をクリックし、商品の詳細ページに移動します。
2. 希望するサイズの隣にあるカートアイコンをクリックし、ショッピングカートに商品を追加します。
3. ショッピングカートに入っている商品の一覧が表示されるので、「レジへ進む」か「ショッピングを続ける」をクリックします。
   ※ヘッダーメニュー右側のカートアイコンをクリックしても、同じページが表示されます。
4. 「レジへ進む」をクリックすると確認画面が表示されます。
5. 「注文を確定する」をクリックすると、商品が購入されます。
   ※デモアプリのため、決済はされません。
6. ヘッダーメニュー右端のメニューアイコンをクリックし、「注文履歴」をクリックすると、過去に注文した商品を見ることができます。

商品の登録

1. ヘッダーメニュー右端のメニューアイコンをクリックし、「商品登録」をクリックすると、登録画面に移動できます。
2. 必要事項を入力し、「商品情報を登録」をクリックすると、商品情報が登録されます。
3. トップメニューに先ほど登録した商品が追加されています。

商品の編集

1. 商品右下のメニューアイコンをクリックし、「編集する」をクリックすると編集画面に移動できます。
2. 編集したい箇所を編集し、「商品を登録」をクリックすると、商品情報が登録されます。
   ※変更内容を表示に反映するためには再度ページを読み込む必要があります。

ISR と SSR

本アプリは Firestore からのデータの取得に Next.JS の ISR を使用しているため、商品の編集を行った際にはページを再度読み込む必要があります。
しかし、SSR を用いれば、ページ遷移の速度は遅くなりますが、ページの再読み込みをせずに変更内容を表示に反映させることができます。
SSR を用いたバージョンはコチラです。
ソースコードは"server-side"ブランチをご参照願います。