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