Booking options
£107.99
Course Images
MERN Stack Front To Back: Full Stack React, Redux and Node.js
By Packt
- 30 Day Money Back Guarantee
- Completion Certificate
- 24/7 Technical Support
Highlights
On-Demand course
16 hours 24 minutes
All levels
Description
Build and deploy a social network with Node.js, Express, React, Redux and MongoDB. Learn how to put it all together
In this course you will build an in depth full stack social network application using Node.js, Express, React, Redux and MongoDB along with ES6+. You will start with a bank text editor and end with a deployed full stack application.
What You Will 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 post-build script
Audience
Anyone that wants to learn how to build and deploy a full stack MERN application
Approach
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. The author tries and explains everything as he goes so it is possible to follow without React/Node experience but it is recommended that you know at least the basics first.
Key Features
- 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
Github Repo
https://github.com/packtpublishing/mern-stack-front-to-back-full-stack-react-redux-and-node.js
About the Author
Brad Traversy
Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.
Course Outline
1. Introduction
1. Welcome To the Course Introduction: Welcome To the Course |
2. A Look at the Main App Introduction: A Look at the Main App |
3. Before We Begin Introduction: Before We Begin |
4. VSCode Setup Introduction: VSCode Setup |
2. Basic Express Setup
1. MongoDB Setup With mLab Basic Express Setup: MongoDB Setup With mLab |
2. Install Dependencies & Basic Server Setup Basic Express Setup: Install Dependencies & Basic Server Setup |
3. Connecting To MongoDB with Mongoose Basic Express Setup: Connecting To MongoDB with Mongoose |
4. Route Files with Express Router Basic Express Setup: Route Files with Express Router |
3. User API Routes & JWT Authentication
1. Creating the User Model User API Routes & JWT Authentication: Creating the User Model |
2. User Registration & Postman User API Routes & JWT Authentication: User Registration & Postman |
3. Email & Password Login User API Routes & JWT Authentication: Email & Password Login |
4. Creating the JWT User API Routes & JWT Authentication: Creating the JWT |
5. Passport JWT Authentication Strategy User API Routes & JWT Authentication: Passport JWT Authentication Strategy |
6. Validation Handlers - 1 User API Routes & JWT Authentication: Validation Handlers - 1 |
7. Validation Handlers - 2 User API Routes & JWT Authentication: Validation Handlers - 2 |
4. Profile API Routes
1. Aside - Front End Visual Profile API Routes: Aside - Front End Visual |
2. Creating the Profile Model Profile API Routes: Creating the Profile Model |
3. Current User Profile Route Profile API Routes: Current User Profile Route |
4. Create & Update Profile Routes Profile API Routes: Create & Update Profile Routes |
5. Profile Field Validations Profile API Routes: Profile Field Validations |
6. More Profile API Routes Profile API Routes: More Profile API Routes |
7. Add Experience & Education Routes Profile API Routes: Add Experience & Education Routes |
8. Delete Education & Experience Routes Profile API Routes: Delete Education & Experience Routes |
5. Post API Routes
1. Creating the Post Model Post API Routes: Creating the Post Model |
2. Post Create Route Post API Routes: Post Create Route |
3. Get & Delete Post Routes Post API Routes: Get & Delete Post Routes |
4. Post Like & Unlike Routes Post API Routes: Post Like & Unlike Routes |
5. Add & Remove Comment Routes Post API Routes: Add & Remove Comment Routes |
6. Getting Started With React & the Frontend
1. A Look at the Bootstrap Theme & UI Getting Started With React & the Frontend: A Look at the Bootstrap Theme & UI |
2. Implementing React Getting Started With React & the Frontend: Implementing React |
3. Bootstrap & Assets Setup Getting Started With React & the Frontend: Bootstrap & Assets Setup |
4. Basic Layout Getting Started With React & the Frontend: Basic Layout |
7. React Router & Component State
1. React Router Setup (v4) React Router & Component State: React Router Setup (v4) |
2. Creating the Register Form with State React Router & Component State: Creating the Register Form with State |
3. Creating the Login Form with State React Router & Component State: Creating the Login Form with State |
4. Testing Registration with Our Form - No Redux Yet React Router & Component State: Testing Registration with Our Form - No Redux Yet |
5. Error Handling & Display React Router & Component State: Error Handling & Display |
8. Redux & Authentication
1. Why We Need Redux Redux & Authentication: Why We Need Redux |
2. Redux Store & Chrome Extension Setup Redux & Authentication: Redux Store & Chrome Extension Setup |
3. Redux Action & Reducer Workflow Example Redux & Authentication: Redux Action & Reducer Workflow Example |
4. Registration & the Error Reducer Redux & Authentication: Registration & the Error Reducer |
5. Redux Login Action & Set Current User Redux & Authentication: Redux Login Action & Set Current User |
6. Login Form Functionality Redux & Authentication: Login Form Functionality |
7. Logout & Conditional Navbar Links Redux & Authentication: Logout & Conditional Navbar Links |
9. Dashboard & Profile State - Part 1
1. TextFieldGroupInput Component Dashboard & Profile State - Part 1: Text: Dashboard & Profile State - Part 1: |
2. Profile Reducer & Get Current Profile Dashboard & Profile State - Part 1: Profile Reducer & Get Current Profile |
3. Spinner Component & Dashboard Start Dashboard & Profile State - Part 1: Spinner Component & Dashboard Start |
4. Private Route Setup Dashboard & Profile State - Part 1: Private Route Setup |
5. CreateProfile Component & Route Dashboard & Profile State - Part 1: CreateProfile Component & Route |
6. Form Field Components Dashboard & Profile State - Part 1: Form Field Components |
7. Create Profile Form Dashboard & Profile State - Part 1: Create Profile Form |
8. Create Profile Functionality Dashboard & Profile State - Part 1: Create Profile Functionality |
10. Dashboard & Profile State - Part 2
1. Profile Actions Component & Delete Account Dashboard & Profile State - Part 2: Profile Actions Component & Delete Account |
2. Edit Profile Component Dashboard & Profile State - Part 2: Edit Profile Component |
3. Add Experience Form Dashboard & Profile State - Part 2: Add Experience Form |
4. Add Experience Functionality Dashboard & Profile State - Part 2: Add Experience Functionality |
5. Add Education Form & Functionality Dashboard & Profile State - Part 2: Add Education Form & Functionality |
6. Dashboard Experience Display & Delete Dashboard & Profile State - Part 2: Dashboard Experience Display & Delete |
7. Dashboard Education Display & Delete Dashboard & Profile State - Part 2: Dashboard Education Display & Delete |
11. Profile Display
1. Profiles Component & getProfiles Action Profile Display: Profiles Component & getProfiles Action |
2. Profile Items Profile Display: Profile Items |
3. Profile By Handle & Sub Components Profile Display: Profile By Handle & Sub Components |
4. Profile Header Profile Display: Profile Header |
5. Profile About & Credentials Profile Display: Profile About & Credentials |
6. Profile Github & Touch Ups Profile Display: Profile Github & Touch Ups |
12. Posts & Comments
1. Post State & addPost Action Posts & Comments: Post State & addPost Action |
2. Posts & Post Form Component Posts & Comments: Posts & Post Form Component |
3. getPosts Action & PostFeed Component Posts & Comments: getPosts Action & PostFeed Component |
4. Post Item Component Posts & Comments: Post Item Component |
5. Delete, Like & Unlike Posts Posts & Comments: Delete, Like & Unlike Posts |
6. Single Post Display Posts & Comments: Single Post Display |
7. Comment Form Component & Action Posts & Comments: Comment Form Component & Action |
8. Comment Display & Delete Posts & Comments: Comment Display & Delete |
13. Prepare & Deploy
1. Securing Our Keys Prepare & Deploy: Securing Our Keys |
2. Heroku Setup Prepare & Deploy: Heroku Setup |
3. Post Build & Deployment Prepare & Deploy: Post Build & Deployment |
Course Content
- MERN Stack Front To Back: Full Stack React, Redux and Node.js
About The Provider
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Reviews
There are no reviews for MERN Stack Front To Back: Full Stack React, Redux and Node.js yet.Why not be the first one to review this course?