Learn to design and develop production ready fullstack applications with MERN stack, Redux, JWT
What you will learn
You will learn about React JS
You will learn about MongoDB and Mongoose
You will learn about NodeJS and ExpressJS
You will learn about Middleware in ExpressJS
You will learn about securing application using tokens – JWT (Json Web Token)
You will learn to design frontend using Bootstrap5
You will learn to design mobile responsive application
You will learn about state management using Redux
You will learn to upload and download images
You will learn about routing using React Router Dom
You will learn about different types of React Hooks
You will learn to handle user session and hide show menu items based on user session
You will learn to develop a production ready end to end application using MERN stack
Description
In this course you will learn to develop production ready fullstack application and get ready for your job.
Following are the topics you will learn in this course:
- learn about React JS
- learn about MongoDB and Mongoose
- learn about NodeJS and ExpressJS
- learn about Middleware in ExpressJS
- learn about securing application using tokens – JWT (Json Web Token)
- learn to design frontend using Bootstrap5
- learn to design mobile responsive application
- learn about state management using Redux
- learn to upload and download images
- learn about routing using React Router Dom
- learn about different types of React Hooks
- learn to handle user session and hide show menu items based on user session
- learn to develop a production ready end to end application using MERN stack
Below are the topics that will be covered while developing the application:
- Environment Setup & React Introduction
- Installing VS Code Editor
- VS Code Settings
- Difference between Javascript and ReactJS
- Creating the React Project
- Running the React Application
- Exploring the React Project Folder Structure
- Understanding React JS Application lifecycle
- Creating First React Component
- Integrating Bootstrap with React Project
- Designing Login Page Layout
- Styling Left Image Section of Login Page
- Styling Layout of Login Form
- Using Bootstrap form for email and password
- Input boxes styling
- Styling Login Button
- Adding and using Google fonts
- Styling signup section in Login page
- Styling the Signup white button
- Making Login Page Responsive for Mobile-Part-1
- Making Login Page Responsive for Mobile-Part-2
- Making Login Page Responsive for Mobile-Part-3
- Creating Signup Page React Component
- Designing Signup Page for Mobile and Desktop view
- Understanding Routing and Installing React Router Dom
- Adding Router Routes and Route in App.js component
- Navigating From Login to Signup and Vice Versa
- NavBar Layout and Solving warning messages
- Integrating Bootstrap NavBar
- Adding logo to NavBar
- Styling searchbox
- Integrating FontAwesome icons
- Styling the right icon section on NavBar
- Creating PostOverview page and Added Routing
English
language
Content
Frontend: Introduction & Installation Setup
Course Introduction
Download Softwares
Installing nodejs
Verifying Node and Npm installation
Installing VS Code Editor
VS Code Settings
Frontend: Basics of ReactJS
Difference between Javascript and ReactJS
Creating the React Project
Running the React Application
Exploring the React Project Folder Structure
Understanding React JS Application lifecycle
Creating First React Component
Frontend: Designing Login Screen
Integrating Bootstrap with React Project
Designing Login Page Layout
Styling Left Image Section of Login Page
Styling Layout of Login Form
Using Bootstrap form for email and password
Input boxes styling
Styling Login Button
Adding and using Google fonts
Styling signup section in Login page
Styling the Signup white button
Making Login Page Responsive for Mobile-Part-1
Making Login Page Responsive for Mobile-Part-2
Making Login Page Responsive for Mobile-Part-3
Frontend: Designing Signup Screen, NavBar & Adding Routing
Creating Signup Page React Component
Designing Signup Page for Mobile and Desktop view
Understanding Routing and Installing React Router Dom
Adding Router Routes and Route in App.js component
Navigating From Login to Signup and Vice Versa
NavBar Layout and Solving warning messages
Integrating Bootstrap NavBar
Adding logo to NavBar
Styling searchbox
Integrating FontAwesome icons
Styling the right icon section on NavBar
Frontend: Designing Post Overview Page & Post Card component
Creating Post Overview page and Added Routing
Creating Post Card Component
Designing The Post Overview Page Layout
Color Adjustment for Card and Background
Adding Profile image from free website
Styling Profile Image section
Styling the Left Text and Right Icon
Replacing free icon with more action image
Designing the Image section of Post Card
Styling bottom more action and likes section
Styling the bottom Time section
Making the NavBar and Post Card section responsive
Frontend: Designing Profile Page & Adding Routing
Creating Routing and Layout for Profile page
Designing Profile Page Layout
Styling left profile section
Creating layout for Right section
Working on Posts Followers Following section
Aligning the count section
Reducing width of Layout
Styling the button section
Styling the Gallery section
Making Top section Responsive for Mobile
Making Gallery Section Responsive
Frontend: Designing Post Detail Page & Popover Layout
Installing React Bootstrap
Adding Bootstrap Popup
Creating Layout for Post Details Popup
Integrating Bootstrap Carousel
Layout for Right section of Post detail
Styling the Post information section
Adding Popover Dropdown Menu for Edit and Delete
Adding Edit and Delete Post links and Icons
Adding Dropdown Menu to NavBar
Styling Menu for MyProfile and Logout
Frontend: Designing Upload Post Screen
Adding Popup for Upload Post
Styling the Upload Post Box
Styling the Post Text Boxes
Styling the Submit Post button
Hiding the default File Upload button
Styling the Upload File Section
Making Upload Post screen Responsive
Backend: Introduction & Installation setup
Overview of Interaction between FE BE and DB
Downloading the softwares
Installing MongoDB and Compass
Installing Postman and Git bash
Confirming Software Installation
Creating a backed nodejs project
Installing express and cors npm packages
Developing our first REST API
Installing nodemon for auto reload
Running with nodemon
Creating folder structure and User Router file
Installing mongoose
Setting up connection with DB
Backend: Developing REST API for User Signup and Signin Functionality
Defining mongoose schema and model for User
Registering User model and schema to the app
Setting up the user signup route or REST API
Installing encryption and security libraries
Completing the User Signup REST API
Test Signup REST API with Postman
Implement REST API for User Login
Testing Login REST API with Postman
Backend: Implementing Security with JWT & Middlewares
Implementing Security with JWT – Part-1
Implementing Security with JWT – Part-2
Implementing Protected Route Middleware – Part-1
Implementing Protected Route Middleware – Part-2
Backend: Developing REST API for Create and Upload new Post
Create Post Model and Post Schema
Implement Create Post REST API – Part-1
Implement Create Post REST API – Part-2
Installing multer library and creating file router
Configurations for file upload download – Part-1
Configurations for file upload download – Part-2
Implement REST API for upload post image file
Implement REST API for Download file feature
Testing the Create Post Rest API
Backend: Developing REST API for Get and Delete Post
REST API to Get All Posts for All User and All Post for LoggedIn user
Testing Get All Posts and My All Posts REST API
Implement Delete Post API only by the Owner of the Post
Test Delete Post REST API via Postman
Backend: REST API for Like, Unlike Post and Comment on a Post functionality
Modifying Post Model to add Likes Array
Implementing the Like Post REST API
Testing the Like Post Functionality with Postman
Implementing the Unlike Post REST API
Testing the Unlike Post Functionality with Postman
Modifying Post Model to add Comments functionality to the Post
Implementing the Comment REST API
Testing the Comment Functionality with Postman
FE & BE Integration: Implementing Redux State Management
Module Overview and Summary So far
Understanding Redux and Its Implementation
Implementing User Reducer
Implementing Combine Reducer and Store file
Making the Store available to the App via Provider
FE & BE Integration of Login, Signup, Logout Functionality
Installing axios and sweetalert2 libraries
Implemented the signup action and attached to form submit
Setting form fields values to corresponding state variables
Implemented Loading Icon when API call is made
Implemented axios post api call
Implemented and Tested Signup functionality with success and error msg popup
Binding state variables for login and applying loading screen
Integrating Login API call with Frontend and showing proper message
Dispatch User data to redux store and navigate user to posts
Implementing Logout Functionality
Logic to hide menu items based on user is loggedin or not
Fixing the useSelector to get user data from Redux store
FE & BE Integration of Create Post & Get Posts Functionality
Working on Post Image File Upload
Code to Upload post image to server
Creating state variables for add post
Validation for Post image caption and Location and showing error popup
Implementing Create Post API call
Fixing Post image path issue and Testing the create Post Functionality
Adding Navigation menu to All Posts
Implement API call to get all posts and store it in state variable
Looping the React Post Card component with all post list
Passing data from one react(parent to child) component to another using props
Binding correct post fields to the Card UI component and Testing
FE & BE Integrating Delete Post, Like, Unlike & Comment Functionality
Only the user who posted the post can delete it
Passing data from Child to Parent to implement delete post functionality
Implementing Delete Post API Call
Implementing MyProfile functionality
Show Post Details on Popup
Implement Delete Post Functionality from Post Detail Popup
Display name of user who did the post
Implemented the Like Post Functionality
Implemented the UnLike Post Functionality
Implement Comment Post Frontend UI
Implement the Comment Post and CommentedBy functionality with API
Implement Dynamic Routing so that with Page Refresh UI data is not lost
Solving the routing issue when login or not
Hide_Show navbar menu items for user login or not
Source Code
Frontend Code
Backend Code