ecommerce-admin-nextjs
Le site Web de démonstration ne fonctionne plus car PlanetScale a retiré le plan gratuit.
Date de début : 26 juillet 2023.
Description
Le tableau de bord d'administration du commerce électronique avec intégration Stripe est une application Web robuste conçue pour rationaliser et améliorer la gestion d'un site Web de commerce électronique. Développé à l'aide de technologies de pointe telles que Next JS, TypeScript, Tailwind CSS, Shadcn UI, Planet Scale, Prisma, zustand, Clerk Auth, Cloudinary et Stripe, ce tableau de bord complet fournit aux administrateurs une boîte à outils puissante pour superviser et optimiser divers aspects du boutique en ligne.
Principales fonctionnalités
- Le tableau de bord d'administration permet aux administrateurs du site Web de créer, mettre à jour et supprimer les informations du magasin.
- Les administrateurs peuvent gérer efficacement les panneaux d'affichage ou les bannières qui apparaissent sur la page d'accueil du site Web. Ils peuvent télécharger, mettre à jour et supprimer des bannières promotionnelles pour attirer les clients et mettre en évidence les offres ou les ventes en cours.
- Avec le tableau de bord d'administration, la gestion des catégories de produits, des tailles et des couleurs devient un jeu d'enfant. Les administrateurs peuvent ajouter, modifier ou supprimer des catégories, des tailles et des couleurs, permettant ainsi au site Web d'organiser et d'afficher efficacement les produits.
- Pour permettre une communication fluide entre l'application Web front-end et le back-end, le tableau de bord intègre des routes API. Cela garantit que les informations sur les produits sont récupérées et affichées de manière transparente sur le site Web destiné aux clients.
- Le tableau de bord d'administration utilise l'authentification Clerk pour une authentification sécurisée, garantissant que seul le personnel autorisé peut accéder et gérer les informations sensibles.
- Avec l'intégration de Planet Scale et Prisma, l'application bénéficie d'une base de données robuste et évolutive, capable de gérer des stocks de produits croissants et un trafic croissant sur le site Web.
- Le cœur de tout site Web de commerce électronique réside dans ses capacités de gestion de produits. Le tableau de bord d'administration permet aux administrateurs d'ajouter de nouveaux produits, de mettre à jour les produits existants, d'archiver les produits en rupture de stock, de marquer les produits comme produits vedettes et de supprimer les produits qui ne sont plus disponibles. Ils peuvent définir les détails du produit tels que le nom, la catégorie, le prix, les images et d'autres attributs spécifiques au produit.
- Une gestion efficace des commandes est cruciale pour tout site de commerce électronique. Le tableau de bord fournit des outils complets pour afficher, traiter et gérer les commandes entrantes.
- Intégrez de manière transparente Stripe en tant que passerelle de paiement, permettant aux clients d'effectuer des paiements en ligne sécurisés et pratiques. Les administrateurs peuvent consulter l'historique des transactions et garantir une expérience de paiement transparente aux acheteurs.
Tester le projet
Pour tester le projet, téléchargez le fichier zip et ouvrez-le dans l'éditeur de votre choix. Ensuite, exécutez npm install dans le terminal pour installer les dépendances.
Après avoir installé les dépendances requises, vous devrez créer un fichier .env à la racine de votre dossier projet. Les variables d'environnement requises sont les suivantes.
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=/
DATABASE_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
STRIPE_API_KEY=
FRONTEND_STORE_URL=
STRIPE_WEBHOOK_SECRET=
Suivez les étapes de la documentation officielle de Clerk, Planet Scale, Cloudinary et Stripe pour obtenir les valeurs de la variable d'environnement. Après avoir terminé les étapes ci-dessus, exécutez npm run dev pour tester le projet.
Si vous ne voulez pas subir tous les ennuis, vous pouvez toujours tester le site de démonstration de ce projet.
