59,00

Tuto Fullstack JS - Développez un site eCommerce - React, Node, Express, MongoDB & Stripe avec JavaScript, React, Node.js

59,00

  • Une formation vidéo de 6h30m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Fullstack JS - Développez un site eCommerce - React, Node, Express, MongoDB & Stripe

ajouter ce cours aux favoris retirer ce cours des favoris

Dans ce cours en ligne dédié aux développeurs nous allons coder de A à Z un site ecommerce en utilisant une stack moderne : React, NodeJS, Express, Mongo DB et Stripe (pour la gestion des paiements). L'objectif de cette formation est de vous plonger dans un projet concret et de développer de nouvelles compétences.

Mesures de confinement et de distanciation sociale nous obligent à modifier les habitudes de consommation. Entreprises et commerces sont appelés aussi à adapter leurs conditions et modes de distribution. Sans pour autant cesser complètement ses activités, la solution devient 100% numérique. Le commerce en ligne est aujourd'hui un mode d'achat privilégié pour des millions d'utilisateurs, avec des millions de transactions effectuées chaque jour.
Pour un développeur il est donc intéressant de savoir développer ce type de boutique en ligne.

Ce que nous allons apprendre dans cette formation Fullstack JS : Développez un site ecommerce

L'objectif sera donc de réaliser un projet complet (que l'on appellera AZMarketplace) qui sera un site de ventes en ligne avec une solution de gestion des paiements (via le service Stripe).
 

Quelles Stack technique allez-vous aborder dans ce cours ?

Clairement du fullstack, c'est à dire que nous allons faire du développement front end et back end.
 

  • Côté Back-end :
    MongoDB : qui est une base de données de documents, qui stocke les données dans des documents de type JSON. Avec un langage de requête riche et expressif au format JSON, qui  permet de filtrer et de trier les résultats, MongoDB Atlas est le service de base de données multicloud pour MongoDB disponible sur AWS, Google Cloud Platform et Azure (Microsoft),
    NodeJS & Express : pour développer simplement et rapidement,
    Stripe : l'infrastructure de paiement pour les site de commerces en ligne pour gérer paiements en ligne, abonnements, facturations, annulations et remboursements. La documentation Développeurs permet une mise en place rapide pour commencer à accepter des paiements en ligne,
    Realm web SDK : pour le système d'authentification Email et Mot de passe.

 

  • Côté Front-end :
    React : bibliothèque JavaScript open-source développée par Facebook et utilisée par Netflix, Yahoo, Airbnb, Sony, Atlassian,
    Redux :  bibliothèque open-source JavaScript de gestion d'état pour applications web,
    Bootstrap (version 4.5.3) : librairie HTML, CSS & Javascript pour développer des interfaces visuelles riches, élégantes et responsives.

 

A qui s'adresse ce cours ?

  • Développeurs Front
  • Tous développeurs avec un niveau intermédiaire en Javascript, Node & ReactJS
  • Toutes personnes souhaitant développer une solution de commerce en ligne

Attention, ce cours est un niveau intermédiaire à avancé. Pour le suivre vous devez connaître les fondamentaux de Javascript, React et Redux, ainsi que le Comande Line Interface (CLI) - on utilisera iTerm et le terminal intégré de VSCode. Il est préférable mais pas obligatoire de connaître les ressources et classes prédéfinies de Bootstrap

Tous les fichiers de travail sont fournis !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Table des matières de cette formation JavaScript, React, Node.js (durée : 6h30m)

  • Introduction
    • Introduction gratuit 00:01:15
  • NodeJS & Express : créer le serveur
    • Projet démarrage & instructions 00:02:12
    • Touch server.js & yarn init 00:05:31
    • Yarn install - installer les dépendances 00:01:22
    • Les dépendances npm (ou yarn) 00:06:02
    • Express - Router 00:08:55
    • Nodemon server.js => Hello World 00:06:50
  • [MongoDB Client] - Base de données et collection
    • Créer un cluster 00:05:28
    • Créer une base de données et collection 00:06:11
    • Database access user 00:03:36
    • MongoDB Compass 00:03:46
    • Products.json (sample data) 00:01:21
    • Conclusion 00:00:46
  • [MongoDB Client] - connect application et API RESTful
    • Connect application 00:08:28
    • Récupérer des documents - db.collection.find() 00:11:42
    • InsertOne 00:04:21
    • Tester avec Postman 1/2 00:09:23
    • Tester avec Postman 2/2 00:03:52
  • [FRONT] - Listing Produits
    • Projet demarrage 00:10:38
    • Listings Produits gratuit 00:10:09
    • Redux Dev Tools 00:02:37
    • Gallerie de produits 00:08:06
    • Pagination 00:05:26
    • Conclusion 00:01:12
  • [FRONT] - Cart - panier de produits
    • Projet Démarrage 00:04:52
    • Axios- HTTP API 00:07:03
    • Collection produits 00:05:00
    • Ajouter produits au panier 00:07:15
    • Afficher détails panier 00:06:14
    • Afficher icône et badge 00:03:11
    • Price et quantity 00:04:18
    • Update Cart et Remove from cart 00:08:17
  • [FRONT] - Compte utilisateur
    • Register - Compte utilisateur 00:08:59
    • Valeurs par défaut 00:05:45
    • Validation formulaire 00:09:27
    • Login - Authentification utilisateur 00:06:26
  • Authentification Email/Password - Realm web SDK
    • Présentation & projet de démarrage 00:01:37
    • Create Realm Application 00:04:22
    • Fournisseur Email/Password 00:01:37
    • Installer Web SDK 00:04:04
    • Register - créer compte utilisateur 00:11:48
    • HandleUserRegistration 00:14:23
    • Utilisateur connecté 00:06:05
    • Realm Web SDK - handleUserLogout 00:04:35
    • Realm Web SDK - handleUserLogin 00:09:36
    • Realm Web SDK - handleAuthentication 00:04:49
  • [MongoDB Client] - Ajouter profile utilisateur
    • Projet Démarrage 00:02:36
    • MongoDB - nouvelle collection 'users' 00:01:11
    • [backend] - route POST - ajouter document 00:06:31
    • Créer profile utilisateur 00:09:34
    • [client] - trouver profile utilisateur - getUser (axios) 00:12:49
  • [FRONT] - Checkout et options de livraison
    • Composant Checkout 00:11:45
    • Call 2 Action 00:01:40
  • STRIPE - Traitement des paiements en ligne
    • Créer un compte développeur Stripe 00:00:38
    • API Keys Test 00:01:26
    • Installer le serveur 00:11:49
    • Stripe - nouveau point de terminaison (checkout) 00:03:32
    • Variables d'environnement (dotenv) 00:05:07
    • [CLIENT] - Checkout & Client 00:06:24
    • [CLIENT] - Session ID 00:03:37
    • [CLIENT] - redirectToCheckout (server Stripe) 00:06:40
    • [CLIENT] - Traitement paiement avec VISA, MASTERCARD, AMEX 00:10:02
    • [CLIENT] - Frais de livraison 00:05:55
    • [CLIENT] - Transaction paiement & page succès 00:08:18
    • Fin & Derniers mots 00:12:24



Formateur : Sandy Ludosky

Sandy Ludosky a publié 28 tutoriels et obtenu une note moyenne de 4,3/5 sur 3 362 tutoriels vendus. Sandy Ludosky est un formateur certifié tuto.com. Voir les autres formations de Sandy Ludosky

  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
Parcours Developpeur Front End
accédez à plus de 1303 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données