E-Commerce Full Stack + Tableau de bord et CMS : Routeur d'applications Next.js 13, React, Tailwind, Prisma, MySQL, 2023
Pour la DÉMO, utilisez les cartes de test Stripe
Il s'agit d'un référentiel pour un commerce électronique Full Stack + tableau de bord et CMS : Next.js 13 App Router, React, Tailwind, Prisma, MySQL
Principales caractéristiques :
- Nous utiliserons l'interface utilisateur Shadcn pour l'administrateur !
- Notre tableau de bord d'administration va servir à la fois de CMS, d'administrateur et d'API !
- Vous pourrez contrôler plusieurs fournisseurs/magasins via ce CMS unique ! (Par exemple, vous pouvez avoir un « Magasin de chaussures », un « Magasin d'ordinateurs portables » et un « Magasin de costumes », et notre CMS générera des routes API pour chacun d'entre eux individuellement !)
- Vous pourrez créer, mettre à jour et supprimer des catégories !
- Vous pourrez créer, mettre à jour et supprimer des produits !
- Vous pourrez télécharger plusieurs images de produits et les modifier quand vous le souhaitez !
- Vous pourrez créer, mettre à jour et supprimer des filtres tels que « Couleur » et « Taille », puis les faire correspondre dans le formulaire de création « Produit ».
- Vous pourrez créer, mettre à jour et supprimer des « Billboards » qui sont ces gros textes en haut de la page. Vous pourrez les attacher à une seule catégorie ou les utiliser de manière autonome (notre administrateur génère une API pour tous ces cas !)
- Vous pourrez effectuer une recherche dans toutes les catégories, produits, tailles, couleurs, panneaux d'affichage avec pagination incluse !
- Vous pourrez contrôler quels produits sont « en vedette » afin qu'ils s'affichent sur la page d'accueil !
- Vous pourrez voir vos commandes, ventes, etc.
- Vous pourrez voir des graphiques de vos revenus, etc.
- Vous apprendrez l'authentification des commis !
- Création de commande
- Paiement à rayures
- Webhooks à rayures
- MySQL + Prisma + PlanetScale
Conditions préalables
Nœud version 14.x
Clonage du référentiel
git clone https://github.com/vishwavinoth/dropship-admin.git
Installer des packages
Configurer le fichier .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 =
Connectez-vous à PlanetScale et Push Prisma
npx prisma generate
npx prisma db push
Démarrer l'application
Commandes disponibles
Exécuter des commandes avec npm npm run [command]
commande | description |
---|
dev | Démarre une instance de développement de l'application |