Learn MERN in Bangla like a pro
Tags: javascript, mern, node, react
Published: 2022-06-01 00:07:00

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

###[YouTube playlist](https://youtube.com/playlist?list=PLEYpvDF6qy8ZUE9IyhYWrxt5zEyeXzwxq)###

###[Google slide](https://docs.google.com/presentation/d/e/2PACX-1vRCGthKH7te_RJjnl3iQwRLIh7Jo4uArzULj1-fkP_xTIxroqB7xb9YnYq5NFQXTdaCxSOSOH1AnOFm/pub?start=false&loop=false&delayms=3000) ###

### [Facebook](https://www.facebook.com/foyzulsacademy)

### [Postman link](https://www.postman.com/foyzulkarim/workspace/foyzul-s-public-workspace/collection/2021215-3adbb087-1a94-4be6-bce7-0d03fcdf80b4?action=share&creator=2021215)

### [Learn MERN GitHub](https://github.com/foyzulkarim/learn-mern)

## 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

## Node.js

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

Lecture 35 Node 12: Working with Streams 01 - Writable stream

Lecture 36 Node 13: Working with Streams 02 - Readable streams

Lecture 37 Node 14: Working with Streams 03 - process.std streams

## Web concepts

Lecture 38 Web concepts 01: Introduction to data communication

Lecture 39 Web concepts 02: Open Systems Interconnection model

Lecture 40 Web concepts 03: Hypertext Transfer Protocol (HTTP)

Lecture 41 Web concepts 04: How HTTP messages sent and received

Lecture 42 Web concepts 05: Inspect HTTP request in browser devtool

Lecture 43 Web concepts 06: HTTP get and post request using CURL

Lecture 44 Web concepts 07: HTTP get and post requests in browser

Lecture 45 Web concepts 08: HTTP requests via postman and vscode

Lecture 46 Web concepts 09: HTTP request via javascript node-fetch

Lecture 47 Web concepts 10: Web server using built in HTTP module

Lecture 48 Web concepts 11: Expressjs + nodemon setup and running

[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**

{% embed https://youtube.com/playlist?list=PLEYpvDF6qy8ZUE9IyhYWrxt5zEyeXzwxq %}