スペクトラムストア | Next.js、TypeScript、Shadcn を活用した堅牢な E コマース プラットフォーム
これは Fake Store API を利用しており、管理者ダッシュボードと JWT 認証を備えています。
セキュリティに重点を置いて設計されており、ルーティングとサーバー アクションのベスト プラクティスが実装されています。
デモを見る 。バグを報告する 。リクエスト機能
次の js 14最後の機能
次の jsサーバー アクション+ Axios + Zod
React フック フォーム+クライアントとサーバーの両方に対するzodによる検証
認証JWT + Cookie +認可DATA レイヤー +ミドルウェア
JWT認証+ログアウトを使用したログインページ
グリッドレイアウトのホームページ
カテゴリフィルターを使用してすべての製品を表示する製品ページ
評価、価格設定、カート追加ボタンのある製品詳細ページ
カート引き出し(カートに追加、カートから削除)
グローバル検索機能
テーマトグラー(ライト/ダークモード)
アニメーションとスケルトンの読み込み
prouct 、ページネーション、グラフの検索のための CRUD 操作を備えた管理者ダッシュボード
セキュリティを考慮:認証(JWT + Cookie) と承認データ層 +ミドルウェアと検証を伴うサーバー アクション
最適化された SEO とパフォーマンス: このプロジェクトは、最新の Next.js 機能と、メタタグとNext/Image &&サイト マップのベスト プラクティスを使用して、SEO とパフォーマンスに関して最適化されています。
レスポンシブデザイン
任意のfakestoreapiユーザーを使用してログインできます
管理者ロールの場合はデフォルト値のみを使用します
ユーザー名:mor_2314
パスワード: 83r5^_
次の手順に従って、管理者ダッシュボードを開き、proudcts で CRUD を実行できます。
必ず管理者アカウント ( mor_2314 ) でログインしてください。
ユーザーアイコンをクリックします
ダッシュボードをクリックします
まず、開発サーバーを実行します。
リポジトリのクローンまたはフォーク
git clone https://github.com/issam-seghir/spectrum-store.gitcd ./your_project
依存関係のインストール
npmインストール
.env.example
ファイルの名前を.env
に変更します
サーバーを起動します
npm 実行開発
ブラウザで http://localhost:3000 を開いて結果を確認します。
app/page.tsx
を変更することで、ページの編集を開始できます。ファイルを編集すると、ページが自動更新されます。
Next.js アプリをデプロイする最も簡単な方法は、Next.js の作成者が提供する Vercel Platform を使用することです。
詳細については、Next.js 導入ドキュメントをご覧ください。
オープンソース コミュニティを学び、インスピレーションを与え、創造するための素晴らしい場所にするのは、貢献のおかげです。皆様の貢献は大変感謝しております。
これを改善するための提案がある場合は、リポジトリをフォークしてプル リクエストを作成してください。 「拡張」タグを付けて問題を開くこともできます。プロジェクトにスターを付けることを忘れないでください。再度、感謝します!
プロジェクトをフォークする
機能ブランチを作成します ( git checkout -b feature/AmazingFeature
)
変更をコミットします ( git commit -m 'Add some AmazingFeature'
)
ブランチにプッシュ ( git push origin feature/AmazingFeature
)
プルリクエストを開く
MIT ライセンスに基づいて配布されます。詳細については、 LICENSE.txt
を参照してください。