Learn to design and develop production ready fullstack applications with MERN stack, Redux, JWT
In this course you will learn to develop production ready fullstack application and get ready for your job.
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.
Course Content
- Frontend: Introduction & Installation Setup –> 6 lectures • 14min.
- Frontend: Basics of ReactJS –> 6 lectures • 23min.
- Frontend: Designing Login Screen –> 13 lectures • 1hr 4min.
- Frontend: Designing Signup Screen, NavBar & Adding Routing –> 11 lectures • 51min.
- Frontend: Designing Post Overview Page & Post Card component –> 12 lectures • 1hr 18min.
- Frontend: Designing Profile Page & Adding Routing –> 11 lectures • 1hr 12min.
- Frontend: Designing Post Detail Page & Popover Layout –> 10 lectures • 55min.
- Frontend: Designing Upload Post Screen –> 7 lectures • 47min.
- Backend: Introduction & Installation setup –> 13 lectures • 44min.
- Backend: Developing REST API for User Signup and Signin Functionality –> 8 lectures • 31min.
- Backend: Implementing Security with JWT & Middlewares –> 4 lectures • 21min.
- Backend: Developing REST API for Create and Upload new Post –> 9 lectures • 40min.
- Backend: Developing REST API for Get and Delete Post –> 4 lectures • 24min.
- Backend: REST API for Like, Unlike Post and Comment on a Post functionality –> 8 lectures • 21min.
- FE & BE Integration: Implementing Redux State Management –> 5 lectures • 17min.
- FE & BE Integration of Login, Signup, Logout Functionality –> 12 lectures • 1hr 6min.
- FE & BE Integration of Create Post & Get Posts Functionality –> 11 lectures • 1hr 1min.
- FE & BE Integrating Delete Post, Like, Unlike & Comment Functionality –> 14 lectures • 1hr 35min.
- Source Code –> 2 lectures • 1min.
Requirements
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 NavBarCreating Post Overview page and Added RoutingCreating 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