Fullstack JS - Développez un site eCommerce - React, Node, Express, MongoDB & Stripe
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
6h30
de formation
65
leçons vidéo
11
chapitres
Intermédiaire
niveau requis
Sandy Ludosky
Sandy Ludosky
Formatrice certifiée

Fullstack JS - Développez un site eCommerce - React, Node, Express, MongoDB & Stripe

4.8/5 Trustpilot (1397 avis) Satisfait ou remboursé
6h30
de formation
65
leçons vidéo
11
chapitres

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
NodeJS & Express : créer le serveur
Chapitre 3
[MongoDB Client] - Base de données et collection
Chapitre 4
[MongoDB Client] - connect application et API RESTful
Chapitre 5
[FRONT] - Listing Produits
Chapitre 6
[FRONT] - Cart - panier de produits
Chapitre 7
[FRONT] - Compte utilisateur

Table des matières

Chapitre 1 : Introduction

01m15
 
Leçon 1Introduction

Chapitre 2 : NodeJS & Express : créer le serveur

30m52
 
Leçon 1Projet démarrage & instructions
Leçon 2Touch server.js & yarn init
Leçon 3Yarn install - installer les dépendances
Leçon 4Les dépendances npm (ou yarn)
Leçon 5Express - Router
Leçon 6Nodemon server.js => Hello World

Chapitre 3 : [MongoDB Client] - Base de données et collection

21m08
 
Leçon 1Créer un cluster
Leçon 2Créer une base de données et collection
Leçon 3Database access user
Leçon 4MongoDB Compass
Leçon 5Products.json (sample data)
Leçon 6Conclusion

Chapitre 4 : [MongoDB Client] - connect application et API RESTful

37m46
 
Leçon 1Connect application
Leçon 2Récupérer des documents - db.collection.find()
Leçon 3InsertOne
Leçon 4Tester avec Postman 1/2
Leçon 5Tester avec Postman 2/2

Chapitre 5 : [FRONT] - Listing Produits

38m08
 
Leçon 1Projet demarrage
Leçon 2Listings Produits
Leçon 3Redux Dev Tools
Leçon 4Gallerie de produits
Leçon 5Pagination
Leçon 6Conclusion

Chapitre 6 : [FRONT] - Cart - panier de produits

46m10
 
Leçon 1Projet Démarrage
Leçon 2Axios- HTTP API
Leçon 3Collection produits
Leçon 4Ajouter produits au panier
Leçon 5Afficher détails panier
Leçon 6Afficher icône et badge
Leçon 7Price et quantity
Leçon 8Update Cart et Remove from cart

Chapitre 7 : [FRONT] - Compte utilisateur

30m37
 
Leçon 1Register - Compte utilisateur
Leçon 2Valeurs par défaut
Leçon 3Validation formulaire
Leçon 4Login - Authentification utilisateur

Chapitre 8 : Authentification Email/Password - Realm web SDK

1h02
 
Leçon 1Présentation & projet de démarrage
Leçon 2Create Realm Application
Leçon 3Fournisseur Email/Password
Leçon 4Installer Web SDK
Leçon 5Register - créer compte utilisateur
Leçon 6HandleUserRegistration
Leçon 7Utilisateur connecté
Leçon 8Realm Web SDK - handleUserLogout
Leçon 9Realm Web SDK - handleUserLogin
Leçon 10Realm Web SDK - handleAuthentication

Chapitre 9 : [MongoDB Client] - Ajouter profile utilisateur

32m41
 
Leçon 1Projet Démarrage
Leçon 2MongoDB - nouvelle collection 'users'
Leçon 3[backend] - route POST - ajouter document
Leçon 4Créer profile utilisateur
Leçon 5[client] - trouver profile utilisateur - getUser (axios)

Chapitre 10 : [FRONT] - Checkout et options de livraison

13m25
 
Leçon 1Composant Checkout
Leçon 2Call 2 Action

Chapitre 11 : STRIPE - Traitement des paiements en ligne

1h15
 
Leçon 1Créer un compte développeur Stripe
Leçon 2API Keys Test
Leçon 3Installer le serveur
Leçon 4Stripe - nouveau point de terminaison (checkout)
Leçon 5Variables d'environnement (dotenv)
Leçon 6[CLIENT] - Checkout & Client
Leçon 7[CLIENT] - Session ID
Leçon 8[CLIENT] - redirectToCheckout (server Stripe)
Leçon 9[CLIENT] - Traitement paiement avec VISA, MASTERCARD, AMEX
Leçon 10[CLIENT] - Frais de livraison
Leçon 11[CLIENT] - Transaction paiement & page succès
Leçon 12Fin & Derniers mots

Aperçus

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
58,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
6h30 de vidéo • 11 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ 27,91€ /mois
Le 1er mois, puis 34,90€ - sans engagement
Cette formation + 6 790 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Profiter de l'offre
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données