Check out 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).
Hi sahand. I am using firebase for my react app. i have completed the authentication page and everything was working perfectly until now when i tried to login it doesn't allow me. I have tried all i could but i could not solve the issue. i cheked the console and it's showing the error 'third party cookies will be blocked'. I read about third party cookies and i realized this is where the problem is coming from. I checked out your realtor clone website and realized it has the same issue. How do i solve this ? Please a brother
00:06 Build a powerful, fully responsive MERN Stack web app with advanced features. 03:44 A new post and admin privileges for creating, editing, and deleting posts. 10:30 Setting up the client-side folder for react and installing necessary dependencies and Tailwind CSS 14:28 Setting up essential extensions and configurations for the project 21:41 Create authentication and primary pages 25:34 Creating pages, importing routes, and setting up navigation. 33:06 Configuring modules and plugins in MERN stack 36:32 Styling the logo and search input 44:09 Creating sign-in and menu buttons with responsive design 48:02 Implementing navigation menu and active link highlighting based on the URL path in a MERN project. 55:15 Creating a server using Express and running it on a specific port 59:14 Setting up the server and connecting to MongoDB 1:06:39 Configuring secure connection to MongoDB using environmental variables 1:10:19 Securely connecting to the database and configuring GitHub upload 1:17:34 Creating user model and test API route 1:21:23 Setting up and utilizing router and user routes for API endpoints 1:28:41 Setting up and using Insomnia for testing APIs 1:32:22 Allowing JSON input and handling error validation 1:39:22 Install and use bcrypt JS to hash and secure passwords in the backend 1:42:53 Creating middleware and error handling function 1:49:56 Creating the sign-up page UI with logo, text, and form 1:53:44 Styling and structuring a webpage 2:01:26 Creating and styling sign-up form and adding UI functionality 2:05:09 Tracking input changes and creating a form data state 2:10:40 Setting up a proxy in V to redirect requests to Local Host 3000. 2:13:34 Adding state for handling errors and loading effects. 2:19:11 Adding functionality to the sign up page 2:22:05 Creating a footer component with sections and a social media icons 2:27:56 Creating sections for 'Follow Us' and 'Legal' with corresponding links and text. 2:31:04 Adding footer with copyright, dynamic year, and social media icons 2:37:16 User authentication and error handling process 2:40:07 Using JWT for user authentication 2:45:36 Creating and testing user authentication functionality 2:48:17 Building the front-end for the signin page and connecting it to the backend. 2:54:01 Setting up Redux and creating a Redux store 2:56:47 Initializing the initial state and creating user slice with logic functions. 3:02:31 Implementing error handling and global state management using Redux 3:05:40 Handling user authentication and state management using Redux toolkit 3:11:11 Setting serializable check to prevent errors in Redux toolkit 3:13:57 Adding Google o off functionality 3:19:50 Setting up Firebase environment variables and initializing the Firebase app 3:22:47 Setting custom parameters and initializing authentication for Google 3:28:48 Setting up back end for Google authentication 3:31:45 Creating a random password for users and hashing it for security. 3:37:32 Updating the header section based on user information 3:40:29 Replace arrow icon with avatar and customize dropdown menu 3:46:11 Creating a theme slice with Redux Toolkit 3:48:55 Setting up background and text colors for light and dark mode 3:54:52 Implementing private dashboard and routing for authentication. 3:57:51 Setting initial state and using useEffect for getting URL parameters 4:04:12 Resolving errors while creating a blog app dashboard 4:07:07 Customizing dashboard and profile UI for different screen sizes 4:13:12 Creating UI for profile page with input fields and buttons 4:16:18 Working on the upload image functionalities is the next section. 4:22:14 Creating a file reference and uploading images 4:25:09 Setting up security rules for the application. 4:30:54 Handling file upload errors and fetching file URLs in the MERN app 4:33:57 Using react-circular-progress-bar to show the progress from 0 to 100 while uploading images 4:39:44 Implement image upload functionality and begin editing user API route. 4:42:45 Creating an update user function and handling authentication 4:48:35 Creating a PUT request to update user information using Insomnia 4:51:47 Encrypting passwords and validating usernames 4:57:50 Creating and updating user API route 5:00:43 Adding unchange event listener to inputs 5:06:45 Debugging and fixing issues in the image update functionality 5:09:57 Adding state for image upload and user update success/error handling. 5:15:56 Creating API route for deleting user 5:18:59 Implementing a pop-up confirmation window for user deletion. 5:24:53 Implementing handling and deleting functionality in the MERN project 5:27:40 Explaining the process of adding and deleting user accounts 5:33:51 Adding sign out functionality to different parts of the app 5:36:52 Creating admin capabilities for the website 5:42:50 Utilizing cookie for user authentication and admin functionality. 5:45:54 Implement loading effect for update button 5:51:52 Styling the form and making it responsive 5:54:40 Discussing the usage of React.js, Next.js, file input, and button styling in a MERN stack project. 6:00:47 Working on backend side and creating the API route for creating a post 6:03:34 Creating a new post controller with error handling 6:09:26 Testing the post creation functionality in the blog app using Insomnia. 6:12:31 Creating the upload image functionality for the Post image in the create post page. 6:18:31 Handling image upload and error messages 6:21:35 Implementing progress bar during image upload 6:27:22 Submitting form data to API route and adding to database 6:30:17 Handling publish errors and navigating to post page 6:36:15 Creating a new component called Dash post and adding it to the dashboard page 6:39:01 Handling errors using middleware and setting start index and limit for fetching posts 6:44:23 Creating API route to fetch total posts and last month's posts count 6:47:17 Creating and using the API route for getting posts 6:53:00 Adding a plugin to the configuration file and implementing a scrollable table based on user and post conditions 6:56:12 Creating a table with row and cells for post details 7:01:59 Setting scrollbar color for light and dark mode 7:04:56 Implementing a 'show more' button for fetching more data 7:10:42 Setting up a show model state for a delete confirmation modal. 7:13:33 Adding delete post functionality to the dashboard 7:19:19 Handling fetching and displaying post data 7:22:09 Creating an update post route for the blog app 7:28:16 Handling errors and retrieving users with pagination and sorting 7:31:31 Creating and testing the API route for getting users 7:38:39 Deleting a user and updating user information 7:42:12 Adding functionality for admin users and improving image display 7:49:15 Implementing delete user functionality and working on post page 7:52:30 Using the hook called useParams to fetch post data based on the slug and show loading spinner 7:59:16 Styling the post page and creating a dynamic link 8:02:43 Styling the link tag and adding image, date, and time to read the post. 8:09:42 Styling tags and elements 8:13:00 Creating call to action component 8:19:42 Styling the blog app interface 8:23:12 Implementing user authentication and showing user details. 8:30:17 Styling and adding comment section to the blog app 8:33:45 Creating form layout and handling form submission 8:40:13 Error in route and front end API creation and usage 8:43:40 Adding comment functionality and error handling 8:50:28 Troubleshooting API comments fetching and display 8:54:11 Creating a component to display comments and fetching user data 9:00:52 Styling user profile and username 9:04:02 Styling and adding comment section to a blog post. 9:10:36 Implementing like functionality and API route for comments. 9:14:06 Styling the like button and adding functionality 9:20:52 Implementing like functionality for comments 9:24:12 Building the edit functionality for comments 9:30:42 Implementing text area and state management 9:33:57 Styling and handling edit and save functionality for comments 9:40:29 Implement functional deletion of comments using MERN stack 9:43:42 How to add a model to the components 9:50:35 Fetching and displaying recent articles from the MongoDB 9:53:55 Creating a reusable Postcard component 10:00:58 Styling the button with color, transition, and margin 10:04:39 Troubleshooting installation issues and implementing visual effects in the card design 10:11:24 Handling delete comment functionality and fixing errors 10:15:08 Creating a get comments API route 10:22:06 Adding dashboard section for admin with user, post, and comment information 10:25:41 Creating requests to fetch user data and limit results to five 10:32:46 Styling and aligning elements using flexbox 10:36:23 Creating a dashboard interface with recent users and a table 10:43:47 Implementing different features for the blog app. 10:47:13 Creating the homepage section of the admin dashboard 10:54:06 Creating a layout to display the recent posts in the blog app 10:57:39 Creating homepage layout and adding view all posts button 11:04:21 Adding search functionality and navigation to different pages. 11:07:35 Dynamic form creation and state management in MERN app. 11:14:31 Managing search parameters and options in the blog app dashboard 11:18:07 Customizing the border color and layout using flex 11:25:02 Adding post results and loading effect 11:28:21 Implementing the 'Show More' functionality for fetching and displaying more data. 11:35:22 Creating the projects page with H1 tag, paragraph, and call to action 11:39:35 Setting up the client folder structure and static folder for the front end 11:47:33 Successfully deploying and testing the MERN blog app 11:51:17 App functionalities and feedback request
Hey, could you please tell me how to add Flowbite-react to tailwind.config.js? I found this on a website: ``` const flowbite = require("flowbite-react/tailwind"); /** @type {import('tailwindcss').Config} */ module.exports = { content: [ // ... flowbite.content(), ], plugins: [ // ... flowbite.plugin(), ], }; ``` But it's not the same path used in this tutorial.
MERN Blog project is really amazing. You have covered all required concepts and I have learned quite a lot from this project. Thank you. Please keep uploading new projects like this one. Those who have basic idea on React.js, Node.js can really learn to build a MERN projects by watching this video.
I am new to the world of web development and decided to follow this tutorial and type it out. It took me aprox. 30 hours to complete. Thank you for teaching and sharing.
@@clumsypotato2065 - suggested actions - inspect the page that is failing - go to console - errors - see if there are any errors. They normally point out where the problem is. For instance, if you are failing to sign in with Google, you may find there is a problem with your Firebase_API_Key, especially where your .env file is located, that is if everything else is ok. The .env file has to be in the root of the client folder for it to work. The other great help for me has been ChatGPT, copy your problematic code and paste it in ChatGPT, it will point out the error and even suggest a solution. Happy hacking.
It takes 6 months to complete and learn too many stuff and at last i have fully responsive functional website in my resume. Thanks a lot............................................
You are a genius!!! I have been study and read very much books about MERN and I didn't understand well, but with this tutorial my mind are clear!!! Thank you!!!
I was searching for a good project to work on and I doubted myself and this tutorial during first 4 hours because I didn't even know the basics. However once I got hang of it, it went really well. Placement session is going to start in few weeks, I have a project now all thanks to you. Your explanation was really good and your patience to make this long video and share it with us is what makes you a good tutor. You deserve all the praise you are getting, hoping you will get more recognition.
@@simrandangol8865 Well if you know react at least a little bit it's fine I guess. I haven't worked on mongo db, express, node js before but as I proceeded with the video I got hang of it. It's beginner friendly if you are willing to not give up easily.
Thank you! I made this project from start to finish, and for me, the most valuable aspects are the details we encountered during development. I learned many new and useful things along the way, which made the experience truly fulfilling.
Just finnished the blog project. that was a great tutorial once again. ful of detailed explanations in all parts of the project. I am learning a big deal with you. thank you very much Sahand. Keep up the excellent work.
Sahand u r just amazing teacher in my life i already got internship and i need to make blog project i am decide to start with this. Previously completed real estate project which is also very good and your explanation are too much good. Allah pak gives you lots of happiness in your life sir.
@@reactproject Hey Sahad, from the day I landed on your channel, and coded the realtor clone, it taught me a lot from react js, github..I want to thank you so so much🙏 your style of teaching and in-depth explanations really cleared all doubts I had, and am now confident and everything is working well for sir. Thank you soon much🙏
@@kooyaw4445 Hi, can I contact you? I'm not receiving any errors, but Flowbite is not working correctly. The search button and bar are not appearing where they are supposed to.
The ultimate MERN stack tutorial is here! 🚀 Learn how to build a fully-featured Blog App with a Dashboard, including JWT Authentication and Redux Toolkit for state management. This video is packed with everything you need to create a modern, full-stack web application! 🎯 💡 Perfect for developers at any level-whether you're just starting with the MERN stack or looking to enhance your skills with JWT and Redux Toolkit! ⏱ Timestamps: 0:00 Introduction & Project Overview 3:15 Setting up MongoDB & Express 12:40 Building React Components 21:05 Integrating JWT Authentication 30:00 Redux Toolkit & State Management 40:50 Final App & Dashboard Features Don’t miss out-be sure to like, comment, and subscribe for more awesome tutorials! 👍
you are truly inspirational sir sahand for me in my coding journey i really waiting to your projects because u are the best out there honestly ..... hope u are doing well in ur life ... thank u
wow it was an incredible journey with you sahand! Really loved the project from start to finish.! More projects like this one with latest technologies!
Thanks again Dr. Sahand. This is my second project with you after the Real Estate App. You have been a tremendous help. I can't thank you enough. Those who land on your courses early in their coding careers save a lot of learning time. All the best in life sir.
Hey, Sahand. It's me again. Just to clarify that at 10:59:03 when you created the search page. The order part does not work, because you set the state of sidebarData with the property of sort instead of order, so it's not possible to fetch the data in order. Just to help everyone: const [sidebarData, setSidebarData] = useState({ searchTerm: '', order: 'desc', category: 'uncategorized', }) and you also have to change every occurrence of its property thought the project
Wow this is another wonderful project. Thank you sahand. I completed your previous project. Home search. that too is wonderful . Thank for this another project.
Thanks mr Sahand i have finished again this amazing blog and i appreciate the way you are presenting and explaining it's very ease to follow your tutorials 👍
I genuinely love your projects sir. You structure and explain them very well. By the way, in this project the sorting (oldest, latest) option in Search.jsx doesn't work because in the frontend side you have named "sort" in the params to request the posts in a specific order from the server but in server side you have named it as "order". If anyone is stuck there, renaming "order" to "sort" in getposts func of user.controller.js will do OR you can rename them as you prefer in the search page.
Thanks a lot sir, I started this project and was quite amazed at the explanation, also encountered lots of errors, but because of you, i was able to deploy my first web app! Thank you so much sir😀😀
Thanks a lot sir for this wonderful project!! I finished this one in 2 days time and it was super awesome !! Thanks a lot for such a well-detailed and informative video!! May God bless you with Health and Prosperity!!
Thanks for this awesome project, This is one of the great project anyone can get for free to upskill as a MERN developer, I am a react developer and recently learnt Backend and thisbhas helped me immensely to hone my skills as a full stack developer. Keep it up..
I learned so many things by doing this project thanks to your incridible way teaching it is really clear and concise and we can feel that you really master the fullstack in the way you present things everything is related!
@@reactproject Yah you should try to add some middlewares techniques to differentiate among various user, And a more secure authentication by otp verification through mail and a forgot password functionality it will definitly boost more skills. Indeed your videos are very much crisp clear and helpful but adding these things is just a cherry on the cake.
Completed this project today as I started 3 weeks ago. And I learned a lot of new things from this single project. Thanks a lot brother ❤🙏. You're legend and your explanations are so simple and beginner friendly.
I am facing a error at video time (02:12:40), that is: [vite] http proxy error: /api/auth/signup AggregateError at internalConnectMultiple (node:net:1114:18) at afterConnectMultiple (node:net:1667:5) please guide how to solve it.
Your tutorial is so comprehensive and also intriguing. You are revealing nearly the latest tech of frontend and backend, and I have learnt tremendous things from your tutorial.
Very very big thanks sir keep doing your service . I completed this projects and mern estate projects .these two projects I learning lots of from you .tq sir im expecting more mern projects from you sir
@@reactproject sahand i finished the project it was really amazing and i learned a lot from it but there is a bug in the update post even when i copied your code from the github. it happend for some posts not all when you edit them : "Cast to ObjectId failed for value "undefined" (type string) at path "_id" for model "Post" i tried to fix it but nothing waiting for your answer and thanks a lot for you efforts
Allhamdulilah, i have completed your mern real estate project, and I have learned a lot of things. Thank you so much ❤sir. Now i am starting this course in sha Allah i will enjoy it.❤❤❤Lots of love 🎉
I love Dr Sahand projects , i learned lots of thing about js from him, but i know your style this video accelerate minimum x1.5 or x2 , but it doesnt matter we love your teach :)
Yes, you are right, youtube limit for video duration is 12 hours, and the original course was 18 hours so I increased the speed :) you can decrease it by youtube setting
This can save my life. This can give me enormous knowledge. Thank you very much for everything, really for all the content. You gained a new subscriber and I will start making this blog. ♥
Thank you so much sir for making this awesome video, as it has served as my guide to becoming a better developer. You practically took out time to explain each step you head on to the next. Thank you so much sir, I'm really grateful for your making this tutorial.
Hello sir please when I tried submitting the form on the sign up page I received the error message on my brother '' failed to fetch''. Please I need your help 😭😭😭😭
#I always like how sahand organizes his work, even when I'm watching other UA-cam creators,at some points i always refer to Sahand's videos for reference,kudos mate. #a request, could you make a social media complete app, with a dashboard, and mostly important you show us how to only make 1 or 2 people at maximum to be admins only. #also, an auto complete search suggestions #remind me after 2 weeks!
Obrigado Sahand, que projeto magnifico, pois inclui tudo o que um desenvolvedor precisa, e sua lógica de programação ajudou melhorar a minha. Melhor projeto que fizer até hoje. I'm from Brazil, thanks.
@@letsDance-kpop yes and I enhance this project to this level ua-cam.com/video/s5vGc07Dthg/v-deo.htmlsi=r_qxv5WAbk79uGhz This is all because of our legendary sir shanad🫀
Oltre ad essere eccellente in informatica e nel modo di spiegarla, e' eccellente anche nella lingua inglese, pertanto si riesce a seguire bene attraverso il traduttore automatico. Grazie!
Check out 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).
Hi , i am getting error "JWT verification error: JsonWebTokenError: invalid signature" what is the problem and how can i resolve this please help me
when i click to the updata button it gives me an error plese sir tell me what is the problem
Maybe your secret null
This error bcs verify token invalif
Hi sahand. I am using firebase for my react app. i have completed the authentication page and everything was working perfectly until now when i tried to login it doesn't allow me. I have tried all i could but i could not solve the issue. i cheked the console and it's showing the error 'third party cookies will be blocked'. I read about third party cookies and i realized this is where the problem is coming from. I checked out your realtor clone website and realized it has the same issue. How do i solve this ? Please a brother
00:06 Build a powerful, fully responsive MERN Stack web app with advanced features.
03:44 A new post and admin privileges for creating, editing, and deleting posts.
10:30 Setting up the client-side folder for react and installing necessary dependencies and Tailwind CSS
14:28 Setting up essential extensions and configurations for the project
21:41 Create authentication and primary pages
25:34 Creating pages, importing routes, and setting up navigation.
33:06 Configuring modules and plugins in MERN stack
36:32 Styling the logo and search input
44:09 Creating sign-in and menu buttons with responsive design
48:02 Implementing navigation menu and active link highlighting based on the URL path in a MERN project.
55:15 Creating a server using Express and running it on a specific port
59:14 Setting up the server and connecting to MongoDB
1:06:39 Configuring secure connection to MongoDB using environmental variables
1:10:19 Securely connecting to the database and configuring GitHub upload
1:17:34 Creating user model and test API route
1:21:23 Setting up and utilizing router and user routes for API endpoints
1:28:41 Setting up and using Insomnia for testing APIs
1:32:22 Allowing JSON input and handling error validation
1:39:22 Install and use bcrypt JS to hash and secure passwords in the backend
1:42:53 Creating middleware and error handling function
1:49:56 Creating the sign-up page UI with logo, text, and form
1:53:44 Styling and structuring a webpage
2:01:26 Creating and styling sign-up form and adding UI functionality
2:05:09 Tracking input changes and creating a form data state
2:10:40 Setting up a proxy in V to redirect requests to Local Host 3000.
2:13:34 Adding state for handling errors and loading effects.
2:19:11 Adding functionality to the sign up page
2:22:05 Creating a footer component with sections and a social media icons
2:27:56 Creating sections for 'Follow Us' and 'Legal' with corresponding links and text.
2:31:04 Adding footer with copyright, dynamic year, and social media icons
2:37:16 User authentication and error handling process
2:40:07 Using JWT for user authentication
2:45:36 Creating and testing user authentication functionality
2:48:17 Building the front-end for the signin page and connecting it to the backend.
2:54:01 Setting up Redux and creating a Redux store
2:56:47 Initializing the initial state and creating user slice with logic functions.
3:02:31 Implementing error handling and global state management using Redux
3:05:40 Handling user authentication and state management using Redux toolkit
3:11:11 Setting serializable check to prevent errors in Redux toolkit
3:13:57 Adding Google o off functionality
3:19:50 Setting up Firebase environment variables and initializing the Firebase app
3:22:47 Setting custom parameters and initializing authentication for Google
3:28:48 Setting up back end for Google authentication
3:31:45 Creating a random password for users and hashing it for security.
3:37:32 Updating the header section based on user information
3:40:29 Replace arrow icon with avatar and customize dropdown menu
3:46:11 Creating a theme slice with Redux Toolkit
3:48:55 Setting up background and text colors for light and dark mode
3:54:52 Implementing private dashboard and routing for authentication.
3:57:51 Setting initial state and using useEffect for getting URL parameters
4:04:12 Resolving errors while creating a blog app dashboard
4:07:07 Customizing dashboard and profile UI for different screen sizes
4:13:12 Creating UI for profile page with input fields and buttons
4:16:18 Working on the upload image functionalities is the next section.
4:22:14 Creating a file reference and uploading images
4:25:09 Setting up security rules for the application.
4:30:54 Handling file upload errors and fetching file URLs in the MERN app
4:33:57 Using react-circular-progress-bar to show the progress from 0 to 100 while uploading images
4:39:44 Implement image upload functionality and begin editing user API route.
4:42:45 Creating an update user function and handling authentication
4:48:35 Creating a PUT request to update user information using Insomnia
4:51:47 Encrypting passwords and validating usernames
4:57:50 Creating and updating user API route
5:00:43 Adding unchange event listener to inputs
5:06:45 Debugging and fixing issues in the image update functionality
5:09:57 Adding state for image upload and user update success/error handling.
5:15:56 Creating API route for deleting user
5:18:59 Implementing a pop-up confirmation window for user deletion.
5:24:53 Implementing handling and deleting functionality in the MERN project
5:27:40 Explaining the process of adding and deleting user accounts
5:33:51 Adding sign out functionality to different parts of the app
5:36:52 Creating admin capabilities for the website
5:42:50 Utilizing cookie for user authentication and admin functionality.
5:45:54 Implement loading effect for update button
5:51:52 Styling the form and making it responsive
5:54:40 Discussing the usage of React.js, Next.js, file input, and button styling in a MERN stack project.
6:00:47 Working on backend side and creating the API route for creating a post
6:03:34 Creating a new post controller with error handling
6:09:26 Testing the post creation functionality in the blog app using Insomnia.
6:12:31 Creating the upload image functionality for the Post image in the create post page.
6:18:31 Handling image upload and error messages
6:21:35 Implementing progress bar during image upload
6:27:22 Submitting form data to API route and adding to database
6:30:17 Handling publish errors and navigating to post page
6:36:15 Creating a new component called Dash post and adding it to the dashboard page
6:39:01 Handling errors using middleware and setting start index and limit for fetching posts
6:44:23 Creating API route to fetch total posts and last month's posts count
6:47:17 Creating and using the API route for getting posts
6:53:00 Adding a plugin to the configuration file and implementing a scrollable table based on user and post conditions
6:56:12 Creating a table with row and cells for post details
7:01:59 Setting scrollbar color for light and dark mode
7:04:56 Implementing a 'show more' button for fetching more data
7:10:42 Setting up a show model state for a delete confirmation modal.
7:13:33 Adding delete post functionality to the dashboard
7:19:19 Handling fetching and displaying post data
7:22:09 Creating an update post route for the blog app
7:28:16 Handling errors and retrieving users with pagination and sorting
7:31:31 Creating and testing the API route for getting users
7:38:39 Deleting a user and updating user information
7:42:12 Adding functionality for admin users and improving image display
7:49:15 Implementing delete user functionality and working on post page
7:52:30 Using the hook called useParams to fetch post data based on the slug and show loading spinner
7:59:16 Styling the post page and creating a dynamic link
8:02:43 Styling the link tag and adding image, date, and time to read the post.
8:09:42 Styling tags and elements
8:13:00 Creating call to action component
8:19:42 Styling the blog app interface
8:23:12 Implementing user authentication and showing user details.
8:30:17 Styling and adding comment section to the blog app
8:33:45 Creating form layout and handling form submission
8:40:13 Error in route and front end API creation and usage
8:43:40 Adding comment functionality and error handling
8:50:28 Troubleshooting API comments fetching and display
8:54:11 Creating a component to display comments and fetching user data
9:00:52 Styling user profile and username
9:04:02 Styling and adding comment section to a blog post.
9:10:36 Implementing like functionality and API route for comments.
9:14:06 Styling the like button and adding functionality
9:20:52 Implementing like functionality for comments
9:24:12 Building the edit functionality for comments
9:30:42 Implementing text area and state management
9:33:57 Styling and handling edit and save functionality for comments
9:40:29 Implement functional deletion of comments using MERN stack
9:43:42 How to add a model to the components
9:50:35 Fetching and displaying recent articles from the MongoDB
9:53:55 Creating a reusable Postcard component
10:00:58 Styling the button with color, transition, and margin
10:04:39 Troubleshooting installation issues and implementing visual effects in the card design
10:11:24 Handling delete comment functionality and fixing errors
10:15:08 Creating a get comments API route
10:22:06 Adding dashboard section for admin with user, post, and comment information
10:25:41 Creating requests to fetch user data and limit results to five
10:32:46 Styling and aligning elements using flexbox
10:36:23 Creating a dashboard interface with recent users and a table
10:43:47 Implementing different features for the blog app.
10:47:13 Creating the homepage section of the admin dashboard
10:54:06 Creating a layout to display the recent posts in the blog app
10:57:39 Creating homepage layout and adding view all posts button
11:04:21 Adding search functionality and navigation to different pages.
11:07:35 Dynamic form creation and state management in MERN app.
11:14:31 Managing search parameters and options in the blog app dashboard
11:18:07 Customizing the border color and layout using flex
11:25:02 Adding post results and loading effect
11:28:21 Implementing the 'Show More' functionality for fetching and displaying more data.
11:35:22 Creating the projects page with H1 tag, paragraph, and call to action
11:39:35 Setting up the client folder structure and static folder for the front end
11:47:33 Successfully deploying and testing the MERN blog app
11:51:17 App functionalities and feedback request
Wow that’s cool brother
Did u code ?
I am very impressed with the way, he has separated all sections in the whole project in a very understandable format. I have learned a lot.
Great to hear! thanks for your feedback
2 hours into the course and i need to admit this is the best MERN project by far
Hey, could you please tell me how to add Flowbite-react to tailwind.config.js? I found this on a website:
```
const flowbite = require("flowbite-react/tailwind");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
flowbite.content(),
],
plugins: [
// ...
flowbite.plugin(),
],
};
```
But it's not the same path used in this tutorial.
I convert this full stack aap into Next js and Tailwind and now i am Feeling very confident
Best teacher for JS, React js, Nodejs
thanks for you comment
MERN Blog project is really amazing. You have covered all required concepts and I have learned quite a lot from this project. Thank you. Please keep uploading new projects like this one. Those who have basic idea on React.js, Node.js can really learn to build a MERN projects by watching this video.
Glad to hear that
just started currently 2.04.48 , this tutorial is very explanatory and straight forward. Am loving it already
thanks for your comment, let me know if you have any questions.
OAuth.jsx:18
POST localhost:5173/api/auth/google 500 (Internal Server Error)
Can you help me with this error how can i resolve this
I am new to the world of web development and decided to follow this tutorial and type it out. It took me aprox. 30 hours to complete. Thank you for teaching and sharing.
5 din lag geye abhi bhi cmplete nhi huya... 2 hour everyday
@@arnab_16 complete ho gya
@@arnab_16 bhai reply kr dena q ki mai beech me fas gya hu
@@vishalv4464 kahan fasa hai bata
Sahand, you are one of the best teachers on UA-cam. I have learned so much from you. Thank you very much!
Thanks for the kind words! I'm glad you're finding the content helpful.
Your tutorials are way more comprehensive than most, going through everything step by step, thank you :)
Glad you think so! My pleasure :) let me know if you have any feedback on the course
Bro im not able to sign in to the project?
@@clumsypotato2065 make sure your env files are in the correct location and use insomnia to check if API calls are working properly
@@clumsypotato2065 - suggested actions - inspect the page that is failing - go to console - errors - see if there are any errors. They normally point out where the problem is. For instance, if you are failing to sign in with Google, you may find there is a problem with your Firebase_API_Key, especially where your .env file is located, that is if everything else is ok. The .env file has to be in the root of the client folder for it to work. The other great help for me has been ChatGPT, copy your problematic code and paste it in ChatGPT, it will point out the error and even suggest a solution. Happy hacking.
It takes 6 months to complete and learn too many stuff and at last i have fully responsive functional website in my resume. Thanks a lot............................................
I have a problem in render deployment it shows cannot find module 'opt/render/project/src/start'
@@pranjulpal696 follow the instructions step by step
shabas beta.
@@Mr.Indianwxvhehsy9191hghgx ho gya bache
6 month 😲
This has to be one of the best tutorials videos for MERN Stack, ever published on the Internet for free. 5:43:12
Just Finished The Course It's Amazing I am Become Hulk In MERN Wow. My Best Teacher Respect
I am subscribed you By Three account.
in how much time bro!?? just asking
hey sahand, i'm from brazil and all i have to say is thank you! Your videos are fully of knowledge and i'm learning a lot with that.
Happy to hear that! keep up the hard work and let me know more about you progres later.
Such a unique teaching experience. Just an hour in and I am absolutely loving it. I love the way everything is properly structured too
Glad you enjoy it!
You are a genius!!! I have been study and read very much books about MERN and I didn't understand well, but with this tutorial my mind are clear!!! Thank you!!!
You're very welcome!
I was searching for a good project to work on and I doubted myself and this tutorial during first 4 hours because I didn't even know the basics. However once I got hang of it, it went really well. Placement session is going to start in few weeks, I have a project now all thanks to you. Your explanation was really good and your patience to make this long video and share it with us is what makes you a good tutor. You deserve all the praise you are getting, hoping you will get more recognition.
@@simrandangol8865 Well if you know react at least a little bit it's fine I guess. I haven't worked on mongo db, express, node js before but as I proceeded with the video I got hang of it. It's beginner friendly if you are willing to not give up easily.
Thank you! I made this project from start to finish, and for me, the most valuable aspects are the details we encountered during development. I learned many new and useful things along the way, which made the experience truly fulfilling.
Just finnished the blog project. that was a great tutorial once again. ful of detailed explanations in all parts of the project. I am learning a big deal with you. thank you very much Sahand. Keep up the excellent work.
Glad you enjoyed it!
Sahand u r just amazing teacher in my life i already got internship and i need to make blog project i am decide to start with this.
Previously completed real estate project which is also very good and your explanation are too much good.
Allah pak gives you lots of happiness in your life sir.
I'm so happy you're enjoying the projects. Good luck with the internship!
Sahand's MERN Stack && (Very clean , Understandable straight to the point)
Thank you Sahand! I have completed this whole project few days ago! You have made a great work! God bless you!
It's my pleasure
Your video tutorials are easy to follow and are well structured and organised. I have learned many things from you. Thanks a lot !
My pleasure :) let me know if you have any feedback on the course
@@reactproject Hey Sahad, from the day I landed on your channel, and coded the realtor clone, it taught me a lot from react js, github..I want to thank you so so much🙏 your style of teaching and in-depth explanations really cleared all doubts I had, and am now confident and everything is working well for sir. Thank you soon much🙏
Thanks
Great work buddy. i love how in depth you cover everything stated in the project
I appreciate that!
he literally create the project two times
One of the best tutors I've come across. Always waiting for new tutorials to learn from them.
5 hours into the course and i came to thank you again. I have learnt so much brother. Incredibly thankful
Keep it up
@@reactproject Thank you
@@kooyaw4445 Hi, can I contact you? I'm not receiving any errors, but Flowbite is not working correctly. The search button and bar are not appearing where they are supposed to.
Just completed this project. Just so you know I absolutely enjoyed it from start to finish. Big Ups brother
How much time did it take?
@@priyanshupriyam174 Two weeks brother. I made few tweaks to the UI and deployed it
Does it cover mobile responsiveness ?
@@vijayyy51 Yes it does, tailwind just makes everything easier in terms of responsiveness
Hey did you encountered any errors?
The ultimate MERN stack tutorial is here! 🚀 Learn how to build a fully-featured Blog App with a Dashboard, including JWT Authentication and Redux Toolkit for state management. This video is packed with everything you need to create a modern, full-stack web application! 🎯
💡 Perfect for developers at any level-whether you're just starting with the MERN stack or looking to enhance your skills with JWT and Redux Toolkit!
⏱ Timestamps: 0:00 Introduction & Project Overview
3:15 Setting up MongoDB & Express
12:40 Building React Components
21:05 Integrating JWT Authentication
30:00 Redux Toolkit & State Management
40:50 Final App & Dashboard Features
Don’t miss out-be sure to like, comment, and subscribe for more awesome tutorials! 👍
wow, this series are amazing, really appreciate your hard work.
Glad you enjoy it!
welcome back man ..... i love you so much 🥰🥰🥰🥰
Love you too my friend. I had to make this one great. I spent 3 month on the course. I hope you enjoy it.
you are truly inspirational sir sahand for me in my coding journey i really waiting to your projects because u are the best out there honestly ..... hope u are doing well in ur life ... thank u
You are welcome, glad to hear that I was helpful for your coding journey :)
@@umarameen5572 yes i did
wow it was an incredible journey with you sahand! Really loved the project from start to finish.! More projects like this one with latest technologies!
I'm thankful to you for this interesting project.
We are waiting for more MERN projects.
Thanks.
So nice of you
Thanks again Dr. Sahand. This is my second project with you after the Real Estate App. You have been a tremendous help. I can't thank you enough. Those who land on your courses early in their coding careers save a lot of learning time. All the best in life sir.
Great job!
Definitely enjoyed the real estate app. Definitely gonna enjoy this. Gonna try building the auth and other repeated elements by myself this time 💪
Glad to hear that :) let me know if you have any feedback on the course
Surely I will! Thanks for the hard work ❤
Excellent work brother. We are expecting an Ecommerce website project in next video.
Sure 👍
@@reactproject your real estate website has helped me a lot in my development...it was amazing 😍 keep it up.
glad to hear that. This project is much more complete
@@reactproject wow....I will complete this project and send you the deployed 🔗 link.
Let me know your opinion on the course content and the features need to be added.
Welcome back man 🎉 love you
love you too
Thank you mr. Sahand for this amazing project.
You are welcome :) let me know if you have any problem during the course
Just Completed the project.. Thank You Man
Great 👍
@@reactproject how much time it took.
Hey, Sahand. It's me again. Just to clarify that at 10:59:03 when you created the search page. The order part does not work, because you set the state of sidebarData with the property of sort instead of order, so it's not possible to fetch the data in order. Just to help everyone:
const [sidebarData, setSidebarData] = useState({
searchTerm: '',
order: 'desc',
category: 'uncategorized',
})
and you also have to change every occurrence of its property thought the project
thanks for sharing this. I have noticed the problem myself, it is being fixed on the final version already
As we can see, in the post.controller.js, there are req.query.order as sahand did but we should to update query paramerter order to sort.
@@reactproject @ i am strating this project from today , so is it fixed now in the current video ?
Wow this is another wonderful project. Thank you sahand.
I completed your previous project. Home search. that too is wonderful .
Thank for this another project.
You are welcome :) let me know if you have any problem during the course
Finally you did it 😁❤
Yes finally, it was a big project, it took me 3 months to finish it. I hope you enjoy it.
Thanks mr Sahand i have finished again this amazing blog and i appreciate the way you are presenting and explaining it's very ease to follow your tutorials 👍
It's my pleasure
Bro how did you manage the code highlighter or syntax highlighter in create post ?
I genuinely love your projects sir. You structure and explain them very well.
By the way, in this project the sorting (oldest, latest) option in Search.jsx doesn't work because in the frontend side you have named "sort" in the params to request the posts in a specific order from the server but in server side you have named it as "order".
If anyone is stuck there, renaming "order" to "sort" in getposts func of user.controller.js will do OR you can rename them as you prefer in the search page.
I have updated in the final version.
@@reactproject still remains as "order" in the post.controller.js of the final version
Thanks a lot sir, I started this project and was quite amazed at the explanation, also encountered lots of errors, but because of you, i was able to deploy my first web app! Thank you so much sir😀😀
You are most welcome, glad to hear that. Wish you luck with your learning journey
Amazing project sir ❤🔥
You are welcome :) let me know if you have any problem during the course
The breakdown of steps at 5:28:00 was super helpful for me. Thank you.
glad it was helpful
Thanks for this & recently i have created signup function using your video ❤❤
You're welcome 😊 I am glad it was usefull
@@reactproject 😍😍❤️
@@umarameen5572 where
I just completed the second project using your guidance. Thank you so much! I've learned a lot once again. Can't wait for your next tutorial.
Wonderful!
Thanks a lot sir for this wonderful project!! I finished this one in 2 days time and it was super awesome !! Thanks a lot for such a well-detailed and informative video!!
May God bless you with Health and Prosperity!!
Best tutorial which taught me so much and cleared all my doubts how frontend and backend works
Wow its awesome ❤❤
For few days i'm finding this type of course but can't find . Dear thankyou very much for making this.
🎉🎉🎉
Most welcome 😊
best course ever. very appreciate you job sahand!!!
Thanks for the kind words!
Thanks for this awesome project, This is one of the great project anyone can get for free to upskill as a MERN developer, I am a react developer and recently learnt Backend and thisbhas helped me immensely to hone my skills as a full stack developer. Keep it up..
Thannnk you so much for this project! completed this whole project today!
Did you had problems with the edit post page?
Great tutorial! Learned many things..thank you so much! please carry out mern stack food ordering project also in upcoming days
Great idea!
3:07:38im completely new to web dev...but your explanation + some google search is working like a charm! thanks a lot sir!
Thanks
Thank You Sir !! Just Completed the Project 📚💯
Great job! All the best :)
I learned so many things by doing this project thanks to your incridible way teaching it is really clear and concise and we can feel that you really master the fullstack in the way you present things everything is related!
Glad it was helpful!
Thanks a lot for the project, I just finished it and deployed it to Render. It was intense learning, but very useful !
how much time did you take to complete it?
@@ishasharma4559 like 2 weeks but I took my time !
Great job buddy. i love the way you cover everything stated in the project.
@@simrandangol8865 rather it's is not Sde3 friendly dear..
Hi Sahand! My name is Bakyt! This is my 3d mern stack project following you! Thank's a lot!
It's my pleasure
In the previous video, I mentioned creating an admin dashboard. Today, you have done it. I am so glad. Keep this up, and thank you very much....
Awesome, thank you!
Wonderful mr Sahand I always admire your projects I did your real estate and deployedd and I hope I will finish again thanks ❤
My pleasure :) let me know if you have any feedback on the course
in how many days you finished the previous one?
@@zainn7336 just two weeks
@@reactproject Yah you should try to add some middlewares techniques to differentiate among various user,
And a more secure authentication by otp verification through mail and a forgot password functionality it will definitly boost more skills.
Indeed your videos are very much crisp clear and helpful but adding these things is just a cherry on the cake.
Amazing tutorial!
I just completed it and am quite happy with the result. Thank you very much! 👏
Great job!
how much days did it took to complete it ?
Without errors ?
It is totally full-featured tutorial 🎉
Awesome!❤
please part 2 and deploy nginx,
the best channel youtube 😍🥰
Completed this project today as I started 3 weeks ago.
And I learned a lot of new things from this single project.
Thanks a lot brother ❤🙏.
You're legend and your explanations are so simple and beginner friendly.
Nice work! wish you a successful coding journey. Keep up the good work.
I am facing a error at video time (02:12:40), that is:
[vite] http proxy error: /api/auth/signup
AggregateError
at internalConnectMultiple (node:net:1114:18)
at afterConnectMultiple (node:net:1667:5)
please guide how to solve it.
Your tutorial is so comprehensive and also intriguing. You are revealing nearly the latest tech of frontend and backend, and I have learnt tremendous things from your tutorial.
Glad it was helpful!
Thanks buddy for staying with me in this project for more than 1months
It's my pleasure
Brilliant brother , absolutely amazing❤
🙌
Very very big thanks sir keep doing your service . I completed this projects and mern estate projects .these two projects I learning lots of from you .tq sir im expecting more mern projects from you sir
Keep it up. All the best :)
I always like your explanation. You re so far the best in UA-cam per now
Wow, thanks!
Will definitely try to do it sir. Thanks for uploading
No problem, glad to hear that. I hope you enjoy the course. Let me know your feedback after completing the app
you are the best ma man keep going on what a surprise u made ma day
Happy to hear that! let me know if you have any problem during the course
@@reactproject sahand i finished the project it was really amazing and i learned a lot from it but there is a bug in the update post even when i copied your code from the github. it happend for some posts not all when you edit them : "Cast to ObjectId failed for value "undefined" (type string) at path "_id" for model "Post" i tried to fix it but nothing waiting for your answer and thanks a lot for you efforts
make sure to check the objectId too when checking the id, I have explained it in the video
Allhamdulilah, i have completed your mern real estate project, and I have learned a lot of things.
Thank you so much ❤sir.
Now i am starting this course in sha Allah i will enjoy it.❤❤❤Lots of love 🎉
In how many days you completed the previous one ??
@@zainn7336 I completed in 12 days but in some days, I worked very slow you can complete with in a week if you work two to three hours daily.
Keep it up
Was waiting for it
Thanks for your comment. I was working on this course for 3 months. I hope you enjoy it.
@@reactproject this world is better place bcoz of u people
Thank you I've completed my project from two of your videos
Great job!
I love Dr Sahand projects , i learned lots of thing about js from him, but i know your style this video accelerate minimum x1.5 or x2 , but it doesnt matter we love your teach :)
Yes, you are right, youtube limit for video duration is 12 hours, and the original course was 18 hours so I increased the speed :) you can decrease it by youtube setting
This can save my life. This can give me enormous knowledge. Thank you very much for everything, really for all the content. You gained a new subscriber and I will start making this blog. ♥
Happy to help!
Is this project good for resume ?
Just cam across this wonderful channel and learning a lot . Thanks and continue your great work 👦👦
Awesome, thank you!
I like your English it's so clear to me because I'm not native speaker ❤❤🎉🎉best
glad to hear that.
very insightful video for MERN beginners!!
Thank you so much sir for making this awesome video, as it has served as my guide to becoming a better developer. You practically took out time to explain each step you head on to the next. Thank you so much sir, I'm really grateful for your making this tutorial.
Thank you for this insightful project , your knowledge and efforts are greatly appreciated
Much appreciated
Awsome tutorial, Mahn you are a hero👌
Thanks 😅
Thanks, Sahand for such a nice project.
no problem, thanks for watching
Amaging work sir , if any one knows all basic concept of mern ...this project will teach how to implement all those concept in best fragmented way
Hello sir please when I tried submitting the form on the sign up page I received the error message on my brother '' failed to fetch''. Please I need your help 😭😭😭😭
#I always like how sahand organizes his work, even when I'm watching other UA-cam creators,at some points i always refer to Sahand's videos for reference,kudos mate.
#a request, could you make a social media complete app, with a dashboard, and mostly important you show us how to only make 1 or 2 people at maximum to be admins only.
#also, an auto complete search suggestions
#remind me after 2 weeks!
Great job! I am going to upload more projects soon
comprehensive and easy to follow, best tutorial for newbie
Glad to hear that!
Bro, this is amazing, very impressive bro, i respectfully with your learning video
I appreciate that! let me know if you have any problem during the course
Such an amazing project to learn concepts and develop an mern project, Thanks!!
Glad you like it!
I'm currently working on the real estate app. I will do this as my next project. Thank you for sharing your valuable knowledge with us.
Glad it was helpful!
Obrigado Sahand, que projeto magnifico, pois inclui tudo o que um desenvolvedor precisa, e sua lógica de programação ajudou melhorar a minha. Melhor projeto que fizer até hoje. I'm from Brazil, thanks.
finally after 11 days i completed this thanks bro it was good
No problem 👍 keep it up
@@reactproject the level of detail in the project was too deep i learned a lot thanks sir
Amazing tutorial!♥
I Just Completed it.Learn alot of things from this Project.
Thank You so much Sir You are Amazing😍
Glad it helped
Without errors did u finish ?
@@letsDance-kpop yes and I enhance this project to this level
ua-cam.com/video/s5vGc07Dthg/v-deo.htmlsi=r_qxv5WAbk79uGhz
This is all because of our legendary sir shanad🫀
Bro this video is sooo good..
❤❤❤❤
Thank for providing such a good content
Thank you so much 😀
Oltre ad essere eccellente in informatica e nel modo di spiegarla, e' eccellente anche nella lingua inglese, pertanto si riesce a seguire bene attraverso il traduttore automatico. Grazie!