Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API

Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API

Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API

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

Language: english

Note: 4.8/5 (11 notes) 5,108 students

Instructor(s): Obify Consulting

Last update: 2022-04-07

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

 

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

 

Course content

  • Introduction & Setup
    • Course Introduction
    • Install Visual Studio Code editor
    • Installing NodeJS runtime
    • Create React App and Start Dev Server
    • Understanding React Project Structure & Lifecycle
    • Integrating Bootstrap5 Google fonts and FontAwesome
  • Designing NavBar, Aboutus, Contactus with routing
    • Creating 1st React Component The NavBar
    • Styling NavBar Component with Bootstrap5 NavBar
    • Customizing NavBar Menu
    • Creating About and Contact page
    • Installing npm package for react-router-dom
    • Adding Routing for All the components
    • Single Page behaviour on menu items click with NavLink
    • Designing Aboutus Page Header Section
    • Designing Aboutus Page Content Section
    • Styling our Contact us Form with Bootstrap – part 1
    • Styling our Contact us Form with Bootstrap – part 2
  • Designing Footer, Home Page & Call to Action
    • Designing Footer Section Layout – Part 1
    • Designing Footer Section Heading – Part 2
    • Designing Footer Quick Links – Part 3
    • Designing Footer Newsletter – Part 4
    • Designing Footer Contact Address – Part 5
    • Home Page Layout
    • Designing Home Page Hero Section Slider
    • Designing Home Page Featured Post Section
    • Designing Home Page Latest Post Section
    • Designing Home Page Portfolio Section
    • Add Home Link to the Nav Bar
    • Designing Call To Action section
  • Working on All Posts and Post Detail with REST API Integration
    • Create All Post page and Link to NavBar navigation
    • Designing All Posts Page
    • Understanding REST API for Getting Post Data
    • React Hooks useState and useEffect to call Posts API and store data on page l
    • Show Posts data on UI by Looping all data
    • Showing Loading icon while the data is Fetched from the REST API
    • Adding API Base Url to config file and using it everywhere
    • Dynamic Routing passing data from one component to another
    • Get Post and User data from REST API call
    • Design Layout of Post Detail page
    • Destructing and setting Post and User data from Response to State variables
    • Displaying Post and User information on Screen
    • Styling the Post Detail and All Posts image
    • Implementing opening email and phone functionality
  • Working on Create, Edit, Delete Post functionality with API Integration
    • Implementing Create Post functionality
    • Alert message for Success and error scenarios
    • Update All Posts with Edit and Delete buttons
    • Edit Post reuse the Create Post flow
    • Testing edit and Create Post functionality
    • Delete Post and Show Alert message after deletion
    • Delete Confirmation Yes or No
    • Reload All Posts after deletion
    • Add a back button on Post Detail screen
  • Working on Signup, Login & Logout with API Integration
    • Creating Login and Signup screen with navigation
    • Axios Post Call for User Registration
    • Saving User data and Show success Alert Message
    • Clearing Signup Form Data after login
    • User Login with API call
    • Storing User data and Token secret in localStorage
  • User Session, Dynamic Menu, Redux, Context API
    • What is Redux and Why we need it
    • Define User Reducer with different actions
    • Props VS Context API
    • Implement Restricted Routes based on User Session with Context API and Redux
    • Dispatch Action to Reducer after successful login
    • Implementing Logout Functionality
    • Implement Dynamic Menu based on User session
    • Get All Posts For Logged in User
    • Testing All Functionality End to End

 

Time remaining or 936 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate