React Node FullStack - Ecommerce from Scratch to Deployment
Learn to Deploy your fully functioning Ecommerce app to production by using Digital Ocean cloud servers. Learn to add your own custom Domain name. Learn to use Cloudflare's CDN to supercharge the speed of your site and also use free SSL to secure your app.
More
Full Stack / MERN Stack (Mongo Express React Node) Powered Ecommerce App from Scratch to Deoplyment
As a Web Developer, I have always wanted to build an Ecommerce App.
I wanted to know how to implement Add to Cart, Payment Gateways, Order Management System and so much more...
And I know a lot of you out there want to experience building Ecommerce app. The experience is absolutely amazing and it gives you loads of must have knowledge and confidence to start off your next big project using React Node and MongoDB.
This course also uses latest React Hooks which is an absolute joy. Your code will be so much simplified and readable, you wont believe it.
Our Node API will follow MVC Pattern. The codebase will be so clean and elegant, you will be absolutely loving it.
You will also get introduced with Braintree (A PayPal Company) for handling Payments. Braintree is hands down the best payment gateway you could possibly use in a production site for both PayPal and Credit Card payments.
By the end of the course you will learn to deploy your fully functioning Ecommerce app to Digital Ocean cloud servers for production.
Not only that... you will also learn to add your own custom Domain, use Cloudflare's CDN to supercharge your app and free SSL to secure your app.
All this goodness for the price of lunch? YES! Thats right!
We are really living in an age of goodness. Aren't we?
OK. Enough said, I know you cant wait to get your hands on this course :)
By the way, you will never get stuck with this course because each lecture has the Source Code available. Really?
Here are some of the course highlights:
Search product
Search products based on particular category
New arrivals
Best sellers
Product image
Product information
Product in stock/out of stock
View product
Related product
Add to cart
Remove product
Adjust quantity
Signin to checkout
User dashboard
Admin dashboard
Private routes
Admin routes
Shopping cart
Checkout with credit card and paypal
Checkout with delivery address
Success message
Update profile
Advance search of products
Advance search based on category and price range
Load more products
Admin dashboard
Create category
Create product
View orders
Manage products update/delete
Role based access
and lots more...............
Let me welcome you in an Incredible Journey of Building a MERN Stack React, Node and MongoDB powered Ecommerce Application from the groud up. Let's do it. Let's code together.
- Basic Understanding JavaScript or any other programming language
- Basic Understanding of React Js
- Basic Understanding of Node Js
- A Web Developer looking to Build API with Node JS and MongoDB
- A Web Developer looking to Build Fast, Interactive and Scalable Web Applications using React JS
- A Web Developer looking to Build a FullStack Ecommerce Application using MERN Stack
What you'll learn:
- Learn Node JS API (Backend) Development
- Learn React JS (Frontend) Web Development
- Learn to Write Functional Components with React Hooks
- Learn the Fundamental Concepts of Building Ecommerce Application
- Learn to Implement Payment Gateway using Credit Card and PayPal
- Learn to Integrate Braintree (A PayPal Company) for Payment Processing
- Learn to Implement Advance Searching/Filtering based on Categories
- Learn to Implement Advance Searching/Filtering based on Price Range
- Learn to Implement Standard Products Search System with Categories option/dropdown
- Learn to Build Shopping Cart
- Learn to Implement Authentication based on JWT
- Learn to Build Scalable React App with Proper Layouts and Routes
- Learn to build Admin and User Dashboard
- Learn to Implement Flexible Private and Admin Routing System
- Learn advance CRUD with Products and Categories
- Learn to handle File Upload
- Learn to use LocalStorage (CRUD) to Minimize Requests to Backend
- Learn to Store Sold Products Record into the Database for Further Processing
- User Profile and Update Ability
- Learn to implement Order Management System by Admin
- Learn to Deploy your app to Digital Ocean's Cloud Servers
- Learn to add a Custom Domain name to your app
- Learn to use Cloudflare's CDN to serve your app (for speed)
- Learn to use Cloudflare's free SSL to secure your app
Watch Online React Node FullStack - Ecommerce from Scratch to Deployment
| # | Title | Duration |
|---|---|---|
| 1 | Course introduction | 02:00 |
| 2 | Are you ready for this course? | 04:16 |
| 3 | Course roadmap (optional) | 09:51 |
| 4 | Express server | 09:04 |
| 5 | Using MongoDB Atlas | 01:43 |
| 6 | Connecting to MongoDB | 03:22 |
| 7 | Routes | 04:46 |
| 8 | Controllers | 04:53 |
| 9 | User schema | 05:42 |
| 10 | Virtual fields and methods | 05:20 |
| 11 | User signup | 06:00 |
| 12 | Using Postman to signup user | 05:15 |
| 13 | Friendly error message | 04:44 |
| 14 | Using express validator | 09:17 |
| 15 | User signin using JWT | 10:08 |
| 16 | Using Postman to signin user | 04:13 |
| 17 | User signout | 02:03 |
| 18 | Require signin middleware | 03:17 |
| 19 | Renaming from user to auth | 02:40 |
| 20 | User by id middleware | 11:25 |
| 21 | Auth and admin middlewares | 07:50 |
| 22 | Category model route and controller | 06:08 |
| 23 | Creating category using postman | 04:49 |
| 24 | Product model | 06:18 |
| 25 | Create product with file upload | 09:26 |
| 26 | Creating product using postman | 07:00 |
| 27 | Create product validation | 06:13 |
| 28 | Product by id middleware and single product | 07:26 |
| 29 | Product delete | 06:37 |
| 30 | Product update | 07:10 |
| 31 | Category by id and single category | 05:10 |
| 32 | Category update delete and get all | 09:47 |
| 33 | Products by sell and arrival on request query params | 09:39 |
| 34 | Fetch products based on request query using postman | 05:15 |
| 35 | Related products | 07:32 |
| 36 | List product categories | 03:22 |
| 37 | List products by search | 07:33 |
| 38 | Send product photo | 03:46 |
| 39 | User profile read and update | 07:33 |
| 40 | Installing CORS | 01:49 |
| 41 | React hooks | 01:31 |
| 42 | Why we used class components? | 00:51 |
| 43 | Counter app using class | 05:45 |
| 44 | useState hook | 03:49 |
| 45 | useEffect hook | 06:01 |
| 46 | News app using hooks | 06:39 |
| 47 | Search news on input change | 05:56 |
| 48 | Controlling useEffect's behaviour | 04:44 |
| 49 | Loading | 03:11 |
| 50 | Code Organization | 04:24 |
| 51 | Create react app | 02:54 |
| 52 | Routing pages | 08:38 |
| 53 | Menu and active links | 09:28 |
| 54 | Shared layout component | 07:42 |
| 55 | Environment variables | 03:09 |
| 56 | Signup form handle change | 10:21 |
| 57 | User signup | 10:05 |
| 58 | User signup success and error | 09:17 |
| 59 | Code refactoring - Signup | 03:09 |
| 60 | User signin | 08:22 |
| 61 | Save user and token in local storage | 05:12 |
| 62 | User signout | 05:25 |
| 63 | Show and hide signin signout links conditionally | 06:22 |
| 64 | Private route for authenticated users only | 08:13 |
| 65 | User dashboard | 07:42 |
| 66 | Links on user dashboard | 05:14 |
| 67 | Admin dashboard | 02:59 |
| 68 | Private route for admin | 08:06 |
| 69 | Add category component | 10:27 |
| 70 | Category create success and error | 09:55 |
| 71 | Create product part one | 04:19 |
| 72 | Create product part two | 19:14 |
| 73 | Create product part three | 07:13 |
| 74 | Create product with categories | 13:13 |
| 75 | Products by arrival and sell | 10:05 |
| 76 | Show products in card | 07:38 |
| 77 | Show product image | 06:26 |
| 78 | Styling buttons and jumbotron | 04:34 |
| 79 | Shop page | 03:30 |
| 80 | Get categories in shop page | 03:10 |
| 81 | Show categories in shop sidebar | 05:27 |
| 82 | Handle categories toggle | 07:34 |
| 83 | Passing categories filter to parent component | 04:30 |
| 84 | Set filters with category | 04:49 |
| 85 | Fixed price range | 04:42 |
| 86 | Radio buttons for price range | 07:25 |
| 87 | Filter with price range | 07:04 |
| 88 | Show products by filter on shop page | 11:24 |
| 89 | Pass products to card component | 05:03 |
| 90 | Load more button | 06:24 |
| 91 | Search component | 06:12 |
| 92 | Search form | 09:11 |
| 93 | Implementing search | 09:55 |
| 94 | Backend implementation of search | 11:38 |
| 95 | Search message to users | 04:57 |
| 96 | Single product component | 09:08 |
| 97 | Reuse card for single product | 10:23 |
| 98 | Product detail on single product page | 10:09 |
| 99 | Show related products | 09:01 |
| 100 | Add to cart | 13:25 |
| 101 | Cart items total in menu | 05:06 |
| 102 | Show products in cart page | 10:01 |
| 103 | Conditionally show hide add to cart | 02:57 |
| 104 | Product quantity update in cart | 11:45 |
| 105 | Remove product from cart | 07:14 |
| 106 | Cart total | 09:10 |
| 107 | Braintree as payment gateway | 03:40 |
| 108 | Signup to braintree | 04:00 |
| 109 | Braintree setup backend | 09:56 |
| 110 | Braintree setup frontend | 12:36 |
| 111 | Handling payment frontend | 08:17 |
| 112 | Processing payment backend | 03:45 |
| 113 | Successful transaction | 10:38 |
| 114 | Empty cart after successful purchase | 03:19 |
| 115 | Activate paypal payment | 05:44 |
| 116 | Steps to create paypal sandbox account | 05:37 |
| 117 | Order routes and controller setup - Backend | 03:28 |
| 118 | Create order - Frontend | 06:37 |
| 119 | Save orders in the database | 11:14 |
| 120 | Save delivery address of orders | 02:15 |
| 121 | Push orders to user's purchase history | 07:33 |
| 122 | Update sold products quantity | 06:56 |
| 123 | List all orders for admin | 03:48 |
| 124 | Fetch all orders for admin | 07:43 |
| 125 | Loop through orders | 08:55 |
| 126 | Show product details of each order | 05:20 |
| 127 | enum status values of each order | 10:17 |
| 128 | Find order by id and update order status | 06:20 |
| 129 | Update order status by admin | 04:32 |
| 130 | User profile update methods | 09:41 |
| 131 | Get user info for profile update | 08:24 |
| 132 | User profile update | 10:43 |
| 133 | User purchase history - Backend | 03:13 |
| 134 | User purchase history - Frontend | 11:13 |
| 135 | Manage products for admin | 03:54 |
| 136 | Product CRUD requests | 05:58 |
| 137 | Products list and delete single product | 09:44 |
| 138 | Get all products for admin CRUD | 03:44 |
| 139 | Product Update | 15:57 |
| 140 | Deploy to Digital Ocean Part 1 | 07:21 |
| 141 | Deploy to Digital Ocean Part 2 | 12:09 |
| 142 | Update user role to Admin in production | 01:58 |
| 143 | Fully functioning Ecommerce app in production | 03:04 |
| 144 | Adding a Domain name | 03:03 |
| 145 | Using Cloudflare's CDN and free SSL for our app | 02:49 |
Similar courses to React Node FullStack - Ecommerce from Scratch to Deployment
Node with React: Fullstack Web Development
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
React and WebRTC 2023 & Sharing Location App with Video Chat
Complete guide to building an app with .Net Core and React
React Query: Server State Management in React
Microservices with Node JS and React
Complete DApp - Solidity & React - Blockchain Development
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
