Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Learn how to put it all together.
Welcome to “MERN Stack Front To Back”. In this course we will build an in depth full stack social network application using Node.js, Express, React, Redux and MongoDB along with ES6+. We will start with a bank text editor and end with a deployed full stack application. This course includes…
- Building an extensive backend API with Node.js & Express
- Protecting routes/endpoints with JWT (JSON Web Tokens)
- Extensive API testing with Postman
- Integrating React with our backend in an elegant way, creating a great workflow
- Building our frontend to work with the API
- Using Redux for app state management
- Creating reducers and actions for our resources
- Creating many container components that integrate with Redux
- Testing with the Redux Chrome extension
Creating a build script, securing our keys and deploy to Heroku using Git
This is NOT an “Intro to React” or “Intro to Node” course. It is a practical hands on course for building an app using the incredible MERN stack. I do try and explain everything as I go so it is possible to follow without React/Node experience but it is recommended that you know at least the basics first.
This is NOT an “Intro to React” or “Intro to Node” course. It is a practical hands on course for building an app using the incredible MERN stack. I do try and explain everything as I go so it is possible to follow without React/Node experience but it is recommended that you know at least the basics first.
What Will I Learn?
- Build a full stack social network app with React, Redux, Node, Express & MongoDB
- Create an extensive backend API with Express
- Use Stateless JWT authentication practices
- Integrate React with an Express backend in an elegant way
- Use Redux for state management
- Deploy to Heroku with a postbuild script
Table of Contents
Introduction
1 Welcome To The Course
2 A Look At the Main App
3 Before We Begin
4 VSCode Setup
1 Welcome To The Course
2 A Look At the Main App
3 Before We Begin
4 VSCode Setup
Basic Express Setup
5 MongoDB Setup With mLab
6 Install Dependencies Basic Server Setup
7 Connecting To MongoDB With Mongoose
8 Route Files With Express Router
5 MongoDB Setup With mLab
6 Install Dependencies Basic Server Setup
7 Connecting To MongoDB With Mongoose
8 Route Files With Express Router
User API Routes JWT Authentication
9 Creating The User Model
10 User Registration Postman
11 Email Password Login
12 Creating The JWT
13 Passport JWT Authentication Strategy
14 Validation Handlers – 1
15 Validation Handlers – 2
9 Creating The User Model
10 User Registration Postman
11 Email Password Login
12 Creating The JWT
13 Passport JWT Authentication Strategy
14 Validation Handlers – 1
15 Validation Handlers – 2
Profile API Routes
16 Aside – Front End Visual
17 Creating The Profile Model
18 Current User Profile Route
19 Create Update Profile Routes
20 Profile Field Validations
21 More Profile API Routes
22 Add Experience Education Routes
23 Delete Education Experience Routes
16 Aside – Front End Visual
17 Creating The Profile Model
18 Current User Profile Route
19 Create Update Profile Routes
20 Profile Field Validations
21 More Profile API Routes
22 Add Experience Education Routes
23 Delete Education Experience Routes
Post API Routes
24 Creating The Post Model
25 Post Create Route
26 Get Delete Post Routes
27 Post Like Unlike Routes
28 Add Remove Comment Routes
24 Creating The Post Model
25 Post Create Route
26 Get Delete Post Routes
27 Post Like Unlike Routes
28 Add Remove Comment Routes
Getting Started With React The Frontend
29 A Look At The Bootstrap Theme UI
30 Implementing React
31 Bootstrap Assets Setup
32 Basic Layout
29 A Look At The Bootstrap Theme UI
30 Implementing React
31 Bootstrap Assets Setup
32 Basic Layout
React Router Component State
33 React Router Setup (v4)
34 Creating The Register Form With State
35 Creating The Login Form With State
36 Testing Registration With Our Form – No Redux Yet
37 Error Handling Display
33 React Router Setup (v4)
34 Creating The Register Form With State
35 Creating The Login Form With State
36 Testing Registration With Our Form – No Redux Yet
37 Error Handling Display
Redux Authentication
38 Why We Need Redux
39 Redux Store Chrome Extension Setup
40 Redux Action Reducer Workflow Example
41 Registration The Error Reducer
42 Redux Login Action Set Current User
43 Login Form Functionality
44 Logout Conditional Navbar Links
38 Why We Need Redux
39 Redux Store Chrome Extension Setup
40 Redux Action Reducer Workflow Example
41 Registration The Error Reducer
42 Redux Login Action Set Current User
43 Login Form Functionality
44 Logout Conditional Navbar Links
Dashboard Profile State – Part 1
45 TextFieldGroupInput Component
46 Profile Reducer Get Current Profile
47 Spinner Component Dashboard Start
48 Private Route Setup
49 CreateProfile Component Route
50 Form Field Components
51 Create Profile Form
52 Create Profile Functionality
45 TextFieldGroupInput Component
46 Profile Reducer Get Current Profile
47 Spinner Component Dashboard Start
48 Private Route Setup
49 CreateProfile Component Route
50 Form Field Components
51 Create Profile Form
52 Create Profile Functionality
Dashboard Profile State – Part 2
53 Profile Actions Component Delete Account
54 Edit Profile Component
55 Add Experience Form
56 Add Experience Functionality
57 Add Education Form Functionality
58 Dashboard Experience Display Delete
59 Dashboard Education Display Delete
53 Profile Actions Component Delete Account
54 Edit Profile Component
55 Add Experience Form
56 Add Experience Functionality
57 Add Education Form Functionality
58 Dashboard Experience Display Delete
59 Dashboard Education Display Delete
Profile Display
60 Profiles Component getProfiles Action
61 Profile Items
62 Profile By Handle Sub Components
63 Profile Header
64 Profile About Credentials
65 Profile Github Touch Ups
60 Profiles Component getProfiles Action
61 Profile Items
62 Profile By Handle Sub Components
63 Profile Header
64 Profile About Credentials
65 Profile Github Touch Ups
Posts Comments
66 Post State addPost Action
67 Posts Post Form Component
68 getPosts Action PostFeed Component
69 Post Item Component
70 Delete Like Unlike Posts
71 Single Post Display
72 Comment Form Component Action
73 Comment Display Delete
66 Post State addPost Action
67 Posts Post Form Component
68 getPosts Action PostFeed Component
69 Post Item Component
70 Delete Like Unlike Posts
71 Single Post Display
72 Comment Form Component Action
73 Comment Display Delete
Prepare Deploy
74 Securing Our Keys
75 Heroku Setup
76 Post Build Deployment
74 Securing Our Keys
75 Heroku Setup
76 Post Build Deployment
MERN Stack Front To Back: Full Stack React, Redux & Node.js
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 16.5 Hours | 8.23 GB
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 16.5 Hours | 8.23 GB
Download from Turbobit
Download from DepositFiles
Download from Rapidgator
Awesome blog.Keep on sharing this type of articles.
ReplyDeleteFull Stack online Training
Full Stack Training
Full Stack Developer Online Training
Great article. Thanks for sharing.
ReplyDeleteMern stack online training
great java tips At SynergisticIT we offer the best java training in california
ReplyDelete