ecommerce website shopfinity

Shopfinity

Bienvenue sur Shopfinity , une application de commerce électronique avancée construite avec les dernières technologies. Shopfinity propose une solution complète pour les achats en ligne, comprenant l'authentification des utilisateurs, la gestion des produits, le traitement des paiements et un tableau de bord d'administration intuitif.

Caractéristiques

• Next.js 14 : utilise le dernier routeur d'applications et les fonctionnalités de Next.js pour des applications Web rapides, optimisées pour le référencement et rendues côté serveur.
• MongoDB : Une base de données NoSQL pour un stockage et une récupération efficaces des données.
• Auth.js (Next-Auth) : Solutions d'authentification sécurisées et évolutives.
• Stripe : Passerelle de paiement intégrée pour le traitement des transactions.
• Tableau de bord d'administration : gérez les produits, les commandes et les utilisateurs de manière transparente.
• Responsive Design : garantit une excellente expérience utilisateur sur tous les appareils.
• Collecte des adresses d'expédition : collectez et gérez facilement les détails d'expédition.
• Tailwind CSS : Pour un style efficace et personnalisable.

Commencer

Conditions préalables

• Node.js (v14.x ou version ultérieure)
• npm (v6.x ou version ultérieure) ou fil (v1.x ou version ultérieure)
• Instance MongoDB
• Compte Stripe et clés API

Installation

1. Cloner le référentiel

   git clone https://github.com/yourusername/shopfinity.git
   cd shopfinity

2. Installer les dépendances

   npm install
   # or
   yarn install

3. Variables d'environnement

   Créez un fichier .env.local dans le répertoire racine et ajoutez les variables d'environnement suivantes :

    MONGODB_URI=your_mongodb_connection_string
   AUTH_SECRET=your_auth_secret
   AUTH_GITHUB_ID=your_github_client_id
   AUTH_GITHUB_SECRET=your_github_client_secret
   AUTH_GOOGLE_ID=your_google_client_id
   AUTH_GOOGLE_SECRET=your_google_client_secret
   NEXT_STRIPE_SECRET_KEY=your_stripe_secret_key
   NEXT_STRIPE_PUBLIC_KEY=your_stripe_public_key
   STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
   RESEND_API_KEY=your_resend_api_key
   NEXT_ADMIN_EMAIL=your_admin_email
   AUTH_TRUST_HOST=true
   

4. Exécutez le serveur de développement

   npm run dev
   # or
   yarn dev

   Ouvrez http://localhost:3000 avec votre navigateur pour voir le résultat.

Structure du projet

• /app : Contient toutes les routes.
• /components : composants React réutilisables.
• /lib : Configuration pour MongoDB, Stripe et authentification.
• /lib/models : modèles Mongoose pour MongoDB.
• /utils : Fonctions utilitaires.

Usage

Authentification

• Les utilisateurs peuvent s'inscrire et se connecter en utilisant leur adresse e-mail ou des fournisseurs tiers (Google, GitHub, etc.).
• Les utilisateurs authentifiés peuvent accéder à leurs profils, à l'historique des commandes et bien plus encore.

Tableau de bord d'administration

• Accessible uniquement aux utilisateurs disposant de privilèges d'administrateur.
• Gérer les produits : ajoutez, modifiez ou supprimez des produits.
• Gérer les commandes : afficher les détails de la commande, mettre à jour le statut de la commande.
• Gérer les utilisateurs : affichez les informations sur les utilisateurs, attribuez des rôles d'administrateur.

Paiements

• Intégré à Stripe pour un traitement sécurisé des paiements.
• Les utilisateurs peuvent ajouter des articles au panier et procéder au paiement.
• Collecte de l'adresse de livraison lors du paiement.

CSS vent arrière

• Tailwind CSS est utilisé pour le style. Vous pouvez personnaliser les styles en modifiant le fichier tailwind.config.js et en ajoutant vos classes CSS personnalisées dans le fichier styles/globals.css .

Contribuer

Nous apprécions les contributions ! Veuillez suivre ces étapes pour contribuer :

1. Forkez le référentiel.
2. Créez une nouvelle branche ( git checkout -b feature/your-feature ).
3. Apportez vos modifications.
4. Validez vos modifications ( git commit -am 'Add new feature' ).
5. Poussez vers la branche ( git push origin feature/your-feature ).
6. Créez une nouvelle Pull Request.

Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

Remerciements

• Suivant.js
• MongoDB
• Auth.js (Next-Auth)
• Bande
• CSS vent arrière

---

Démo en direct

Découvrez la démo en direct de Shopfinity ici.

N'hésitez pas à personnaliser ce fichier README.md en fonction des exigences spécifiques de votre projet. Profitez de la construction avec Shopfinity !