Mega Web Dev Bootcamp with React Bootstrap5 Redux & REST API
- Description
- Curriculum
- FAQ
- Reviews
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.
-
1Course IntroductionVideo lesson
-
2Know Your Instructor & Get Help/SupportText lesson
-
3Install Visual Studio Code editorVideo lesson
-
4Installing NodeJS runtimeVideo lesson
-
5Create React App and Start Dev ServerVideo lesson
-
6Understanding React Project Structure & LifecycleVideo lesson
-
7Integrating Bootstrap5 Google fonts and FontAwesomeVideo lesson
-
8Creating 1st React Component The NavBarVideo lesson
-
9Styling NavBar Component with Bootstrap5 NavBarVideo lesson
-
10Customizing NavBar MenuVideo lesson
-
11Creating About and Contact pageVideo lesson
-
12Installing npm package for react-router-domVideo lesson
-
13Adding Routing for All the componentsVideo lesson
-
14Single Page behaviour on menu items click with NavLinkVideo lesson
-
15Designing Aboutus Page Header SectionVideo lesson
-
16Designing Aboutus Page Content SectionVideo lesson
-
17Styling our Contact us Form with Bootstrap - part 1Video lesson
-
18Styling our Contact us Form with Bootstrap - part 2Video lesson
-
19Designing Footer Section Layout - Part 1Video lesson
-
20Designing Footer Section Heading - Part 2Video lesson
-
21Designing Footer Quick Links - Part 3Video lesson
-
22Designing Footer Newsletter - Part 4Video lesson
-
23Designing Footer Contact Address - Part 5Video lesson
-
24Home Page LayoutVideo lesson
-
25Designing Home Page Hero Section SliderVideo lesson
-
26Designing Home Page Featured Post SectionVideo lesson
-
27Designing Home Page Latest Post SectionVideo lesson
-
28Designing Home Page Portfolio SectionVideo lesson
-
29Add Home Link to the Nav BarVideo lesson
-
30Designing Call To Action sectionVideo lesson
-
31Create All Post page and Link to NavBar navigationVideo lesson
-
32Designing All Posts PageVideo lesson
-
33Understanding REST API for Getting Post DataVideo lesson
-
34React Hooks useState and useEffect to call Posts API and store data on page lVideo lesson
-
35Show Posts data on UI by Looping all dataVideo lesson
-
36Showing Loading icon while the data is Fetched from the REST APIVideo lesson
-
37Adding API Base Url to config file and using it everywhereVideo lesson
-
38Dynamic Routing passing data from one component to anotherVideo lesson
-
39Get Post and User data from REST API callVideo lesson
-
40Design Layout of Post Detail pageVideo lesson
-
41Destructing and setting Post and User data from Response to State variablesVideo lesson
-
42Displaying Post and User information on ScreenVideo lesson
-
43Styling the Post Detail and All Posts imageVideo lesson
-
44Implementing opening email and phone functionalityVideo lesson
-
45Implementing Create Post functionalityVideo lesson
-
46Alert message for Success and error scenariosVideo lesson
-
47Update All Posts with Edit and Delete buttonsVideo lesson
-
48Edit Post reuse the Create Post flowVideo lesson
-
49Testing edit and Create Post functionalityVideo lesson
-
50Delete Post and Show Alert message after deletionVideo lesson
-
51Delete Confirmation Yes or NoVideo lesson
-
52Reload All Posts after deletionVideo lesson
-
53Add a back button on Post Detail screenVideo lesson
-
54Creating Login and Signup screen with navigationVideo lesson
-
55Axios Post Call for User RegistrationVideo lesson
-
56Saving User data and Show success Alert MessageVideo lesson
-
57Clearing Signup Form Data after loginVideo lesson
-
58User Login with API callVideo lesson
-
59Storing User data and Token secret in localStorageVideo lesson
-
60What is Redux and Why we need itVideo lesson
-
61Define User Reducer with different actionsVideo lesson
-
62Props VS Context APIVideo lesson
-
63Implement Restricted Routes based on User Session with Context API and ReduxVideo lesson
-
64Dispatch Action to Reducer after successful loginVideo lesson
-
65Implementing Logout FunctionalityVideo lesson
-
66Implement Dynamic Menu based on User sessionVideo lesson
-
67Get All Posts For Logged in UserVideo lesson
-
68Testing All Functionality End to EndVideo lesson

External Links May Contain Affiliate Links read more