Develop Fullstack Instagram Clone With Mern Jwt & Bootstrap5 (pdated 1/2023)

Learn to design and develop production ready fullstack applications with MERN stack, Redux, JWT

What you'll 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

Requirements

Basics of HTML, CSS, JavaScript

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 JSlearn about MongoDB and Mongooselearn about NodeJS and ExpressJSlearn about Middleware in ExpressJSlearn about securing application using tokens - JWT (Json Web Token)learn to design frontend using Bootstrap5learn to design mobile responsive applicationlearn about state management using Reduxlearn to upload and download imageslearn about routing using React Router Domlearn about different types of React Hookslearn to handle user session and hide show menu items based on user sessionlearn to develop a production ready end to end application using MERN stackBelow are the topics that will be covered while developing the application:Environment Setup & React IntroductionInstalling VS Code EditorVS Code SettingsDifference between Javascript and ReactJSCreating the React ProjectRunning the React ApplicationExploring the React Project Folder StructureUnderstanding React JS Application lifecycleCreating First React ComponentIntegrating Bootstrap with React ProjectDesigning Login Page LayoutStyling Left Image Section of Login PageStyling Layout of Login FormUsing Bootstrap form for email and passwordInput boxes stylingStyling Login ButtonAdding and using Google fontsStyling signup section in Login pageStyling the Signup white buttonMaking Login Page Responsive for Mobile-Part-1Making Login Page Responsive for Mobile-Part-2Making Login Page Responsive for Mobile-Part-3Creating Signup Page React ComponentDesigning Signup Page for Mobile and Desktop viewUnderstanding Routing and Installing React Router DomAdding Router Routes and Route in App.js componentNavigating From Login to Signup and Vice VersaNavBar Layout and Solving warning messagesIntegrating Bootstrap NavBarAdding logo to NavBarStyling searchboxIntegrating FontAwesome iconsStyling the right icon section on NavBarCreating Post Overview page and Added RoutingCreating Post Card ComponentDesigning The Post Overview Page LayoutColor Adjustment for Card and BackgroundAdding Profile image from free websiteStyling Profile Image sectionStyling the Left Text and Right IconReplacing free icon with more action imageDesigning the Image section of Post CardStyling bottom more action and likes sectionStyling the bottom Time sectionMaking the NavBar and Post Card section responsiveCreating Routing and Layout for Profile pageDesigning Profile Page LayoutStyling left profile sectionCreating layout for Right sectionWorking on Posts Followers Following sectionAligning the count sectionReducing width of LayoutStyling the button sectionStyling the Gallery sectionMaking Top section Responsive for MobileMaking Gallery Section ResponsiveCreating Layout for Post Details PopupIntegrating Bootstrap CarouselLayout for Right section of Post detailStyling the Post information sectionAdding Popover Dropdown Menu for Edit and DeleteAdding Edit and Delete Post links and IconsAdding Dropdown Menu to NavBarStyling Menu for MyProfile and LogoutAdding Popup for Upload PostStyling the Upload Post BoxStyling the Post Text BoxesStyling the Submit Post buttonHiding the default File Upload buttonStyling the Upload File SectionMaking Upload Post screen Responsive

Overview

Section 1: Frontend: Introduction & Installation Setup

Lecture 1 Course Introduction

Lecture 2 Download Softwares

Lecture 3 Installing nodejs

Lecture 4 Verifying Node and Npm installation

Lecture 5 Installing VS Code Editor

Lecture 6 VS Code Settings

Section 2: Frontend: Basics of ReactJS

Lecture 7 Difference between Javascript and ReactJS

Lecture 8 Creating the React Project

Lecture 9 Running the React Application

Lecture 10 Exploring the React Project Folder Structure

Lecture 11 Understanding React JS Application lifecycle

Lecture 12 Creating First React Component

Section 3: Frontend: Designing Login Screen

Lecture 13 Integrating Bootstrap with React Project

Lecture 14 Designing Login Page Layout

Lecture 15 Styling Left Image Section of Login Page

Lecture 16 Styling Layout of Login Form

Lecture 17 Using Bootstrap form for email and password

Lecture 18 Input boxes styling

Lecture 19 Styling Login Button

Lecture 20 Adding and using Google fonts

Lecture 21 Styling signup section in Login page

Lecture 22 Styling the Signup white button

Lecture 23 Making Login Page Responsive for Mobile-Part-1

Lecture 24 Making Login Page Responsive for Mobile-Part-2

Lecture 25 Making Login Page Responsive for Mobile-Part-3

Section 4: Frontend: Designing Signup Screen, NavBar & Adding Routing

Lecture 26 Creating Signup Page React Component

Lecture 27 Designing Signup Page for Mobile and Desktop view

Lecture 28 Understanding Routing and Installing React Router Dom

Lecture 29 Adding Router Routes and Route in App.js component

Lecture 30 Navigating From Login to Signup and Vice Versa

Lecture 31 NavBar Layout and Solving warning messages

Lecture 32 Integrating Bootstrap NavBar

Lecture 33 Adding logo to NavBar

Lecture 34 Styling searchbox

Lecture 35 Integrating FontAwesome icons

Lecture 36 Styling the right icon section on NavBar

Section 5: Frontend: Designing Post Overview Page & Post Card component

Lecture 37 Creating Post Overview page and Added Routing

Lecture 38 Creating Post Card Component

Lecture 39 Designing The Post Overview Page Layout

Lecture 40 Color Adjustment for Card and Background

Lecture 41 Adding Profile image from free website

Lecture 42 Styling Profile Image section

Lecture 43 Styling the Left Text and Right Icon

Lecture 44 Replacing free icon with more action image

Lecture 45 Designing the Image section of Post Card

Lecture 46 Styling bottom more action and likes section

Lecture 47 Styling the bottom Time section

Lecture 48 Making the NavBar and Post Card section responsive

Section 6: Frontend: Designing Profile Page & Adding Routing

Lecture 49 Creating Routing and Layout for Profile page

Lecture 50 Designing Profile Page Layout

Lecture 51 Styling left profile section

Lecture 52 Creating layout for Right section

Lecture 53 Working on Posts Followers Following section

Lecture 54 Aligning the count section

Lecture 55 Reducing width of Layout

Lecture 56 Styling the button section

Lecture 57 Styling the Gallery section

Lecture 58 Making Top section Responsive for Mobile

Lecture 59 Making Gallery Section Responsive

Section 7: Frontend: Designing Post Detail Page & Popover Layout

Lecture 60 Installing React Bootstrap

Lecture 61 Adding Bootstrap Popup

Lecture 62 Creating Layout for Post Details Popup

Lecture 63 Integrating Bootstrap Carousel

Lecture 64 Layout for Right section of Post detail

Lecture 65 Styling the Post information section

Lecture 66 Adding Popover Dropdown Menu for Edit and Delete

Lecture 67 Adding Edit and Delete Post links and Icons

Lecture 68 Adding Dropdown Menu to NavBar

Lecture 69 Styling Menu for MyProfile and Logout

Section 8: Frontend: Designing Upload Post Screen

Lecture 70 Adding Popup for Upload Post

Lecture 71 Styling the Upload Post Box

Lecture 72 Styling the Post Text Boxes

Lecture 73 Styling the Submit Post button

Lecture 74 Hiding the default File Upload button

Lecture 75 Styling the Upload File Section

Lecture 76 Making Upload Post screen Responsive

Section 9: Backend: Introduction & Installation setup

Lecture 77 Overview of Interaction between FE BE and DB

Lecture 78 Downloading the softwares

Lecture 79 Installing MongoDB and Compass

Lecture 80 Installing Postman and Git bash

Lecture 81 Confirming Software Installation

Lecture 82 Creating a backed nodejs project

Lecture 83 Installing express and cors npm packages

Lecture 84 Developing our first REST API

Lecture 85 Installing nodemon for auto reload

Lecture 86 Running with nodemon

Lecture 87 Creating folder structure and User Router file

Lecture 88 Installing mongoose

Lecture 89 Setting up connection with DB

Section 10: Backend: Developing REST API for User Signup and Signin Functionality

Lecture 90 Defining mongoose schema and model for User

Lecture 91 Registering User model and schema to the app

Lecture 92 Setting up the user signup route or REST API

Lecture 93 Installing encryption and security libraries

Lecture 94 Completing the User Signup REST API

Lecture 95 Test Signup REST API with Postman

Lecture 96 Implement REST API for User Login

Lecture 97 Testing Login REST API with Postman

Section 11: Backend: Implementing Security with JWT & Middlewares

Lecture 98 Implementing Security with JWT - Part-1

Lecture 99 Implementing Security with JWT - Part-2

Lecture 100 Implementing Protected Route Middleware - Part-1

Lecture 101 Implementing Protected Route Middleware - Part-2

Section 12: Backend: Developing REST API for Create and Upload new Post

Lecture 102 Create Post Model and Post Schema

Lecture 103 Implement Create Post REST API - Part-1

Lecture 104 Implement Create Post REST API - Part-2

Lecture 105 Installing multer library and creating file router

Lecture 106 Configurations for file upload download - Part-1

Lecture 107 Configurations for file upload download - Part-2

Lecture 108 Implement REST API for upload post image file

Lecture 109 Implement REST API for Download file feature

Lecture 110 Testing the Create Post Rest API

Section 13: Backend: Developing REST API for Get and Delete Post

Lecture 111 REST API to Get All Posts for All User and All Post for LoggedIn user

Lecture 112 Testing Get All Posts and My All Posts REST API

Lecture 113 Implement Delete Post API only by the Owner of the Post

Lecture 114 Test Delete Post REST API via Postman

Section 14: Backend: REST API for Like, Unlike Post and Comment on a Post functionality

Lecture 115 Modifying Post Model to add Likes Array

Lecture 116 Implementing the Like Post REST API

Lecture 117 Testing the Like Post Functionality with Postman

Lecture 118 Implementing the Unlike Post REST API

Lecture 119 Testing the Unlike Post Functionality with Postman

Lecture 120 Modifying Post Model to add Comments functionality to the Post

Lecture 121 Implementing the Comment REST API

Lecture 122 Testing the Comment Functionality with Postman

Section 15: FE & BE Integration: Implementing Redux State Management

Lecture 123 Module Overview and Summary So far

Lecture 124 Understanding Redux and Its Implementation

Lecture 125 Implementing User Reducer

Lecture 126 Implementing Combine Reducer and Store file

Lecture 127 Making the Store available to the App via Provider

Section 16: FE & BE Integration of Login, Signup, Logout Functionality

Lecture 128 Installing axios and sweetalert2 libraries

Lecture 129 Implemented the signup action and attached to form submit

Lecture 130 Setting form fields values to corresponding state variables

Lecture 131 Implemented Loading Icon when API call is made

Lecture 132 Implemented axios post api call

Lecture 133 Implemented and Tested Signup functionality with success and error msg popup

Lecture 134 Binding state variables for login and applying loading screen

Lecture 135 Integrating Login API call with Frontend and showing proper message

Lecture 136 Dispatch User data to redux store and navigate user to posts

Lecture 137 Implementing Logout Functionality

Lecture 138 Logic to hide menu items based on user is loggedin or not

Lecture 139 Fixing the useSelector to get user data from Redux store

Section 17: FE & BE Integration of Create Post & Get Posts Functionality

Lecture 140 Working on Post Image File Upload

Lecture 141 Code to Upload post image to server

Lecture 142 Creating state variables for add post

Lecture 143 Validation for Post image caption and Location and showing error popup

Lecture 144 Implementing Create Post API call

Lecture 145 Fixing Post image path issue and Testing the create Post Functionality

Lecture 146 Adding Navigation menu to All Posts

Lecture 147 Implement API call to get all posts and store it in state variable

Lecture 148 Looping the React Post Card component with all post list

Lecture 149 Passing data from one react(parent to child) component to another using props

Lecture 150 Binding correct post fields to the Card UI component and Testing

Section 18: FE & BE Integrating Delete Post, Like, Unlike & Comment Functionality

Lecture 151 Only the user who posted the post can delete it

Lecture 152 Passing data from Child to Parent to implement delete post functionality

Lecture 153 Implementing Delete Post API Call

Lecture 154 Implementing MyProfile functionality

Lecture 155 Show Post Details on Popup

Lecture 156 Implement Delete Post Functionality from Post Detail Popup

Lecture 157 Display name of user who did the post

Lecture 158 Implemented the Like Post Functionality

Lecture 159 Implemented the UnLike Post Functionality

Lecture 160 Implement Comment Post Frontend UI

Lecture 161 Implement the Comment Post and CommentedBy functionality with API

Lecture 162 Implement Dynamic Routing so that with Page Refresh UI data is not lost

Lecture 163 Solving the routing issue when login or not

Lecture 164 Hide_Show navbar menu items for user login or not

Section 19: Source Code

Lecture 165 Frontend Code

Lecture 166 Backend Code

Anyone who wants to develop production ready fullstack application using MERN stack, Redux and JWT