0(0)

Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API

by Ranjan Pandey
Course level: Beginner
Share:

Categories Video Courses
Duration 8h 5m
Total Enrolled 6
Last Update April 7, 2022

Description

In this course, you will learn to develop any kind of modern website using HTML, CSS, Bootstrap 5 and ReactJs.

We will also learn about Redux state management with Context API to hide show functionality based on User session.

We will start by setting up our local development environment, first we will learn to install Visual Studio Code editor, then we will go ahead and install NodeJS runtime.

We will be consuming Remote REST API to perform various operations with the help of GET, POST, PUT, DELETE endpoints.

Next we will move on to creating the first react app, then we will move on to understanding how a create application work.

We will understand the folder structure of the ReactJs project and understand the ReactJs lifecycle and how different aspects works.

We will then move on to integrating Bootstrap 5, Font Awesome, Google Fonts, npm packages into our ReactJs project.

We will Create a complete fully functional professional website with different sections like:

Navigation Bar
Footer
Hero section with Carousel and Slider
Featured Posts section
Latest Posts section
Call to Action section
Our Portfolio section
Contact us form
About us page
Footer section with different parts like Quick Links, Newsletter and Contact Address
Create Posts
All Posts
Update Post
Delete Post
Login
Signup
Dynamic navigation
Redux , Context API

We will make sure our website is professional and responsive in different kinds of devices.

After this course, you will be a pro frontend developer in modern web technologies.

What Will I Learn?

You will learn everything about Bootstrap 5 and how to use different Bootstrap css classes
You will learn about ReactJs and its concepts and how to use Bootstrap 5 with ReactJs
You will learn to create a fully functional website using Bootstrap5 with ReactJs with Login and Signup
You will learn to integrate GET, POST, PUT, DELETE REST API's with ReactJs Application using Fetch and Axios library
You will learn about Redux state management and Context API and how to use them together
You will learn to use Google Fonts and Font Awesome Icons
You will learn about Responsive Web Development
You will learn the debugging and troubleshooting techniques

Topics for this course

67 Lessons8h 5m

Section 1: Introduction & Setup

Lecture 1: Course Introduction00:2:00

Lecture 2: Install Visual Studio Code editor00:1:2

Lecture 3: Installing NodeJS runtime00:1:26

Lecture 4: Create React App and Start Dev Server00:2:30

Lecture 5: Understanding React Project Structure & Lifecycle00:4:53

Lecture 6: Integrating Bootstrap5 Google fonts and FontAwesome00:4:12

Section 2: Designing NavBar, Aboutus, Contactus with routing

Section 3: Designing Footer, Home Page & Call to Action

Section 4: Working on All Posts and Post Detail with REST API Integration

Section 5: Working on Create, Edit, Delete Post functionality with API Integration

Section 6: Working on Signup, Login & Logout with API Integration

Section 7: User Session, Dynamic Menu, Redux, Context API

$3.99

Requirements

Basics of HTML

Target Audience

Any one who wants to become a job ready Frontend Developer with ReactJs, Redux, Bootstrap 5 and API integration

Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API

Description

What Will I Learn?

Topics for this course

Section 1: Introduction & Setup

Lecture 1: Course Introduction00:2:00

Lecture 2: Install Visual Studio Code editor00:1:2

Lecture 3: Installing NodeJS runtime00:1:26

Lecture 4: Create React App and Start Dev Server00:2:30

Lecture 5: Understanding React Project Structure & Lifecycle00:4:53

Lecture 6: Integrating Bootstrap5 Google fonts and FontAwesome00:4:12

Section 2: Designing NavBar, Aboutus, Contactus with routing

Lecture 7: Creating 1st React Component The NavBar00:4:2

Lecture 8: Styling NavBar Component with Bootstrap5 NavBar00:3:41

Lecture 9: Customizing NavBar Menu00:4:22

Lecture 10: Creating About and Contact page00:4:56

Lecture 11: Installing npm package for react-router-dom00:5:4

Lecture 12: Adding Routing for All the components00:7:27

Lecture 13: Single Page behaviour on menu items click with NavLink00:5:45

Lecture 14: Designing Aboutus Page Header Section00:10:55

Lecture 15: Designing Aboutus Page Content Section00:9:15

Lecture 16: Styling our Contact us Form with Bootstrap – part 100:15:42

Lecture 17: Styling our Contact us Form with Bootstrap – part 200:11:1

Section 3: Designing Footer, Home Page & Call to Action

Lecture 18: Designing Footer Section Layout – Part 100:8:8

Lecture 19: Designing Footer Section Heading – Part 200:11:42

Lecture 20: Designing Footer Quick Links – Part 300:12:50

Lecture 21: Designing Footer Newsletter – Part 400:7:2

Lecture 22: Designing Footer Contact Address – Part 500:4:47

Lecture 23: Home Page Layout00:2:26

Lecture 24: Designing Home Page Hero Section Slider00:8:11

Lecture 25: Designing Home Page Featured Post Section00:8:00

Lecture 26: Designing Home Page Latest Post Section00:3:32

Lecture 27: Designing Home Page Portfolio Section00:5:44

Lecture 28: Add Home Link to the Nav Bar00:1:18

Lecture 29: Designing Call To Action section00:12:30

Section 4: Working on All Posts and Post Detail with REST API Integration

Lecture 30: Create All Post page and Link to NavBar navigation00:2:8

Lecture 31: Designing All Posts Page00:2:18

Lecture 32: Understanding REST API for Getting Post Data00:4:36

Lecture 33: React Hooks useState and useEffect to call Posts API and store data on page l00:12:00

Lecture 34: Show Posts data on UI by Looping all data00:8:54

Lecture 35: Showing Loading icon while the data is Fetched from the REST API00:6:15

Lecture 36: Adding API Base Url to config file and using it everywhere00:3:12

Lecture 37: Dynamic Routing passing data from one component to another00:9:2

Lecture 38: Get Post and User data from REST API call00:10:32

Lecture 39: Design Layout of Post Detail page00:10:13

Lecture 40: Destructing and setting Post and User data from Response to State variables00:9:57

Lecture 41: Displaying Post and User information on Screen00:3:22

Lecture 42: Styling the Post Detail and All Posts image00:7:7

Lecture 43: Implementing opening email and phone functionality00:5:34

Section 5: Working on Create, Edit, Delete Post functionality with API Integration

Lecture 44: Implementing Create Post functionality00:16:46

Lecture 45: Alert message for Success and error scenarios00:7:6

Lecture 46: Update All Posts with Edit and Delete buttons00:5:41

Lecture 47: Edit Post reuse the Create Post flow00:20:23

Lecture 48: Testing edit and Create Post functionality00:5:53

Lecture 49: Delete Post and Show Alert message after deletion00:11:9

Lecture 50: Delete Confirmation Yes or No00:3:35

Lecture 51: Reload All Posts after deletion00:2:24

Lecture 52: Add a back button on Post Detail screen00:2:23

Section 6: Working on Signup, Login & Logout with API Integration

Lecture 53: Creating Login and Signup screen with navigation00:9:52

Lecture 54: Axios Post Call for User Registration00:19:18

Lecture 55: Saving User data and Show success Alert Message00:10:52

Lecture 56: Clearing Signup Form Data after login00:1:39

Lecture 57: User Login with API call00:9:8

Lecture 58: Storing User data and Token secret in localStorage00:10:28

Section 7: User Session, Dynamic Menu, Redux, Context API

Lecture 59: What is Redux and Why we need it00:3:41

Lecture 60: Define User Reducer with different actions00:4:20

Lecture 61: Props VS Context API00:8:48

Lecture 62: Implement Restricted Routes based on User Session with Context API and Redux00:13:1

Lecture 63: Dispatch Action to Reducer after successful login00:4:56

Lecture 64: Implementing Logout Functionality00:6:38

Lecture 65: Implement Dynamic Menu based on User session00:8:52

Lecture 66: Get All Posts For Logged in User00:13:45

Lecture 67: Testing All Functionality End to End00:4:49

Login

Requirements