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

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

Sandy Ludosky
59,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

Chapitre 1 : Introduction
01m15s
 
Leçon 1Introduction
Chapitre 2 : NodeJS & Express : créer le serveur
30m52s
 
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
21m08s
 
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
37m46s
 
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
38m08s
 
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
46m10s
 
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
30m37s
 
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
1h02m
 
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
32m41s
 
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
13m25s
 
Leçon 1Composant Checkout
Leçon 2Call 2 Action
Chapitre 11 : STRIPE - Traitement des paiements en ligne
1h15m
 
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

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données