MERN Stack Front To Back: Full Stack React, Redux & Node.js.
Course description
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 blank text editor and end with a deployed full stack application.
Read more about the course
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
UPDATE: The entire course was updated to use React Hooks, Async/Await and better overall code.
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.
Requirements:
A good understanding of JavaScript & ES6 Fundamentals
React & Node Basics
- Anyone that wants to learn how to build and deploy a full stack MERN application
What you'll 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
- React Hooks, Async/Await & modern practices
- Use Redux for state management
- Deploy to Heroku with a postbuild script
Watch Online
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Welcome To The Course | 03:30 |
| 2 | A Look At The Course Project | 05:23 |
| 3 | Environment & Setup | 06:34 |
| 4 | MongoDB Atlas Setup | 06:15 |
| 5 | Install Dependencies & Basic Express Setup | 08:08 |
| 6 | Connecting To MongoDB With Mongoose | 07:06 |
| 7 | Route Files With Express Router | 07:56 |
| 8 | Creating The User Model | 04:23 |
| 9 | Request & Body Validation | 09:51 |
| 10 | User Registration | 14:14 |
| 11 | Implementing JWT | 10:04 |
| 12 | Custom Auth Middleware & JWT Verify | 12:32 |
| 13 | User Authentication / Login Route | 09:40 |
| 14 | Creating The Profile Model | 05:20 |
| 15 | Get Current User Profile | 06:46 |
| 16 | Create & Update Profile Routes | 21:24 |
| 17 | Get All Profiles & Profile By User ID | 12:04 |
| 18 | Delete Profile & User | 06:20 |
| 19 | Add Profile Experience | 11:45 |
| 20 | Delete Profile Experience | 06:50 |
| 21 | Add & Delete Profile Education | 07:19 |
| 22 | Get Github Repos For Profile | 09:06 |
| 23 | Creating The Post Model | 05:49 |
| 24 | Add Post Route | 11:16 |
| 25 | Get & Delete Post Routes | 12:13 |
| 26 | Post Like & Unlike Routes | 11:24 |
| 27 | Add & Remove Comment Routes | 13:23 |
| 28 | A Look At The The UI / Theme | 06:12 |
| 29 | React & Concurrently Setup | 05:43 |
| 30 | Clean Up & Initial Components | 06:29 |
| 31 | React Router Setup | 06:16 |
| 32 | Register Form & useState Hook | 09:01 |
| 33 | Request Example & Login Form | 08:38 |
| 34 | The Gist Of Redux | 05:47 |
| 35 | Creating a Redux Store | 07:30 |
| 36 | Alert Reducer, Action & Types | 11:48 |
| 37 | Alert Component & Action Call | 17:49 |
| 38 | Auth Reducer & Register Action | 19:02 |
| 39 | Load User & Set Auth Token | 14:26 |
| 40 | User Login | 13:55 |
| 41 | Logout & Navbar Links | 09:34 |
| 42 | Protected Route For Dashboard | 10:23 |
| 43 | Profile Reducer & Get Current Profile | 13:33 |
| 44 | Starting On The Dashboard | 15:27 |
| 45 | CreateProfile Component | 11:33 |
| 46 | Create Profile Action | 14:00 |
| 47 | Edit Profile | 14:46 |
| 48 | Add Education & Experiences | 22:56 |
| 49 | List Education & Experiences | 13:18 |
| 50 | Delete Education, Experiences & Account | 16:31 |
| 51 | Finish Profile Actions & Reducer | 08:10 |
| 52 | Display Profiles | 17:14 |
| 53 | Addressing The Console Warnings | 04:13 |
| 54 | Starting On The Profile | 10:59 |
| 55 | ProfileTop & ProfileAbout Components | 14:55 |
| 56 | Profile Experience & Education Display | 10:21 |
| 57 | Displaying Github Repos | 11:29 |
| 58 | Post Reducer, Action & Initial Component | 12:16 |
| 59 | Post Item Component | 12:27 |
| 60 | Like & Unlike Functionality | 09:29 |
| 61 | Deleting Posts | 05:54 |
| 62 | Adding Posts | 10:22 |
| 63 | Single Post Display | 13:05 |
| 64 | Adding Comments | 12:21 |
| 65 | Comment Display & Delete | 10:49 |
| 66 | Install Heroku CLI | 03:55 |
| 67 | Prepare For Deployment | 07:07 |
| 68 | Deploy To Heroku | 07:54 |
| 69 | Not Found Page & Theme Workaround | 08:17 |
Comments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Node with React: Fullstack Web Development
Node.js, Express, MongoDB Bootcamp 2020 - with Real Projects
React: Flux Architecture (ES6)
