5.00(1)

Apply Jobs as MERN stack developer with this course

by Ranjan Pandey
Course level: Beginner
Share:

Categories Video Courses
Duration 11h
Total Enrolled 67
Last Update March 16, 2022

Description

In this course, you will learn everything that is needed for you to become a Pro Fullstack developer in a hands-on step by step approach.

In this MERN stack course you are going to learn all the components that will help you develop your own production grade full stack application.

You will be able to apply for any Job related to MERN stack.

Everything will be taught from scratch with practical examples.

Following are the topics that will be covered in this course:

1.1-ReactJS introduction and environment setup
1.2-create react app
1.3-program flow and project files walkthrough
1.4-types of components in react
1.5-creating and using 1st functional component
1.6-creating 1st stateful class component
1.7-ES6 functional component, export and import
1.8-comparision between functional and class component
1.9-react hooks intro
1.10-jsx explained
1.11-props in functional and class component
1.12-state vs props
1.13-deep dive into setState
1.14-Handling form in class component part-1
1.15-Handling form in class component part-2
1.16-componentDidMount lifecycle onload methodWe will use the following technologies:
1. MONGODB – NoSQL database for storing data as documents and collection
2. EXPRESS JS – Web framework for developing RESTful web services/API’s
3. REACT JS – Library for developing the single page UI with functional components
4. NODE JS – Runtime environment for developing our backend application
5. Bcrypt JS – Npm package for encrypting and decrypting password
6. Json Web Token(JWT) – For secure token based communication between frontend and backend via API calls
7. REACT REDUX – For state management in our React application
8. localStorage – For storing application information in the frontend
9. Nodemon – Npm package for auto-reload of backend changes
10. Cloudinary – Cloud storage for storing images
11. Visual studio code – Development tool/IDE
12. ES7 React Extension – Helps to create React functional component faster

We will also learn the debugging techniques and best practices that will help you become an awesome MERN stack developer.

What Will I Learn?

You can apply Jobs as a MERN stack developer
You will become a Pro Fullstack developer
You will learn all the concepts of React, Node, Express and MongoDB in practical project based approach
You will learn various debugging techniques

Topics for this course

106 Lessons11h

Section 1: Fundamentals of React JS

Lecture 1: Course Overview1:12

Lecture 2: ReactJS introduction and environment setup19:27

Lecture 3: create react app00:04:60

Lecture 4: program flow and project files walkthrough00:12:13

Lecture 5: types of components in react00:03:38

Lecture 6: creating and using 1st functional component00:07:47

Lecture 7: g 1st stateful class componentcreatin00:03:45

Lecture 8: ES6 functional component, export and import00:07:12

Lecture 9: comparision between functional and class component00:02:60

Lecture 10: react hooks intro00:02:41

Lecture 11: jsx explained00:04:12

Lecture 12: props in functional and class component00:22:53

Lecture 13: state vs props00:11:20

Lecture 14: deep dive into setState00:14:43

Lecture 15: Handling form in class component part-100:03:19

Lecture 16: Handling form in class component part-200:15:15

Lecture 17: componentDidMount lifecycle onload method00:03:41

Section 2: Backend API for Login & Signup: Production Grade MERN stack project

Section 3: Backend API for user POST: Production Grade MERN stack project

Section 4: Setup frontend React env & develop layout: Production Grade MERN stack project

Section 5: Integrating Frontend & Backend

Section 6: Cloud storage & Redux

Section 7: Like, Unlike, Comment, Delete, Logout functionality

Section 8: Other’s Profile & Follow, Unfollow

Section 9: Project Source Code

Student Feedback

5.0

Total 1 Ratings

1 rating

0 rating

Ivan Niewpoort

3 years ago

great course, covers everything from frontend to backend with a project

$3.99

Requirements

Basics of Html, Css, JavaScript

Target Audience

Anyone who wants to apply Jobs as a MERN stack developer

Apply Jobs as MERN stack developer with this course

Description

What Will I Learn?

Topics for this course

Section 1: Fundamentals of React JS

Lecture 1: Course Overview1:12

Lecture 2: ReactJS introduction and environment setup19:27

Lecture 3: create react app00:04:60

Lecture 4: program flow and project files walkthrough00:12:13

Lecture 5: types of components in react00:03:38

Lecture 6: creating and using 1st functional component00:07:47

Lecture 7: g 1st stateful class componentcreatin00:03:45

Lecture 8: ES6 functional component, export and import00:07:12

Lecture 9: comparision between functional and class component00:02:60

Lecture 10: react hooks intro00:02:41

Lecture 11: jsx explained00:04:12

Lecture 11: jsx explained00:04:12

Lecture 12: props in functional and class component00:22:53

Lecture 13: state vs props00:11:20

Lecture 14: deep dive into setState00:14:43

Lecture 15: Handling form in class component part-100:03:19

Lecture 16: Handling form in class component part-200:15:15

Lecture 17: componentDidMount lifecycle onload method00:03:41

Section 2: Backend API for Login & Signup: Production Grade MERN stack project

Lecture 18: Setup local environment1:43

Lecture 19: Setup backend nodejs API5:00

Lecture 20: what is middleware00:04:55

Lecture 21: Setup free cloud MongoDB00:02:55

Lecture 22: Storing and exporting configuration5:15

Lecture 23: Setting up UserModel with mongoose00:03:50

Lecture 24: Setting up 1st router and 1st route00:03:27

Lecture 25: Creating Registration REST API00:07:38

Lecture 26: Saving user in the database00:08:05

Lecture 27: Encrypting password before saving00:06:20

Lecture 28: Implementing Login API00:08:03

Lecture 29: Implementing JWT authentication00:06:43

Lecture 30: Implementing middleware for protected routes00:13:07

Section 3: Backend API for user POST: Production Grade MERN stack project

Lecture 31: Setting up Post model with mongoose00:03:57

Lecture 32: Setting up route for Post00:08:56

Lecture 33: Implementing create post API00:03:12

Lecture 34: Do not return password in response00:01:01

Lecture 35: Get all posts for all users00:02:52

Lecture 36: Get all posts for current logged-in user00:04:37

Section 4: Setup frontend React env & develop layout: Production Grade MERN stack project

Lecture 37: Setting up frontend environment with React00:04:29

Lecture 38: Add Materialize css and work on NavBar00:03:24

Lecture 39: Add React VSC extension and further style NavBar00:05:33

Lecture 40: Adding pages and routing00:06:39

Lecture 41: Stopping page refresh with LINK tag00:02:22

Lecture 42: Adding google fonts and custom style00:01:32

Lecture 43: Working on Login screen00:10:22

Lecture 44: Working on Signup screen00:03:34

Lecture 45: Working with profile page00:09:46

Lecture 46: Working with profile page gallery section00:05:15

Section 5: Integrating Frontend & Backend

Lecture 47: Working on Homepage Post section00:06:06

Lecture 48: Enhancing Homepage post section00:02:54

Lecture 49: Working on Create Post page00:03:49

Lecture 50: Adding create post routing and further styling it00:04:44

Lecture 51: Futher styling create-post page00:01:48

Lecture 52: Running Frontend and Backend together00:02:40

Lecture 53: Adding state variables to signup page00:04:39

Lecture 54: Connecting Signup form to Backend Registration API00:06:46

Lecture 55: Solving CORS issue00:05:14

Lecture 56: Add Toast message on frontend for error00:04:18

Lecture 57: Further styling the Toast message for error00:05:31

Lecture 58: Navigate user to login page after successful registration00:01:54

Lecture 59: Form input validation00:02:58

Lecture 60: Integrating Login page with backend Login API00:05:07

Section 6: Cloud storage & Redux

Lecture 61: Enriching Login API to get more user information00:02:33

Lecture 62: Setup free cloud storage for storing images00:03:05

Lecture 63: Adding state variables to create post screen00:05:31

Lecture 64: Uploading Post image to cloud storage00:07:05

Lecture 65: Updating backend create-post api for storing post image url00:02:38

Lecture 66: Storing loggedin user info in local storage00:04:18

Lecture 67: Saving new post by making API call00:06:40

Lecture 68: Testing create new post functionality end to end00:02:47

Lecture 69: Setup Reducer and Context API for state sharing and management Part-100:12:02