Tech & IT
Business
Coding & Developer
Finance & Accounting
Academics
Office Applications
Art & Design
Marketing
Health & Wellness
Sounds & Music
Lifestyle
Photography
Get Unlimited Learning Access
$29
5 days left at this price!
30-Day Money-Back Guarantee
This plan includes
- Instant access to 11,000+ online courses
- Play & Pause Course Videos
HD Video Recorded Lectures- Learn on Mobile/PC/Tablet
- Quizzes and Real Projects
- Lifetime Course Certificate
- Instructor Chat Support
- Cancel Plan Anytime
Subscribe to Learnfly’s top courses
Get this course, plus 11,000+ of our top-rated courses for one year with Go Annually Plan.
5 days left at this price!
30-Day Money-Back Guarantee
This plan includes
- Instant access to 11,000+ online courses
- Play & Pause Course Videos
- HD Video Recorded Lectures
- Learn on Mobile/PC/Tablet
- Quizzes and Real Projects
- Lifetime Course Certificate
- Instructor Chat Support
- Cancel Plan Anytime
$29
What you'll 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
Course Overview
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.
Pre-requisites
- Basics of Html, Css, JavaScript
Target Audience
- Basics of Html, Css, JavaScript
Curriculum 103 Lectures 00:00:04
-
Section 1 : Fundamentals of React JS
- Lecture 2 :
- ReactJS introduction and environment setup
- Lecture 3 :
- create react app
- Lecture 4 :
- program flow and project files walkthrough
- Lecture 5 :
- types of components in react
- Lecture 6 :
- creating and using 1st functional component
- Lecture 7 :
- creating 1st stateful class component
- Lecture 8 :
- ES6 functional component, export and import
- Lecture 9 :
- comparision between functional and class component
- Lecture 10 :
- react hooks intro
- Lecture 11 :
- jsx explained
- Lecture 12 :
- props in functional and class component
- Lecture 13 :
- state vs props
- Lecture 14 :
- deep dive into setState
- Lecture 15 :
- Handling form in class component part-1
- Lecture 16 :
- Handling form in class component part-2
- Lecture 17 :
- componentDidMount lifecycle onload method
-
Section 2 : Backend API for Login & Signup: Production Grade MERN stack project
- Lecture 1 :
- 1.1-Setup local environment
- Lecture 2 :
- Setup backend nodejs API
- Lecture 3 :
- what is middleware
- Lecture 4 :
- Setup free cloud MongoDB
- Lecture 5 :
- Storing and exporting configuration
- Lecture 6 :
- Setting up UserModel with mongoose
- Lecture 7 :
- Setting up 1st router and 1st route
- Lecture 8 :
- Creating Registration REST API
- Lecture 9 :
- Saving user in the database
- Lecture 10 :
- Encrypting password before saving
- Lecture 11 :
- Implementing Login API
- Lecture 12 :
- Implementing JWT authentication
- Lecture 13 :
- Implementing middleware for protected routes
-
Section 3 : Backend API for user POST: Production Grade MERN stack project
- Lecture 1 :
- Setting up Post model with mongoose
- Lecture 2 :
- Setting up route for Post
- Lecture 3 :
- Implementing create post API
- Lecture 4 :
- Do not return password in response
- Lecture 5 :
- Get all posts for all users
- Lecture 6 :
- Get all posts for current logged-in user
-
Section 4 : Setup frontend React env & develop layout: Production Grade MERN stack project
- Lecture 1 :
- Setting up frontend environment with React
- Lecture 2 :
- Add Materialize css and work on NavBar
- Lecture 3 :
- Add React VSC extension and further style NavBar
- Lecture 4 :
- Adding pages and routing
- Lecture 5 :
- Stopping page refresh with LINK tag
- Lecture 6 :
- Adding google fonts and custom style
- Lecture 7 :
- Working on Login screen
- Lecture 8 :
- Working on Signup screen
- Lecture 9 :
- Working with profile page
- Lecture 10 :
- Working with profile page gallery section
-
Section 5 : Integrating Frontend & Backend
- Lecture 1 :
- Working on Homepage Post section
- Lecture 2 :
- Enhancing Homepage post section
- Lecture 3 :
- Working on Create Post page
- Lecture 4 :
- Adding create post routing and further styling it
- Lecture 5 :
- Futher styling create-post page
- Lecture 6 :
- Running Frontend and Backend together
- Lecture 7 :
- Adding state variables to signup page
- Lecture 8 :
- Connecting Signup form to Backend Registration API
- Lecture 9 :
- Solving CORS issue
- Lecture 10 :
- Add Toast message on frontend for error
- Lecture 11 :
- Further styling the Toast message for error
- Lecture 12 :
- Navigate user to login page after successful registration
- Lecture 13 :
- Form input validation
- Lecture 14 :
- Integrating Login page with backend Login API
-
Section 6 : Cloud storage & Redux
- Lecture 1 :
- Enriching Login API to get more user information
- Lecture 2 :
- Setup free cloud storage for storing images
- Lecture 3 :
- Adding state variables to create post screen
- Lecture 4 :
- Uploading Post image to cloud storage
- Lecture 5 :
- Updating backend create-post api for storing post image url
- Lecture 6 :
- Storing loggedin user info in local storage
- Lecture 7 :
- Saving new post by making API call
- Lecture 8 :
- Testing create new post functionality end to end
- Lecture 9 :
- Setup Reducer and Context API for state sharing and management Part-1
- Lecture 10 :
- Setup Reducer and Context API for state sharing and management Part-2.mp4
- Lecture 11 :
- Fixing error
- Lecture 12 :
- Enriching styling for home page
- Lecture 13 :
- Hide and Show menu items based on user loggedin state
- Lecture 14 :
- Loading home page posts from backend API
-
Section 7 : Like, Unlike, Comment, Delete, Logout functionality
- Lecture 1 :
- Implementing Logout functionality
- Lecture 2 :
- Fetching Profile page data from backend API
- Lecture 3 :
- Implementing Like Post API in Backend
- Lecture 4 :
- Implementing UnLike Post API in Backend.mp4
- Lecture 5 :
- Implementing Like and Unlike on frontend and integrate to backend
- Lecture 6 :
- Refresh Like and Unlike count
- Lecture 7 :
- Restricting user to like and unlike only once per post
- Lecture 8 :
- Implementing Backend API for Comment
- Lecture 9 :
- Integrate frontend with backend comment API
- Lecture 10 :
- 12.6-Showing comments on frontend
- Lecture 11 :
- API for Delete Post
- Lecture 12 :
- Integrate frontend with backend Delete Post API
- Lecture 13 :
- Test the functionality
-
Section 8 : Other's Profile & Follow, Unfollow
- Lecture 1 :
- API for seeing Post from different user
- Lecture 2 :
- Frontend for Other user profile page Part-1
- Lecture 3 :
- Navigate to Other user profile page
- Lecture 4 :
- Create Follow Unfollow backend API
- Lecture 5 :
- Frontend changes for Follow
- Lecture 6 :
- Updating localStorage with following information
- Lecture 7 :
- Updating frontend state with following info
- Lecture 8 :
- Implementing unfollow logic on frontend
- Lecture 9 :
- Make the user profile info dynamic
- Lecture 10 :
- Showing extra info on user profile page
- Lecture 11 :
- API for Post from my followings
- Lecture 12 :
- UI changes for post from my followings - Part -1
- Lecture 13 :
- UI changes for post from my followings - Part 2
- Lecture 14 :
- Bug fix for follow unfollow
- Lecture 15 :
- Working on user profile picture
- Lecture 16 :
- Showing user pic along side user name on Post
Our learners work at
Frequently Asked Questions
-
How do i access the course after purchase?
It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time. -
Are these video based online self-learning courses?
Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic. -
Can i play & pause the course as per my convenience?
Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on. -
How do i contact the instructor for any doubts or questions?
Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want. -
Do i need a pc to access the course or can i do it on mobile & tablet as well?
Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly. -
Do i get any certificate for the courses?
Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
-
For how long can i access my course on the platform?
You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions. -
Is there any free trial?
Currently, we do not offer any free trial. -
Can i cancel anytime?
Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?
Instructor
709750 Course Views
6 Courses
I am a Fullstack DevOps software professional with 11+ years of experience in variety of technologies ranging from web and mobile app development using HTML5, CSS3, JavaScript, JQuery, Bootstrap, Angular, React, Java, Spring, Springboot, Python, Flask, Django, NodeJS, Express, Android, Ionic, React Native, Flutter to Artificial Intelligence and Cloud technologies like Amazon web services and Microsoft Azure.
I am also certified in Java, Azure cloud, Backbase product.
I have experience in working with multiple MNC's and European clients. I am also a corporate trainer providing a wide range of training.
View More...
