- Next.js
- Tailwind
- Stripe
- Redux
- Firebase
- FakeStore API
Fake Store API からデータを取得する電子商取引アプリケーション。ホーム、チェックアウト、注文には SSR を使用し、SWR を介した製品プレビューには CSR を使用します。 Stripe が支払いを処理し、API フォルダー内のカスタム フックがチェックアウト データを Firebase に保存します。 NextAuth は Google OAuth とユーザー セッションを提供し、Redux Toolkit が状態を管理し、Framer Motion がアニメーションを追加して完全な UX を実現します。
ハイライト:
- サーバーサイドレンダリング (NextJS)
- クライアントサイド レンダリング (SWR)
- Google OAuth 認証 (NextAuth 経由)
- Stripe チェックアウトによる支払い
- 注文管理用の Stripe Webhook
- データ ストレージ用 Firebase V9
- Firebase のサービス アカウント (Node.js)
- パフォーマンスのためのコード分割
100% 完了