next tailwind amazona

Créer un site Web de commerce électronique NextJS comme Amazon

• Tech: NextJS 13, Next Auth 4
• Ui: vent arrière, chart.js, react-chartjs
• DB: MongoDB, Mongoose
• Paiement: Paypal, Stripe
• Hébergement de contenu: cloudinar
• Déployer: GitHub, Vercel, MongoDB Atlas

Ressources

• VIDÉO YOUTUBE: https://youtu.be/_iblyr5mrza
• Site Web de démonstration: https://next-tailwind-amazona.vercel.app
• Code source: https://github.com/basir/next-tailwind-amazona
• Cours complet: basir.thinkific.com

Ce que vous apprendrez

• NextJS Basics comme configurer le projet, naviguer entre les pages et les données récupérant
• Sujets avancés NextJS comme le routage dynamique, l'optimisation de l'image, le SSG et le SSR
• Framework CSS de Tailwind pour créer un site Web réactif en utilisant le thème personnalisé, l'animation et le carrousel
• ReactJ, y compris les composants en décomposition, les API de contexte et les crochets
• Package Auth suivant pour authentifier les clients et les utilisateurs d'administration
• MongoDB et Mongoose pour enregistrer et récupérer des données comme les produits, les commandes et les utilisateurs
• API de développeur PayPal pour effectuer le paiement en ligne
• Déployez les applications Web sur des serveurs comme Vercel et Netlify

Cours complet

Obtenez ce cours de 90% de réduction sur Thinkific: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?Coupon=SAVE90

Courir localement

1. Repo clone

    $ git clone [email protected]:basir/next-tailwind-amazona.git
    $ cd next-tailwind-amazona

2. Créer un fichier .env

   • dupliquer .env.example et le renommer à .env

3. Configuration MongoDB

   • MongoDB local
   • L'installez à partir d'ici
   • Dans .env Fichier Update MongoDB_URI = MongoDB: // LocalHost / Amazona
   • Ou Atlas Cloud Mongodb
   • Créez une base de données sur https://cloud.mongodb.com
   • Dans .env File Update MongoDB_URI = MongoDB + Srv: // votre DB-Connection

4. Installer et exécuter

     npm install
     npm run dev

5. Données de semences

   • Exécutez ceci sur le navigateur: http: // localhost: 5000 / api / graine
   • Il renvoie un e-mail et un mot de passe administrateur et 6 exemples de produits

6. Connexion de l'administrateur

   • Exécuter http: // localhost: 3000 / connexion
   • Entrez l'e-mail et le mot de passe de l'administrateur et cliquez sur Connexion

Leçons

1. Introduction
2. Installer des outils
3. Créer une application suivante
4. Publier sur github
5. Créer la disposition du site Web
   1. Créer un composant de mise en page
   2. ajouter
   3. Ajouter la section principale
   4. ajouter le pied de page
   5. Ajouter des cours de vent arrière
6. Lister les produits
   1. Ajouter des données.js
   2. ajouter des images
   3. Rendre les produits
7. Créer des détails de produit
   1. Créer une page de produit
   2. Créer 3 colonnes
   3. Afficher l'image dans la première colonne
   4. Afficher les informations sur le produit dans la deuxième colonne
   5. Afficher Ajouter une action de panier sur la troisième colonne
   6. ajouter des styles
8. Manipuler ajouter au chariot
   1. Définir le contexte de la réaction
   2. Définir l'état des articles de panier
   3. Créer Addd à l'action du panier
   4. Ajouter le réducteur
   5. Créer un fournisseur de magasins
   6. Manipter Ajouter au bouton de panier
9. Créer une page de panier
   1. Créer Cart.js
   2. Utilisez le contexte pour obtenir des articles de panier
   3. Répertoriez les articles dans les articles de panier
   4. rediriger vers l'écran de chariot après ajouter au panier
10. Mettre à jour la quantité dans le panier
    1. Ajouter une boîte de sélection pour la quantité
    2. gérer la modification de la boîte de sélection
11. Enregistrer les articles
    1. Installer le package JS-Cookie
    2. Économisez et retreive les articles de chariot dans les cookies
12. Créer un formulaire de connexion
    1. Installer le formulaire React Hook
    2. Créer des boîtes d'entrée
    3. Ajouter le bouton de connexion
13. Connectez-vous à MongoDB
    1. Installer Mongoose
    2. Installez MongoDB ou utilisez MongoDB Atlas
    3. Enregistrer l'URL de connexion dans le fichier .env
    4. Créer un fichier DB Utils
    5. Créer des exemples d'utilisateurs
14. Créer une API de connexion
    1. Installez le prochain AUTH
    2. Créer NextAuth.js
    3. implémenter Signin
    4. Utilisez Signin sous forme de connexion
15. Ajouter le menu utilisateur
    1. Vérifier l'authentification des utilisateurs
    2. Installer Headlessui
    3. Afficher le menu des utilisateurs
16. Créer un écran d'expédition
    1. Champs d'adresse d'affichage
    2. Enregistrer l'adresse dans son contexte
17. Créer un écran de méthode de paiement
    1. Méthodes de paiement à la disparition
    2. Économiser le mode de paiement dans son contexte
18. Produits d'échantillon de semences
    1. Créer un modèle de produit à Mongoose
    2. Insérer des échantillons de produits à MongoDB
19. Produits de chargement mongodb
    1. Chargez des produits dans la page d'accueil de MongoDB
    2. Chargez des produits dans la page de produit de MongoDB
    3. Utilisez une API de produit pour vérifier le nombre en stock en ajout au panier
20. Créer un écran de commande de place
    1. Afficher l'adresse d'expédition
    2. Afficher le mode de paiement
    3. Afficher les éléments de commande
    4. IMPLACTION CRÉER ORDRE
21. Créer un écran de commande
    1. Implémentez l'API Backend pour les détails de la commande
    2. Données de chargement de l'ordre du backend
    3. Détails de la commande d'affichage
22. Créer un écran de registre
    1. Ajouter une API d'inscription
    2. Créer une page de registre
    3. Appelez API sur le formulaire Soumettre
23. Commande de paie par PayPal
    1. Ajouter le bouton PayPal
    2. gérer le paiement
    3. Créer une API backend
    4. mettre à jour l'état de commande
24. Créer un écran d'historique des commandes
    1. Créer mon API de commande
    2. Créer la composante de l'historique des commandes
    3. récupérer les commandes et les afficher
25. Publier sur Vercel
    1. Créer un compte Vercel
    2. Connectez-vous à GitHub
    3. Définissez le prochain Auth et MongoDB DB dans Env Vars
    4. Pousser le code vers GitHub
26. Mettre à jour le profil utilisateur
    1. Créer un écran de profil
    2. Afficher les informations utilisateur
    3. Gérer les informations de mise à jour de la mise à jour
27. Créer un tableau de bord administratif
    1. Créer un menu d'administration
    2. Créer un écran de tableau de bord
    3. Implémenter l'API Résumé de l'administration
28. Répertoriez les commandes pour l'administrateur
    1. Créer la page des commandes
    2. Créer des commandes API
    3. Utilisez l'API dans Page
29. Fixez la commande pour l'administrateur
    1. Créer une API DIVRIR
    2. Ajouter le bouton de livraison
    3. Implémenter le gestionnaire de clics
30. Listez des produits pour l'administrateur
    1. Page de création de produits
    2. Créer des produits API
    3. Utilisez l'API dans Page
31. Créer une page d'édition de produit
    1. Créer la page d'édition
    2. Créer une API pour le produit
    3. Afficher les données du produit sous forme
32. Télécharger l'image du produit
    1. Créer un compte cloudinary
    2. Obtenez des clés cloudinaires
    3. Créer une API Télécharger
    4. Télécharger des fichiers dans la page d'édition
33. Créer et supprimer des produits
    1. Ajouter le bouton Créer un produit
    2. Créer une nouvelle API de produit
    3. Ajouter le gestionnaire pour supprimer
    4. Implémenter la suppression de l'API
34. Répertoriez les utilisateurs pour l'administrateur
    1. Page Créer des utilisateurs
    2. Créer des utilisateurs API
    3. Utilisez l'API dans Page
35. Ajouter du carrousel
    1. Créer des produits en vedette
    2. Nourrir les données du carrousel
    3. Afficher les produits populaires
36. Créer une page de recherche
    1. créer des filtres
    2. lister les produits
    3. montrer les filtres