dropship admin

フルスタック E コマース + ダッシュボード & CMS: Next.js 13 アプリ ルーター、React、Tailwind、Prisma、MySQL、2023

デモの場合は、Stripe Testing Cards を使用してください

これはフルスタック E コマース + ダッシュボード & CMS のリポジトリです: Next.js 13 App Router、React、Tailwind、Prisma、MySQL

主な特徴:

• 管理者には Shadcn UI を使用します。
• 私たちの管理ダッシュボードは、CMS、管理者、API の両方として機能します。
• この単一の CMS を通じて複数のベンダー/ストアを制御できるようになります。 (たとえば、「靴店」、「ラップトップ店」、「スーツ店」があると、CMS がそれらすべての API ルートを個別に生成します。)
• カテゴリを作成、更新、削除できるようになります。
• 商品の作成、更新、削除ができるようになります。
• 商品の複数の画像をアップロードし、いつでも変更できるようになります。
• 「商品」作成フォーム上で「色」や「サイズ」などのフィルターを作成・更新・削除し、照合することができます。
• ページ上部の大きな文字である「ビルボード」を作成、更新、削除することができます。これらを単一のカテゴリに添付することも、スタンドアロンで使用することもできます (管理者は、これらすべてのケースに対応する API を生成します!)
• すべてのカテゴリ、製品、サイズ、色、看板をページネーション付きで検索できます。
• どの製品を「特集」してホームページに表示するかを制御できるようになります。
• 受注状況や売上状況などを確認することができます。
• 収入などをグラフで確認することができます。
• 店員認証を学びます！
• 注文の作成
• ストライプチェックアウト
• ストライプ Webhook
• MySQL + プリズマ + PlanetScale

前提条件

ノードバージョン14.x

リポジトリのクローン作成

git clone https://github.com/vishwavinoth/dropship-admin.git

パッケージをインストールする

npm i

.env ファイルのセットアップ

 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY =
CLERK_SECRET_KEY =
NEXT_PUBLIC_CLERK_SIGN_IN_URL = / sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL = / sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL = /
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL = /

# This was inserted by `prisma init` :
# Environment variables declared in this file are automatically made available to Prisma .
# See the documentation for more detail : https : / / pris . ly / d / prisma - schema #accessing - environment - variables - from - the - schema

# Prisma supports the native connection string format for PostgreSQL , MySQL , SQLite , SQL Server , MongoDB and CockroachDB .
# See the documentation for all the connection string options : https : / / pris . ly / d / connection - strings

DATABASE_URL = ''
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME = ""
STRIPE_API_KEY =
FRONTEND_STORE_URL = http : //localhost:3001
STRIPE_WEBHOOK_SECRET =

PlanetScale に接続して Prisma をプッシュする

npx prisma generate
npx prisma db push

アプリを起動する

npm run dev

利用可能なコマンド

npmでコマンドを実行するnpm run [command]

指示	説明
dev	アプリの開発インスタンスを開始します