• Post category:Udemy (Oct. 2021)
  • Reading time:12 mins read


Develop Production grade Fullstack Projects with MERN stack and start apply applying Jobs as MERN stack developer

What you will 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

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:


Subscribe to latest coupons on our Telegram channel.

  • 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:

     

    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.

English
language

 

Content

 
Fundamentals of React JS
Course Overview
ReactJS introduction and environment setup
create react app
program flow and project files walkthrough
types of components in react
creating and using 1st functional component
creating 1st stateful class component
ES6 functional component, export and import
comparision between functional and class component
react hooks intro
jsx explained
props in functional and class component
state vs props
deep dive into setState
Handling form in class component part-1
Handling form in class component part-2
componentDidMount lifecycle onload method
Backend API for Login & Signup: Production Grade MERN stack project
1.1-Setup local environment
Setup backend nodejs API
what is middleware
Setup free cloud MongoDB
Storing and exporting configuration
Setting up UserModel with mongoose
Setting up 1st router and 1st route
Creating Registration REST API
Saving user in the database
Encrypting password before saving
Implementing Login API
Implementing JWT authentication
Implementing middleware for protected routes
Backend API for user POST: Production Grade MERN stack project
Setting up Post model with mongoose
Setting up route for Post
Implementing create post API
Do not return password in response
Get all posts for all users
Get all posts for current logged-in user
Setup frontend React env & develop layout: Production Grade MERN stack project
Setting up frontend environment with React
Add Materialize css and work on NavBar
Add React VSC extension and further style NavBar
Adding pages and routing
Stopping page refresh with LINK tag
Adding google fonts and custom style
Working on Login screen
Working on Signup screen
Working with profile page
Working with profile page gallery section
Integrating Frontend & Backend
Working on Homepage Post section
Enhancing Homepage post section
Working on Create Post page
Adding create post routing and further styling it
Futher styling create-post page
Running Frontend and Backend together
Adding state variables to signup page
Connecting Signup form to Backend Registration API
Solving CORS issue
Add Toast message on frontend for error
Further styling the Toast message for error
Navigate user to login page after successful registration
Form input validation
Integrating Login page with backend Login API
Cloud storage & Redux
Enriching Login API to get more user information
Setup free cloud storage for storing images
Adding state variables to create post screen
Uploading Post image to cloud storage
Updating backend create-post api for storing post image url
Storing loggedin user info in local storage
Saving new post by making API call
Testing create new post functionality end to end
Setup Reducer and Context API for state sharing and management Part-1
Setup Reducer and Context API for state sharing and management Part-2.mp4
Fixing error
Enriching styling for home page
Hide and Show menu items based on user loggedin state
Loading home page posts from backend API
Like, Unlike, Comment, Delete, Logout functionality
Implementing Logout functionality
Fetching Profile page data from backend API
Implementing Like Post API in Backend
Implementing UnLike Post API in Backend.mp4
Implementing Like and Unlike on frontend and integrate to backend
Refresh Like and Unlike count
Restricting user to like and unlike only once per post
Implementing Backend API for Comment
Integrate frontend with backend comment API
12.6-Showing comments on frontend
API for Delete Post
Integrate frontend with backend Delete Post API
Test the functionality
Other’s Profile & Follow, Unfollow
API for seeing Post from different user
Frontend for Other user profile page Part-1
Navigate to Other user profile page
Create Follow Unfollow backend API
Frontend changes for Follow
Updating localStorage with following information
Updating frontend state with following info
Implementing unfollow logic on frontend
Make the user profile info dynamic
Showing extra info on user profile page
API for Post from my followings
UI changes for post from my followings – Part -1
UI changes for post from my followings – Part 2
Bug fix for follow unfollow
Working on user profile picture
Showing user pic along side user name on Post