Apply Jobs as MERN stack developer with this course

Apply Jobs as MERN stack developer with this course

Apply Jobs as MERN stack developer with this course

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

Language: english

Note: 4.5/5 (46 notes) 13,257 students

Instructor(s): Obify Consulting

Last update: 2022-03-30

What you’ll learn

  • 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

 

Requirements

  • Basics of Html, Css, JavaScript

 

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

 

Who this course is for

  • Anyone who wants to apply Jobs as a MERN stack developer

 

Course 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
    • g 1st stateful class componentcreatin
    • 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
    • Update About React-Router-Dom – V6
    • 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
  • Project Source Code
    • Frontend source code
    • Backend source code

 

Time remaining or 831 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate