Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API

Name: Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API
Rating: 4.5 (65 reviews)

Become true Frontend Developer in 2022 with ReactJs, Bootstrap5, Redux, Context API and Consuming remote REST API's

Created byObify Consulting

Last updated 5/2023

English

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

Course content

8 sections • 69 lectures • 8h 4m total length

Course Introduction1:59
Know Your Instructor & Get Help/Support0:13
Install Visual Studio Code editor1:02
Install Visual Studio Code in your environment by downloading from your browser, selecting your operating system, and completing the install with next/finish; this editor is widely used for frontend development.
Installing NodeJS runtime1:25
Install the Node.js runtime to run JavaScript on your computer outside the browser, using the Chrome V8 engine, by downloading the long game support version and completing the installation.
Create React App and Start Dev Server2:30
Understanding React Project Structure & Lifecycle4:53
Integrating Bootstrap5 Google fonts and FontAwesome4:12

Creating 1st React Component The NavBar4:02
Styling NavBar Component with Bootstrap5 NavBar3:41
Learn to integrate a Bootstrap nav bar into a React component, fix syntax by self-closing tags, and replace class with className to resolve console warnings while customizing the menu.
Customizing NavBar Menu4:21
Customize the nav bar by removing the disabled button and the dropdown, then change the button color to Bootstrap primary blue using Font Awesome icons and remove the outline.
Creating About and Contact page4:55
Installing npm package for react-router-dom5:04
Adding Routing for All the components7:26
Single Page behaviour on menu items click with NavLink5:44
Designing Aboutus Page Header Section10:55
Designing Aboutus Page Content Section9:14
Design and populate the about us content section using bootstrap elements to add paragraphs, shadows, padding, and rounded corners for a responsive, readable layout.
Styling our Contact us Form with Bootstrap - part 115:42
Styling our Contact us Form with Bootstrap - part 211:01

Designing Footer Section Layout - Part 18:07
Designing Footer Section Heading - Part 211:41
Designing Footer Quick Links - Part 312:49
Designing Footer Newsletter - Part 47:02
Design the footer newsletter by implementing a bootstrap input with form-control, a placeholder for the newsletter, and a subscribe button, aligning vertically with flex column and justify-content center, tuning height.
Designing Footer Contact Address - Part 54:47
Build a responsive footer contact address with bootstrap 5 flex layout, including street, city, state, and a map icon, applying padding for mobile view; complete the footer section.
Home Page Layout2:26
Designing Home Page Hero Section Slider8:10
Designing Home Page Featured Post Section7:59
Designing Home Page Latest Post Section3:32
Designing Home Page Portfolio Section5:44
Design a home page portfolio section with Bootstrap, arranging images in a container, row, and columns, using gaps and padding to control spacing, and exploring dynamic images.
Add Home Link to the Nav Bar1:17
Designing Call To Action section12:29
Design a prominent call to action section on the home page using bootstrap, a container-fluid with a highlighted background, centered content, and a view all posts button for mobile-friendly navigation.

Create All Post page and Link to NavBar navigation2:08
Designing All Posts Page2:18
Understanding REST API for Getting Post Data4:35
Learn how a ready-made back-end rest api serves post data in json, and fetches it to render dynamic posts on the frontend instead of hardcoded content.
React Hooks useState and useEffect to call Posts API and store data on page l11:59
Show Posts data on UI by Looping all data8:54
Showing Loading icon while the data is Fetched from the REST API6:15
Adding API Base Url to config file and using it everywhere3:11
Create a central config file that exports an API base constant to replace hardcoded values and update in one place.
Dynamic Routing passing data from one component to another9:02
Get Post and User data from REST API call10:32
Install axios, then fetch post and user data from a REST API using axios in a react page, storing results in state and handling sequential calls.
Design Layout of Post Detail page10:13
Destructing and setting Post and User data from Response to State variables9:57
Displaying Post and User information on Screen3:21
Styling the Post Detail and All Posts image7:06
Implementing opening email and phone functionality5:34

Implementing Create Post functionality16:46
Alert message for Success and error scenarios7:05
Update All Posts with Edit and Delete buttons5:40
Add edit and delete buttons to all-posts screen, style with Bootstrap grid and flex, use uppercase labels, and enable navigation to detail and edit screens with pre-populated post data.
Edit Post reuse the Create Post flow20:22
Testing edit and Create Post functionality5:52
Delete Post and Show Alert message after deletion11:08
Delete Confirmation Yes or No3:35
Reload All Posts after deletion2:24
Add a back button on Post Detail screen2:23

Creating Login and Signup screen with navigation9:52
Build login and signup screens with simple forms, collecting full name, contact number, email, and password, and connect them via the navigation bar.
Axios Post Call for User Registration19:18
Saving User data and Show success Alert Message10:51
Learn to save user data, display a success alert, and navigate after registration by debugging inputs, handling events, and clearing the form.
Clearing Signup Form Data after login1:39
User Login with API call9:08
Simulate a user login via an api call by posting email and password, navigate to posts on success, and hide login and signup menu items after authentication.
Storing User data and Token secret in localStorage10:27

What is Redux and Why we need it3:40
Define User Reducer with different actions4:20
Props VS Context API8:48
Implement Restricted Routes based on User Session with Context API and Redux13:01
Dispatch Action to Reducer after successful login4:55
Implementing Logout Functionality6:38
Implement Dynamic Menu based on User session8:51
Get All Posts For Logged in User13:45
Implement get all posts for the current logged-in user by retrieving user data from state, passing the user id to the API, and updating navigation to show my posts.
Testing All Functionality End to End4:49

Requirements

Basics of HTML

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.

Who this course is for:

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

What you'll learn

Explore related topics

Course content

Introduction & Setup7 lectures • 16min

Designing NavBar, Aboutus, Contactus with routing11 lectures • 1hr 22min

Designing Footer, Home Page & Call to Action12 lectures • 1hr 26min

Working on All Posts and Post Detail with REST API Integration14 lectures • 1hr 35min

Working on Create, Edit, Delete Post functionality with API Integration9 lectures • 1hr 15min

Working on Signup, Login & Logout with API Integration6 lectures • 1hr 1min

User Session, Dynamic Menu, Redux, Context API9 lectures • 1hr 9min

Source Code1 lecture • 1min

Requirements

Description

Who this course is for: