Build A Production-Ready Kanban Board: Mern, Sso & Azure

Master the MERN Stack by Building & Deploying a Real-World Kanban Board with Google SSO and Azure Cloud Hosting

What you'll learn

Build a complete Kanban Board app using the MERN stack (MongoDB, Express, React, Node.js)

Integrate Google Single Sign-On (SSO) with OAuth 2.0 for real-world login functionality

Use React Hooks and Redux to manage UI state and handle complex workflows

Create secure REST APIs with Express.js and connect them to a cloud-hosted MongoDB

Deploy your app to Microsoft Azure using modern DevOps tools and best practices

Learn production-grade architecture, folder structures, and reusable code patterns

Handle user authentication, session storage, and access control

Understand frontend-to-backend communication using Axios and JWT

Become job-ready by shipping a project you can actually showcase in your portfolio

Requirements

Basic knowledge of JavaScript, HTML, and CSS

Some familiarity with React and Node is helpful (but not required)

A willingness to build, debug, and deploy like a real dev

Description

Stop learning in theory. Start building like a real software engineer.This is not another “todo app” tutorial.This is your gateway to mastering the Full Stack MERN ecosystem (MongoDB, Express, React, Node.js) by building something real, practical, and portfolio-worthy—a production-ready Kanban Board like the ones used in companies like Trello, Jira, and Asana.But we’re not stopping at “hello world.”In this course, you’ll:Build a complete frontend UI using React with hooks and modern component architecture.Create powerful REST APIs with Express and connect to a scalable MongoDB database.Add Google Single Sign-On (SSO) using OAuth 2.0 to give your users real-world login flows.Manage state, side effects, and error handling like a pro using Redux and Axios.Deploy your full stack app to Microsoft Azure Cloud, mastering deployment pipelines and hosting.Write production-grade, modular code that scales and mimics what real tech teams ship.Whether you’re aiming to get hired, build your portfolio, or start your freelance journey, this course gives you the complete roadmap to go from “wannabe” to “hireable full stack developer.”You’ll walk away with a deployable app, cloud experience, real-world authentication, and the confidence to take on any project.No fluff. No filler. Just skills that sell in today’s job market.Let’s build something real. Let’s make it count.

Overview

Section 1: WHY CORE JAVASCRIPT BEFORE REACT?

Lecture 1 WHY MASTERING SPAs WITH VANILLA JS IS SO IMPORTANT!

Lecture 2 HOW TO LEARN TO BUILD SPAs WITH VANILLA JS?

Section 2: BUILD OUR FIRST MVP

Lecture 3 S3.E02 - CREATE OUR REACT PROJECT (PART I)

Lecture 4 S3.E01 - IS THIS YOUR FIRST REACT SPA? START HERE!

Lecture 5 S3.E03 - CREATE OUR REACT PROJECT (PART II)

Lecture 6 S3.E04 - WHAT IS JSX?

Lecture 7 S3.E05 - LET'S CREATE A COMPONENT

Lecture 8 S3.E06 - REACT COMPONENTS

Lecture 9 S3.E07 - DISPLAY DYNAMIC DATA IN COMPONENTS

Lecture 10 S3.E08 - STYLING IN JSX

Lecture 11 S3.E09 - CONDITIONAL LOGIC IN JSX

Lecture 12 S3.E10 - QUICK INTRO TO MATERIAL UI (PART I)

Lecture 13 S3.E11 - QUICK INTRO TO MATERIAL UI (PART II)

Lecture 14 S3.E12 - LISTS IN REACT

Lecture 15 S3.E13 - PROPS IN REACT

Lecture 16 S3.E14 - STATE IN REACT (PART I)

Lecture 17 S3.E15 - STATE IN REACT (PART II)

Section 3: MATERIAL UI FRONT-END

Lecture 18 S3.E16 - CREATE REACT PROJECT

Lecture 19 S3.E17 - LET'S GET ALL OF OUR DEPENDENCIES

Lecture 20 S3.E18 - LET'S CREATE OUR LANDING PAGE COMPONENT (PART I)

Lecture 21 S3.E19 - LET'S CREATE OUR LANDING PAGE COMPONENT (PART II)

Lecture 22 S3.E20 - CREATE OUR ROUTING LAYER (PART I)

Lecture 23 S3.E21 - CREATE OUR ROUTING LAYER (PART II)

Lecture 24 S3.E22 - CREATE OUR ROUTING LAYER (PART III)

Lecture 25 S3.E23 - BUILD OUR LANDING PAGE - MUI (PART I)

Lecture 26 S3.E24 - BUILD OUR LANDING PAGE - MUI (PART I - CONTINUED)

Lecture 27 S3.E25 - BUILD OUR LANDING PAGE - MUI (PART II)

Lecture 28 S3.E26 - BUILD OUR LANDING PAGE - MUI (PART II - CONTINUED)

Lecture 29 S3.E27 - BUILD OUR LANDING PAGE - MUI (PART III)

Lecture 30 S3.E28 - BUILD OUR LANDING PAGE - MUI (PART III - CONTINUED)

Lecture 31 S3.E29 - BUILD OUR REGISTRATION PAGE - MUI (PART I)

Lecture 32 S3.E30 - BUILD OUR REGISTRATION PAGE - MUI (PART I - CONTINUED)

Lecture 33 S3.E31 - BUILD OUR REGISTRATION PAGE - MUI (PART II)

Lecture 34 S3.E32 - BUILD OUR REGISTRATION PAGE - MUI (PART III)

Lecture 35 S3.E33 - BUILD OUR REGISTRATION PAGE - MUI (PART III - CONTINUED)

Lecture 36 S3.E34 - BUILD OUR LOGIN PAGE - MUI (PART I)

Lecture 37 S3.E35 - BUILD OUR LOGIN PAGE - MUI (PART II)

Lecture 38 S3.E36 - BUILD OUR LOGIN PAGE - MUI (PART III)

Section 4: NODE JS BACK-END SETUP

Lecture 39 S3.E37 - INITIALIZE THE PROJECT & INSTALL DEPENDENCIES

Lecture 40 S3.E38 - WHAT DID WE LEARN FROM OUR PROTOTYPE? (ENVIRONMENT VARIABLES)

Lecture 41 S3.E39 - PROTOTYPE LESSONS LEARNED: SERVER RESPONSE (PART I)

Lecture 42 S3.E40 - PROTOTYPE LESSONS LEARNED: SERVER RESPONSE (PART II)

Lecture 43 S3.E41 - PROTOTYPE LESSONS LEARNED: SERVER RESPONSE (PART III)

Lecture 44 S3.E42 - CONNECT TO OUR MONGO DB

Section 5: DATA MODELING

Lecture 45 S3.E43 - DATA MODELING

Lecture 46 S3.E44 - USER MODEL

Lecture 47 S3.E45 - PROJECT MODEL

Lecture 48 S3.E46 - BOARD SCHEMA

Lecture 49 S3.E47 - COLUMN SCHEMA

Lecture 50 S3.E48 - TASK MODEL

Section 6: MERN - FLOW #1: USER REGISTRATION

Lecture 51 S3.E49 - PREP OUR ENTRY POINT

Lecture 52 S3.E50 - CONTROLLER AND SERVICE LAYER

Lecture 53 S3.E51 - CREATE REPOSITORY LAYER

Lecture 54 S3.E52 - IMPLEMENT BUSINESS RULES - UNIQUE USERS

Lecture 55 S3.E53 - IMPLEMENT BUSINESS RULES - PASSWORD ENCRYPTED

Lecture 56 S3.E54 - IMPLEMENT API FIELD VALIDATION

Lecture 57 S3.E55 - CONFIGURE AXIOS

Lecture 58 S3.E56 - CONFIGURE FRONT-END authService

Lecture 59 S3.E57 - FRONT-END VALIDATION (PART I)

Lecture 60 S3.E58 - FRONT-END VALIDATION (PART II)

Lecture 61 S3.E59 - SUBMIT A VALID USER TO THE BACK-END

Lecture 62 S3.E60 - SET UP TO RECEIVE ERRORS FROM THE BACK-END

Section 7: MERN - FLOW #2: STANDARD LOGIN

Lecture 63 S3.E61 - ROUTE SET UP

Lecture 64 S3.E62 - IMPLEMENT BUSINESS RULES - CHECK CREDENTIALS

Lecture 65 S3.E63 - IMPLEMENT BUSINESS RULES - GENERATE TOKEN (PART I)

Lecture 66 S3.E64 - IMPLEMENT BUSINESS RULES - GENERATE TOKEN (PART II)

Lecture 67 S3.E65 - IMPLEMENT BUSINESS RULES - GENERATE COOKIE

Lecture 68 S3.E66 - PRIVATE ROUTE - GET ALL PROJECTS

Lecture 69 S3.E67 - MIDDLEWARE FOR AUTHENTICATION CHECK

Lecture 70 S3.E68 - BUILD OUR PROJECT DASHBOARD - MUI (PART I)

Lecture 71 S3.E69 - BUILD OUR PROJECT DASHBOARD - MUI (PART II)

Lecture 72 S3.E70 - BUILD OUR PROJECT DASHBOARD - MUI (PART III)

Lecture 73 S3.E71 - BUILD OUR PROJECT DASHBOARD - MUI (PART III - CONTINUED)

Lecture 74 S3.E72 - BUILD OUR PROJECT DASHBOARD - MUI (PART III - CONTINUED AGAIN)

Lecture 75 S3.E73 - STORE CONFIGURATION - AUTH SLICE

Lecture 76 S3.E74 - STORE CONFIGURATION - PROVIDER

Lecture 77 S3.E75 - SET axiosConfig & UPDATE BACK-END CORS

Lecture 78 S3.E76 - SET API CALL TO BACK-END

Lecture 79 S3.E77 - PRIVATE & PUBLIC ROUTE CONFIGURATION

Section 8: MERN - FLOW #3: DISPLAY PROJECT DASHBOARD

Lecture 80 S3.E78 - PROJECT BOARD MUI

Lecture 81 S3.E79 - IMPLEMENT PROJECT FORM (PART I)

Lecture 82 S3.E80 - IMPLEMENT PROJECT FORM (PART II)

Lecture 83 S3.E81 - IMPLEMENT PROJECT TABLE (PART I)

Lecture 84 S3.E82 - IMPLEMENT PROJECT TABLE (PART II)

Lecture 85 S3.E83 - IMPLEMENT PROJECT TABLE (PART III)

Lecture 86 S3.E84 - SIDE BAR (PART I)

Lecture 87 S3.E85 - SIDE BAR (PART II)

Lecture 88 S3.E86 - SIDE BAR (PART III)

Section 9: MERN - FLOW #4: CRUD PROJECTS

Lecture 89 S3.E87 - PROJECT ROUTE SET UP

Lecture 90 S3.E88 - IMPLEMENT REPOSITORY LAYER

Lecture 91 S3.E89 - IMPLEMENT SERVICE LAYER

Lecture 92 S3.E90 - IMPLEMENT projectService & FORM VALIDATION

Lecture 93 S3.E91 - SUBMIT THE FORM TO THE BACK-END

Lecture 94 S3.E92 - INTERCEPTOR

Lecture 95 S3.E93 - IMPLEMENT REPOSITORY AND SERVICE LAYERS

Lecture 96 S3.E94 - IMPLEMENT PROJECT SLICE (PART I)

Lecture 97 S3.E95 - IMPLEMENT PROJECT SLICE (PART II)

Lecture 98 S3.E96 - DISPLAY PROJECT LIST

Lecture 99 S3.E97 - UPDATE onSubmitProject FUNCTION (projectForm.jsx)

Lecture 100 S3.E98 - SET UP AND TEST DELETE END POINT

Lecture 101 S3.E99 - ENABLE PROJECT MENU

Lecture 102 S3.E100 - DELETE CONFIRMATION DIALOG (PART I)

Lecture 103 S3.E101 - DELETE CONFIRMATION DIALOG (PART II)

Lecture 104 S3.E102 - ENABLE THE DELETE OPERATION

Lecture 105 S3.E103 - UPDATE OUR PROJECT-REPOSITORY

Lecture 106 S3.E104 - IMPLEMENT SERVICE LAYER TO UPDATE

Lecture 107 S3.E105 - WRAP UP END POINT & TEST

Lecture 108 S3.E106 - UPDATE projectService AND projectSlice

Lecture 109 S3.E107 - SET PROJECT TO BE UPDATED TO THE STATE

Lecture 110 S3.E108 - LOAD THE MODAL FORM

Lecture 111 S3.E109 - SUBMIT THE UPDATE PROJECT

Section 10: MERN - FLOW #5: PROJECT BOARD

Lecture 112 S3.E110 - TaskBoard COMPONENT

Lecture 113 S3.E111 - TASK BOARD MUI (PART I)

Lecture 114 S3.E112 - TASK BOARD MUI (PART II)

Lecture 115 S3.E113 - TASK BOARD MUI (PART III)

Lecture 116 S3.E114 - CUSTOM MODAL (PART I)

Lecture 117 S3.E115 - CUSTOM MODAL (PART II)

Lecture 118 S3.E116 - CUSTOM MODAL (PART III)

Section 11: MERN - FLOW #6: CRUD TASKS

Lecture 119 S3.E117 - TASK ROUTE SET UP

Lecture 120 S3.E118 - VALIDATION

Lecture 121 S3.E119 - CONTROLLER & SERVICE LAYERS

Lecture 122 S3.E120 - TASK REPOSITORY (PART I)

Lecture 123 S3.E121 - TASK REPOSITORY (PART II)

Lecture 124 S3.E122 - taskBoardService & FE VALIDATION

Lecture 125 S3.E123 - SUBMIT TO BACK-END

Lecture 126 S3.E124 - SET UP REPOSITORY, ROUTE, AND CONTROLLER

Lecture 127 S3.E125 - SERVICE LAYER

Lecture 128 S3.E126 - UPDATE THE SERVICE LAYER

Lecture 129 S3.E127 - ANALYZE API DATA

Lecture 130 S3.E128 - TASK BOARD SECTION (PART I)

Lecture 131 S3.E129 - TASK BOARD SECTION (PART II)

Lecture 132 S3.E130 - DISPLAY TASK CARDS (PART I)

Lecture 133 S3.E131 - DISPLAY TASK CARDS (PART II)

Lecture 134 S3.E132 - REFRESH TASK LIST AFTER TASK CREATION

Lecture 135 S3.E133 - TASK MENU (PART I)

Lecture 136 S3.E134 - TASK MENU (PART II)

Lecture 137 S3.E135 - CREATE ROUTE, CONTROLLER, AND SERVICE

Lecture 138 S3.E136 - DELETE LOGIC - TASK SERVICE

Lecture 139 S3.E137 - OPEN AND CLOSE DELETE DIALOG

Lecture 140 S3.E138 - COMPLETE DIALOG

Lecture 141 S3.E139 - CONFIRM DELETE

Lecture 142 S3.E140 - UPDATE ROUTE, CONTROLLER, AND SERVICE

Lecture 143 S3.E141 - UPDATE LOGIC - TASK SERVICE (PART I)

Lecture 144 S3.E142 - UPDATE LOGIC - TASK SERVICE (PART II)

Lecture 145 S3.E143 - OPEN AND CLOSE THE VIEW MODAL

Lecture 146 S3.E144 - MODAL FORM

Lecture 147 S3.E145 - SUBMIT UPDATE MODAL

Section 12: MERN - FLOW #7: DRAG 'N' DROP

Lecture 148 S3.E146 - DragDropContext & DROPPABLE AREA

Lecture 149 S3.E147 - DRAGGABLE ITEMS

Lecture 150 S3.E148 - DRAG 'N' DROP LOGIC (PART I)

Lecture 151 S3.E149 - DRAG 'N' DROP LOGIC (PART II)

Lecture 152 S3.E150 - DRAG 'N' DROP LOGIC (PART III)

Lecture 153 S3.E151 - DRAG 'N' DROP LOGIC (PART III - CONTINUED)

Lecture 154 S3.E152 - WHAT DO WE SUBMIT TO THE BACK-END?

Lecture 155 S3.E153 - BACK-END CALL

Lecture 156 S3.E154 - SET UP BASIC END POINT

Lecture 157 S3.E155 - BUSINESS LOGIC

Section 13: MERN - FLOW #8: SINGLE SIGN ON (SSO)

Lecture 158 S3.E156 - WHAT IS SINGLE SIGN ON (SSO)?

Lecture 159 S3.E157 - CREATE GOOGLE ACCOUNT

Lecture 160 S3.E158 - UPDATE .env

Lecture 161 S3.E159 - PASSPORT config

Lecture 162 S3.E160 - STORE USER

Lecture 163 S3.E161 - useGoogleAuth CUSTOM HOOK

Lecture 164 S3.E162 - SSO - register.jsx

Lecture 165 S3.E163 - SSO - login.jsx

Section 14: MERN CLOUD DEPLOYMENT

Lecture 166 IMPORTANT: ABOUT AZURE CLOUD USAGE

Lecture 167 INTRODUCTION TO AZURE CLOUD

Lecture 168 S3.E164 - BACK-END DEPLOYMENT

Lecture 169 S3.E165 - BACK-END TEST WITH LOCAL FRONT-END

Lecture 170 S3.E166 - FRONT-END DEPLOYMENT PREP

Lecture 171 S3.E167 - FRONT-END DEPLOYMENT & SSO CONFIGURATION

Section 15: APPENDIX: EPISODE ARTICLES

Lecture 172 E.01

Lecture 173 E.02 & E.03

Lecture 174 E.04

Lecture 175 E.05

Lecture 176 E.06

Lecture 177 E.07

Lecture 178 E.08

Lecture 179 E.09

Lecture 180 E.10 & E.11

Lecture 181 E.12

Lecture 182 E.13

Lecture 183 E.14 & E.15

Lecture 184 E.16

Lecture 185 E.17

Lecture 186 E.18 & E.19

Lecture 187 E.20, E.21, & E.22

Lecture 188 E.23 & E.24

Lecture 189 E.25 & E.26

Lecture 190 E.27 & E.28

Lecture 191 E.29 & E.30

Lecture 192 E.31

Lecture 193 E.32 & E.33

Lecture 194 E.34

Lecture 195 E.35

Lecture 196 E.36

Lecture 197 E.37

Lecture 198 E.38

Lecture 199 E.39

Lecture 200 E.40

Lecture 201 E.41

Lecture 202 E.42

Lecture 203 E.43

Lecture 204 E.44

Lecture 205 E.45

Lecture 206 E.46

Lecture 207 E.47

Lecture 208 E.48

Lecture 209 E.49

Lecture 210 E.50

Lecture 211 E.51

Lecture 212 E.52

Lecture 213 E.53

Lecture 214 E.54

Lecture 215 E.55

Lecture 216 E.56

Lecture 217 E.57

Lecture 218 E.58

Lecture 219 E.59

Lecture 220 E.60

Lecture 221 E.61

Lecture 222 E.62

Lecture 223 E.63 & E.64

Lecture 224 E.65

Lecture 225 E.66

Lecture 226 E.67

Lecture 227 E.68

Lecture 228 E.69

Lecture 229 E.70, E.71, & E.72

Lecture 230 E.73

Lecture 231 E.74

Lecture 232 E.75

Lecture 233 E.76

Lecture 234 E.77

Lecture 235 E.78

Lecture 236 E.79

Lecture 237 E.80

Lecture 238 E.81

Lecture 239 E.82

Lecture 240 E.83

Lecture 241 E.84

Lecture 242 E.85

Lecture 243 E.86

Lecture 244 E.87

Lecture 245 E.88

Lecture 246 E.89

Lecture 247 E.90

Lecture 248 E.91

Lecture 249 E.92

Lecture 250 E.93

Lecture 251 E.94

Lecture 252 E.95

Lecture 253 E.96

Lecture 254 E.97

Lecture 255 E.98

Lecture 256 E.99

Lecture 257 E.100

Lecture 258 E.101

Lecture 259 E.102

Lecture 260 E.103

Lecture 261 E.104

Lecture 262 E.105

Lecture 263 E.106

Lecture 264 E.107

Lecture 265 E.108

Lecture 266 E.109

Lecture 267 E.110

Lecture 268 E.111

Lecture 269 E.112

Lecture 270 E.113

Lecture 271 E.114

Lecture 272 E.115

Lecture 273 E.116

Lecture 274 E.117

Lecture 275 E.118

Lecture 276 E.119

Lecture 277 E.120 & E.121

Lecture 278 E.122

Lecture 279 E.123

Lecture 280 E.124

Lecture 281 E.125

Lecture 282 E.126

Lecture 283 E.127

Lecture 284 E.128 & E.129

Lecture 285 E.130

Lecture 286 E.131

Lecture 287 E.132

Lecture 288 E.133

Lecture 289 E.134

Lecture 290 E.135

Lecture 291 E.136

Lecture 292 E.137

Lecture 293 E.138

Lecture 294 E.139

Lecture 295 E.140

Lecture 296 E.141

Lecture 297 E.142

Lecture 298 E.143

Lecture 299 E.144

Lecture 300 E.145

Lecture 301 E.146

Lecture 302 E.147

Lecture 303 E.148

Lecture 304 E.149

Lecture 305 E.150 & E.151

Lecture 306 E.152

Lecture 307 E.153

Lecture 308 E.154

Lecture 309 E.155

Lecture 310 E.156

Lecture 311 E.157

Lecture 312 E.158

Lecture 313 E.159

Lecture 314 E.160

Lecture 315 E.161

Lecture 316 E.162

Lecture 317 E.163

Aspiring developers who want a job-ready MERN project in their portfolio,React or Node developers who want to master full stack app building,Beginners who are tired of “todo list” apps and want to build real software,Freelancers and career-switchers aiming to impress clients or hiring managers,Developers who want to learn Google SSO and Azure deployment,Udemy students who want to finally feel like a real software engineer