目次
操作デモ
アプリ概要
このアプリは、最新のファッションアイテムを閲覧・購入できる
MERNスタックを用いたフルスタックECサイトです。
ユーザーは商品を閲覧し、カートに追加してStripe決済により購入手続きを行うことができます。
また、管理者アカウントでは商品の登録・編集・削除も可能です。
加えて、お気に入り機能 で気に入った商品を保存でき、
検索機能 で商品を簡単に探し出すことができます。
使用技術
- フロントエンド：React, Vite, Tailwind CSS, React Router
- バックエンド：Node.js, Express
- データベース：MongoDB（Mongoose）
- 認証 / 決済：Firebase Auth, Stripe API
- ホスティング：Render
こだわった点
フロントエンドの状態管理は、Redux や Zustand などの外部ライブラリは使わず、すべて React の組み込み機能である Context API + useState + useEffect で実装しています。
具体的に４つの Context に分けて管理しています。
- AuthContext
- CartContext
- FavoriteContext
- LoadingContext
このように、機能ごとに独立した Context を用意して役割を明確に分離しています。 Context の数も4つと少なく、状態の流れも追いやすいので、現状のアプリ規模では十分にメンテナンス性が高いと考えています。
※無料サーバーのため起動に時間がかかります。