DEV Community

Foyzul Karim
Foyzul Karim

Posted on • Updated on

Learn MERN like a pro

This is the high level plan for my upcoming udemy free youtube course.

YouTube playlist

Google slide

Facebook

Individual lectures

Lecture 1 : Introduction of this course

JavaScript refresher

Lecture 2 : Programming language

Lecture 3 : History of JavaScript and why should we care

Lecture 4 : Working with JavaScript

Lecture 5 : What are Data Types and How can we use JavaScript types

Lecture 6 : JavaScript Object Notation (JSON)

Lecture 7 : JavaScript Loops

Lecture 8 : Functions (Declaration and execution)

Lecture 9 : Functions (Scopes and Parameters)

Lecture 10 : Array and Array functions

Lecture 11 : JavaScript this

Lecture 12 : Thread, process and operating system

Lecture 13 : Callback, sync, async and Promise

Lecture 14 : asynchronous execution walkthrough with settimeout()

Lecture 15 : sync execution in online editor stackblitz

Lecture 16 : sync execution in visual studio code and browser

Lecture 17: async code execution walkthrough in visual studio code

Lecture 18 : async promise code walkthrough in visual studio code

Lecture 19 : Promise resolve reject then states hands on practices

Lecture 20 : async await promise and executing from top level code

Lecture 21 : async for await promise all and return from then

Lecture 22 : Practice 01 - input via prompt and sum using reduce()

Lecture 23 : Practice 02 - working with JSON array and assignment

Lecture 24 Node-01: Why we needed nodejs and how it solved problems

Lecture 25 Node 02 : Basic components of nodejs runtime

Lecture 26 Node 03 : Diving into rabbit hole for setTimeOut code

Lecture 27 Node 04 : How node.js server event loop works internally

Lecture 28 Node 05 : How to install and verify nodejs installation

Lecture 29 Node 06 : Hello world app

Lecture 30 Node 07 : What is Node package manager (NPM) and NPM CLI

Lecture 31 Node 08: Working with builtin console and crypto modules

Lecture 32 Node 09: Working with external npm package - lodash

Lecture 33 Node 10: Working with builtin modules - OS and Events

Lecture 34 Node 11: Working with builtin File Systems and Promises

[More will be added here]

Server

Node

  • History about why we needed node
  • What is node (architecture)
  • Installation and verify
  • Manage versions
  • Hello world
  • Whatโ€™s happening

Node package manager

  • What and why
  • Dissecting package.json
  • Going into node_modules
  • Working with npm packages

Node built-in modules

  • os
  • events
  • fs
  • stream
  • http

Server frameworks

  • Comparison between server frameworks
  • Hello world - Express
  • Hello world - Koa
  • Hello world - Fastify

HTTP

  • OSI Model
  • How Internet works
  • HTTP messages
  • HTTP Request Types / VERBS
  • HTTP Clients (Postman, Insomnia, VSCode, Terminal)
  • HTTP Get
  • HTTP Post
  • HTTP Put
  • HTTP Delete
  • HTTPS

MongoDB

  • RDBMS vs NOSQL
  • Why MongoDB
  • How it works
  • Install
  • Working with Database
  • Working with Collection
  • Working with Schema
  • Working with Index
  • CRUD from mongo shell
  • MongoDB Atlas

Express API CRUD

  • Setup Express application
  • Setup routes
  • Perform CRUD using POSTMAN
  • Create model
  • Create service
  • Use validation

Testing

  • Unit test
  • Integration test

Client

Client side JavaScript

  • How browsers work
  • DOM rendering
  • Console, Network, Application tabs
  • Libraries and Frameworks

React

  • Why we needed react
  • What is React
  • How react works
  • Thinking in react

Create react app

  • Hello world
  • Whatโ€™s happening in here
  • Create a calculator

Working with data

  • Local state
  • Passing data via props

React concepts

  • hooks
  • context
  • refs
  • custom hooks

React router dom

  • Create routes and pages
  • Create menu and page containers
  • Hooks
  • Router
  • Link

Form and List

  • Create a form from scratch
  • Create form using react-hook-form
  • Create a list page from scratch
  • Save data to server
  • Search data ono list page
  • Edit data

Testing

  • Snapshot testing
  • Storybook testing
  • Unit testing (Jest)

MUI

  • Material UI
  • Create pages
  • Use templates

Real project: Inventory system

Project management

  • Requirement analysis
  • Architecture analysis
  • Project breakdown
  • Release plan

Phase 1: Architecture and User management

Architecture

  • Create base architecture
  • Create auth codes properly
  • Add seed data
  • Modular architecture

Authentication

  • JWT token
  • Authentication in server
  • Authenticationin client
  • Add signin signout feature

Authorization

  • add middleware in server
  • add authorization mechanism in client

Phase 2: Feature implementation

Modules

  • Product
  • Customer
  • Order

Reporting

  • add recharts
  • add cron
  • design dashboard

Deployment

  • aspects of deployment
  • deploy to virtual machine
  • deploy to digital ocean apps
  • Cloud deployment (theory only)

Conclusion

  • What you should do next
  • Connect with me

Whole playlist

Playlist

https://dev.to/foyzulkarim/learn-mern-like-a-pro-4hf

favicon youtube.com

Discussion (35)

Collapse
faridulhassan profile image
Faridul Hassan

Thank you @Foyzul Karim bhai.

Collapse
safin777 profile image
Safin,Sayed Islam

Waiting for this course..already did a lot practice on js and trying to learn the core concept of node environment..Hope we will get your udemy course soon..Best of luck vayya.๐Ÿ–ค

Collapse
andrewbaisden profile image
Andrew Baisden

Deep topic.

Collapse
mahmudulhasan1773 profile image
mahmudulhasan1773

thanks

Collapse
codingjlu profile image
codingjlu

Why do we need to learn Koa or Fastify if this stack involves Express?

Collapse
foyzulkarim profile image
Foyzul Karim Author

That lesson is meant to teach how simple is to work with other frameworks if you know express.
And lesson is a hello world lesson.
I hope you get your answer

Collapse
omarfarukesham profile image
Omar Faruk

Great Guide line, thanks

Collapse
hnazmul profile image
H.Nazmul Hassan

Thanks you so much ๐Ÿฅฐ๐Ÿ’–

Collapse
shibbirahmad profile image
Shibbir Ahmad

thanks

Collapse
mohiuddinmohi profile image
mohiuddinmohi

Waiting...

Collapse
maamouribilel profile image
Maamouri Bilel

Thank you, this is very helpful.

Collapse
mushfiqur06 profile image
Mushfiqur Niloy

Waiting

Collapse
mizbauddintareq profile image
Mizba Uddin Tareq

Eagerly waiting

Collapse
shakilahmmed profile image
Shakil Ahmmed

waiting

Collapse
fsappdev profile image
fsappdev

Thanks a lot man, this is great.

Collapse
shihab31 profile image
Shohel Rana Shihab

wow that would be rally completely incredible for junior developer

Collapse
theshahriar profile image
Shahriar Islam

Thank you @foyzulkarim Vai

Collapse
mesajib profile image
mr sajib

ุฌูŽุฒูŽุงูƒูŽ ูฑู„ู„ูŽู‘ูฐู‡ู ุฎูŽูŠู’ุฑู‹ุง

Collapse
ranafge profile image
Samsul Islam

Thank you vai.

Collapse
hasib48thiiuc profile image
hasib48thiiuc • Edited on

Bhaia Assalamu Alaikum,can i know in how many days it will be completed?

@foyzulkarim bhaia

Collapse
foyzulkarim profile image
Foyzul Karim Author

not sure. but will be approx end of august
in sha Allah

Collapse
hasib48thiiuc profile image
hasib48thiiuc

Bhaia one more question,can you please make a series or at least guideline type videos for problem solving,like problem solving guideline for interview preparation in Bangladesh ,or for Datastructure centric interviews?

Collapse
walid profile image
walidul

This group was created to deal with MERN with Programming. I hope everybody is joining this specially Foyzul Karim vai.... for new learners: chat.whatsapp.com/CKNVpC83zrE5Y3oh...

Collapse
sunwarul profile image
Sunwarul Islam

Great initiative Bhai. Thank you so much. Keep it up! ๐Ÿ˜

Collapse
asmhasansarker profile image
asmhasansarker

Thanks sir

Collapse
nuradnan profile image
Nur_Adnan

Vaia course ta shesh kobe hote pare?? aita ki fully free kore deya hoyeche course ta?

Collapse
goniusman profile image
Osman Goni

ุฌูŽุฒูŽุงูƒูŽ ูฑู„ู„ูŽู‘ูฐู‡ู ุฎูŽูŠู’ุฑู‹ุง

Collapse
naazim7 profile image
Nazim

Thankssssssssssssssssss a lot bhai <3

Collapse
imransajeb_ profile image
ImranHossain • Edited on

Thakns a lot vai โคโคโค

Collapse
ashique12009 profile image
khandoker ashique mahamud

Thank you bhai!

Collapse
moonkabir profile image
MoonKabir

Thank you @Foyzul Karim bhai. It just awesome

Collapse
shahin profile image
Shahin Kobir

Thank you

Collapse
islamkamel profile image
islam kamel

great powerful โค๏ธโค๏ธ