MERN eCommerce From Scratch
There are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized eCommerce / shopping cart application from scratch with the MERN stack with the following functionality...
More
Full featured shopping cart
Product reviews and ratings
Top products carousel
Product pagination
Product search feature
User profile with orders
Admin product management
Admin user management
Admin Order details page
Mark orders as delivered option
Checkout process (shipping, payment method, etc)
PayPal / credit card integration
Custom database seeder script
This is not a documentation-type course. This is a jump in and get your hands dirty course where by the end, you have an actual real-world project to use and put on your portfolio. You will learn the following by completing this course..
React with Functional Components & Hooks
React router
React-Bootstrap UI library
How to structure components
Component level state & props
Managing global state with Redux (Actions & Reducers)
Using Redux state in components (useDispatch & useSelector)
Creating an extensive back end with Express
Working with a MongoDB database and the Mongoose ODM
JWT authentication (JSON web tokens)
Creating custom authentication middleware
Custom error handler
Integrating the PayPal API
Environment variables
Project deployment
Much more!
Watch Online MERN eCommerce From Scratch
| # | Title | Duration |
|---|---|---|
| 1 | Welcome To The Course | 01:33 |
| 2 | ProShop Project Demo | 07:17 |
| 3 | Resources & Environment | 07:44 |
| 4 | React Setup & Git Initialize | 12:13 |
| 5 | React-Bootstrap Setup, Header & Footer Components | 14:40 |
| 6 | HomeScreen Product Listing | 10:32 |
| 7 | Rating Component | 13:46 |
| 8 | Implementing React Router | 07:35 |
| 9 | Product Details Screen | 11:23 |
| 10 | Front End / Back End Workflow & Explanation | 04:06 |
| 11 | Serving Products - Back End Routes | 07:19 |
| 12 | Fetching Products From React (useEffect) | 11:17 |
| 13 | Nodemon & Concurrently Setup | 05:31 |
| 14 | Environment Variables | 04:21 |
| 15 | ES Modules In Node.js | 04:26 |
| 16 | MongoDB Atlas & Compass Setup | 07:31 |
| 17 | Connecting To The Database | 05:16 |
| 18 | Adding Colors To The Console (Optional) | 03:11 |
| 19 | Modeling Our Data | 14:55 |
| 20 | Preparing Sample Data | 04:40 |
| 21 | Data Seeder Script | 10:31 |
| 22 | Fetching Products From The Database | 09:18 |
| 23 | Getting Started With Postman | 05:26 |
| 24 | Custom Error Handling | 10:37 |
| 25 | An Overview Of Redux | 05:21 |
| 26 | Create a Redux Store | 08:55 |
| 27 | Product List Reducer & Action | 13:54 |
| 28 | Bringing Redux State Into HomeScreen - useDispatch & useSelector | 08:51 |
| 29 | Message & Loader Components | 04:57 |
| 30 | Product Details Reducer & Action | 11:08 |
| 31 | Qty Select & Add To Cart Button | 10:09 |
| 32 | Cart Reducer & Add To Cart Action | 11:45 |
| 33 | Add To Cart Functionality | 09:47 |
| 34 | Cart Screen | 17:13 |
| 35 | Remove Items From Cart | 04:37 |
| 36 | Clean Up By Using Controllers | 05:30 |
| 37 | User Authentication Endpoint | 13:27 |
| 38 | Brief Explanation of JWT (JSON Web Tokens) | 03:57 |
| 39 | Generate a JSON Web Token | 04:58 |
| 40 | Custom Authentication Middleware | 16:21 |
| 41 | Saving The Token In Postman | 02:28 |
| 42 | User Registration & Password Encryption | 09:51 |
| 43 | User Login Reducer & Action | 10:36 |
| 44 | User Login Screen & Functionality | 16:56 |
| 45 | Show User In Navbar & Logout | 07:46 |
| 46 | User Register Reducer, Action & Screen | 11:39 |
| 47 | Update Profile Endpoint | 07:19 |
| 48 | Profile Screen & Get User Details | 16:51 |
| 49 | Update User Profile | 09:20 |
| 50 | Shipping Screen & Save Address | 14:49 |
| 51 | Checkout Steps Component | 05:21 |
| 52 | Payment Screen & Save Payment Method | 10:47 |
| 53 | Place Order Screen | 21:24 |
| 54 | Order Controller & Route | 06:02 |
| 55 | Create Order | 15:26 |
| 56 | Get Order by ID Endpoint | 05:25 |
| 57 | Order Details Reducer & Action | 04:21 |
| 58 | Order Screen | 12:15 |
| 59 | Update To Paid Endpoint | 04:41 |
| 60 | Order Pay Reducer & Action | 06:15 |
| 61 | Adding PayPal Payments | 19:48 |
| 62 | Show Orders On Profile | 18:04 |
| 63 | User Details & Orders Reset | 04:53 |
| 64 | Admin Middleware & Get Users Endpoint | 05:13 |
| 65 | Admin User List | 16:54 |
| 66 | Admin Screen Access Security | 05:30 |
| 67 | Admin User Delete | 11:44 |
| 68 | Get User By ID & Update User Endpoints | 08:07 |
| 69 | User Edit Screen & Get User Details | 10:12 |
| 70 | Update User Functionality | 10:09 |
| 71 | Admin Product List | 08:07 |
| 72 | Admin Delete Products | 13:42 |
| 73 | Create & Update Product Endpoints | 12:33 |
| 74 | Admin Create Product | 09:49 |
| 75 | Edit Product Screen | 11:26 |
| 76 | Admin Update Product | 09:09 |
| 77 | Image Upload Config & Endpoint | 13:11 |
| 78 | Front End Image Upload | 06:59 |
| 79 | Admin Order List | 13:38 |
| 80 | Mark Order As Delivered | 14:50 |
| 81 | Morgan & Create Review Endpoint | 12:01 |
| 82 | Front End Product Reviews | 22:48 |
| 83 | Product Search | 11:06 |
| 84 | Product Pagination | 24:48 |
| 85 | Top Products Carousel | 15:55 |
| 86 | Custom Page Titles & Meta | 10:05 |
| 87 | Prepare For Deployment | 06:24 |
| 88 | Deploy To Heroku | 17:10 |
Similar courses to MERN eCommerce From Scratch
React Hooks
Next.js & React with ChatGPT - Development Guide (2023)
MERN Stack From Scratch
React Node AWS - Build infinitely Scaling MERN Stack App
React and Laravel: Breaking a Monolith to Microservices
React: Flux Architecture (ES6)
Epic React (Epic React Pro)
