You can apply Jobs as a MERN stack developer
You will learn to implement Authentication and Restricted Routes concept
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
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 method
We will use the following technologies:
- MONGODB – NoSQL database for storing data as documents and collection
- EXPRESS JS – Web framework for developing RESTful web services/API’s
- REACT JS – Library for developing the single page UI with functional components
- NODE JS – Runtime environment for developing our backend application
- Bcrypt JS – Npm package for encrypting and decrypting password
- Json Web Token(JWT) – For secure token based communication between frontend and backend via API calls
- REACT REDUX – For state management in our React application
- localStorage – For storing application information in the frontend
- Nodemon – Npm package for auto-reload of backend changes
- Cloudinary – Cloud storage for storing images
- 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.
Backend API for Login & Signup: Production Grade MERN stack project
-
1Course Overview
-
2ReactJS introduction and environment setup
-
3create react app
-
4program flow and project files walkthrough
-
5types of components in react
-
6creating and using 1st functional component
-
7creating 1st stateful class component
-
8ES6 functional component, export and import
-
9comparision between functional and class component
-
10react hooks intro
-
11jsx explained
-
12props in functional and class component
-
13state vs props
-
14deep dive into setState
-
15Handling form in class component part-1
-
16Handling form in class component part-2
-
17componentDidMount lifecycle onload method
Backend API for user POST: Production Grade MERN stack project
-
181.1-Setup local environment
-
19Setup backend nodejs API
-
20what is middleware
-
21Setup free cloud MongoDB
-
22Storing and exporting configuration
-
23Setting up UserModel with mongoose
-
24Setting up 1st router and 1st route
-
25Creating Registration REST API
-
26Saving user in the database
-
27Encrypting password before saving
-
28Implementing Login API
-
29Implementing JWT authentication
-
30Implementing middleware for protected routes
Setup frontend React env & develop layout: Production Grade MERN stack project
Integrating Frontend & Backend
-
37Setting up frontend environment with React
-
38Add Materialize css and work on NavBar
-
39Add React VSC extension and further style NavBar
-
40Adding pages and routing
-
41Stopping page refresh with LINK tag
-
42Adding google fonts and custom style
-
43Working on Login screen
-
44Working on Signup screen
-
45Working with profile page
-
46Working with profile page gallery section
Cloud storage & Redux
-
47Working on Homepage Post section
-
48Enhancing Homepage post section
-
49Working on Create Post page
-
50Adding create post routing and further styling it
-
51Futher styling create-post page
-
52Running Frontend and Backend together
-
53Adding state variables to signup page
-
54Connecting Signup form to Backend Registration API
-
55Solving CORS issue
-
56Add Toast message on frontend for error
-
57Further styling the Toast message for error
-
58Navigate user to login page after successful registration
-
59Form input validation
-
60Integrating Login page with backend Login API
Like, Unlike, Comment, Delete, Logout functionality
-
61Enriching Login API to get more user information
-
62Setup free cloud storage for storing images
-
63Adding state variables to create post screen
-
64Uploading Post image to cloud storage
-
65Updating backend create-post api for storing post image url
-
66Storing loggedin user info in local storage
-
67Saving new post by making API call
-
68Testing create new post functionality end to end
-
69Setup Reducer and Context API for state sharing and management Part-1
-
70Setup Reducer and Context API for state sharing and management Part-2.mp4
-
71Fixing error
-
72Enriching styling for home page
-
73Hide and Show menu items based on user loggedin state
-
74Loading home page posts from backend API
Other's Profile & Follow, Unfollow
-
75Implementing Logout functionality
-
76Fetching Profile page data from backend API
-
77Implementing Like Post API in Backend
-
78Implementing UnLike Post API in Backend.mp4
-
79Implementing Like and Unlike on frontend and integrate to backend
-
80Refresh Like and Unlike count
-
81Restricting user to like and unlike only once per post
-
82Implementing Backend API for Comment
-
83Integrate frontend with backend comment API
-
8412.6-Showing comments on frontend
-
85API for Delete Post
-
86Integrate frontend with backend Delete Post API
-
87Test the functionality
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!