Hellow guys, Welcome to my website, and you are watching MERN Full Stack Project: Build a Blog App with Dashboard using MERN (jwt, redux toolkit). and this vIdeo is uploaded by React & Next js Projects with Sahand at 2024-01-15T18:59:36-08:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
| Name | MERN Full Stack Project: Build a Blog App with Dashboard using MERN (jwt, redux toolkit) |
| Video Uploader | Video From React & Next js Projects with Sahand |
| Upload Date | This Video Uploaded At 15-01-2024 21:59:36 |
| Video Discription | Check out https://brilliant.org/Sahand đ if you're looking to become an expert in a programming language and solve real-world problems. Start your 30 day free trial with the link (and if you're one of the first 200 people, you'll also get an extra 20% off too). Hello my friends đ welcome to the Full Stack MERN Blog Project Course! đ Let's start an exciting journey together as we create a powerful and fully responsive MERN stack web app with cutting-edge features. Throughout this course, you'll become an expert in the latest version of React, MongoDB, Node.js, and Express. Source code and final version: https://github.com/sahandghavidel/mern-blog đ ī¸ Our adventure kicks off with setting up React.js and Tailwind CSS, followed by navigating React Router Dom for dynamic pages. We'll dive deep into robust authentication using JSON Web Tokens and Google OAuth integration, all powered by Redux Toolkit for easy state management. đ Secure both the client and backend for specific pages, like the admin dashboard. Admins gain the ability to effortlessly manage posts, comments, and users, complete with CRUD operations using the MongoDB database. The website is meticulously designed to be completely responsive, ensuring a seamless experience across various devices. Plus, we've added a sleek dark mode to enhance user experience and cater to different preferences. đ What sets this course apart is the addition of advanced search functionality. Users can search by title, limit results, and sort through a modern sidebar, utilizing cutting-edge search query techniques with MongoDB. Everyone has the ability to leave, edit, and delete their comments on the post pages, fostering an interactive community. đ Finally, we'll deploy our fully functional MERN stack blog application for free using the 'render' platform, enabling you to share your creation and add it to your portfolio. đģ All you need is a basic understanding of JavaScript and React to start this project. If you're as excited as we are, let's dive in and build this incredible project together! Subscribe, hit the bell, and join us on this coding adventure. đ⨠#MERNStack #WebDevelopment #codingjourney 00:00 - Intro 01:50 - Project preview 07:00 - The resources 08:57 - Install React.js and Tailwind CSS and create the first template 21:01 - Create pages and routes 28:42 - Create Header components 53:14 06 - Create and run the server 01:00:55 - Connect to the database 01:12:36 - Create user model 01:18:31 - Create a test API route 01:25:40 - Create signup API route 01:42:55 - Add a middleware and a function to handle errors 01:49:59 - Create signup page UI 02:04:48 - Add functionality to the sign up page 02:21:17 - Create and add the footer component 02:36:06 - Create signin API route 02:48:19 - Complete signin page functionality - MERN Blog 02:53:26 - Add redux toolkit 03:07:58 - Add redux persist 03:14:23 - Add Google OAuth functionality 03:38:16 - Update header component with user data 03:45:10 - Complete dark mode functionality 03:53:15 - Make the dashboard private 03:56:17 - Complete sidebar of the dashboard 04:08:18 - Complete profile page UI 04:16:32 - Complete user image upload functionality 04:41:25 - Add update user API route 04:58:53 - Complete update user profile page functionality 05:14:42 - Add delete user API route 05:18:50 - Complete delete user account functionality 05:28:54 - Add signout functionality 05:37:43 - text31 - Add admin functionality to the user 05:43:53 - Complete create a post page UI 06:01:43 - Add create a post API route 06:14:13 - Complete upload post image functionality 06:24:39 - Complete create post functionality 06:33:05 - Add posts section to the dashboard 06:37:31 - Create get posts API route 06:48:40 - Show user posts inside dashboard 07:03:42 - Add show more functionality to the posts results of the dashboard 07:08:12 - Add delete post functionality to the dashboard 07:15:37 - Add update post functionality 07:26:34 - Create get users API route 07:33:16 - Show users to the admin dashboard 07:46:08 - Add delete user functionality to the admin user 07:50:17 - Complete post page functionality 08:13:18 - Add call to action to the post page 08:22:06 - Add comment section to the post page 08:46:05 - Show the comments of a post 09:06:37 - Add like functionality to the comment component 09:23:59 - Add edit functionality to the comment component 09:39:01 - Add delete functionality to the comment section 09:49:18 - Add recent article section to the post page 10:08:16 - Add comments section to the admin dashboard 10:22:23 - Add dashboard overview to the admin dashboard 10:47:39 - Complete the home page 10:59:03 - Complete search page 11:31:55 - Complete about and projects pages 11:37:58 - Deploy to Render |
| Category | Education |
| Tags | Full Stack MERN Blog Project Course | React | MongoDB | Node.js | Express | Web Development | JavaScript | Redux Toolkit | Tailwind CSS | Authentication | CRUD Operations | Advanced Search | Dark Mode | 'render' Platform | Coding Journey | JSON Web Tokens | Admin Dashboard | Portfolio Development | Cutting-edge Features | Frontend Development | Backend Security | Web App Deployment | JavaScript Mastery | React Router Dom | State Management | Dark Mode Implementation |
