Develop Fullstack Instagram Clone with MERN JWT & Bootstrap5

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

  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

  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

  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