Build a Fullstack Blog App using MERN (mongo, express, react, node) with Admin Dashboard
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- This course offers a complete, in-depth look at modern web development using the MERN stack. By the end, you'll have a fully functional blog website and the skills to build and manage your own web projects. Plus, you'll gain insights into best practices for both frontend and backend development, making you a versatile and valuable developer in today's job market.
Join us on this exciting journey to become a proficient full-stack developer. Enroll now and start building your professional blog website today!
#mernstack #reactjs #tailwindcss #nodejs #expressjs #jwt
🏷️ Images & Source Files:
1. [Starter Files](github.com/mda...)
2. [for Source code, buy me a coffee ](
buymeacoffee.c...)
3. [This full course on Udemy](www.udemy.com/...)
4. Business Promotion: help.yourassitant@gmail.com
N.B: This course is completely free on TH-cam, but if you want to keep track and get a certificate with source code, you can enroll in the course on Udemy.*
*🏷️ Related Video:*
- [Deployment Video Link]( • Deploy Hotel Rooftop F... )
*⏱️ Timestamps:*
*Module 1: Introduction*
- 00:00:00 Introduction
- 00:14:25 Before you get started
- 00:19:03 Install Node.js
- 00:20:40 VS Code install
*Module 2: Backend Development*
- 00:23:18 Basic server setup
- 00:40:59 Connect MongoDB and Mongoose
- 00:53:11 Dotenv setup
- 01:01:26 Create a blog model
- 01:11:18 Basic blog routes
- 01:17:39 Download Postman for API testing
- 01:22:47 Post a blog to database
- 01:33:35 Get all blogs data
- 01:37:07 Search and category filtering
- 01:45:49 Get a single blog
- 01:53:25 Update a blog in DB
- 01:59:28 Delete a blog from DB
- 02:03:55 Get all related blogs
- 02:12:46 Create a comment model
- 02:16:35 Post a new comment
- 02:28:54 Get all comments
- 02:31:58 Modify blog routes
*Module 3: Authentication & Authorization*
- 02:37:42 Create a user model
- 02:41:46 Register a user route
- 02:50:47 How to hash password
- 02:57:57 Login using email and password
- 03:09:08 Generate JWT token
- 03:26:08 Logout a user
- 03:28:58 Get all users from DB
- 03:33:09 Delete a user from DB
- 03:39:47 Update user role
- 03:45:32 Modify blog model and routes
- 03:55:57 VerifyToken middleware
- 04:08:25 isAdmin check middleware
- 04:17:54 Update blog data in MongoDB
*Module 4: Get Started with Frontend*
- 04:22:41 Setup Vite React project
- 04:30:11 Install Tailwind CSS
- 04:40:23 Customize theme and colors
- 04:43:00 Setup React Router DOM
- 04:51:12 Project structure and outlet
- 04:57:06 Create navbar
- 05:19:16 Mobile responsive navbar
- 05:33:45 Hero section using Swiper JS
- 05:51:42 Create blog and search components
- 06:04:51 Redux and Redux Toolkit setup
- 06:21:14 Fetch blog data and show
- 06:35:04 Single blog API and route
- 06:45:07 Blog details page
- 07:09:02 Comment cards component
- 07:19:10 Post a comment section
- 07:25:28 Related blog section
*Module 5: Auth, Register and Login*
- 07:41:51 Login and register page
- 07:59:21 Auth API setup
- 08:12:58 Login functionality and get token
- 08:33:14 Modify navbar and show profile
- 08:48:33 Create comment API
- 09:12:09 Modify blog API
*Module 6: Admin Dashboard*
- 09:18:57 Create admin dashboard
- 09:37:21 Admin navigation routes
- 09:46:33 Setup private routes
- 09:52:46 Admin dashboard page
- 10:12:12 Blog graph chart
- 10:25:53 Add new blog post
- 11:28:49 Manage blog posts
- 11:49:52 Update blog post
- 12:08:22 Manage users & user roles
*⬇️ Popular Playlists:*
1. [Complete MERN Stack]( • Complete MERN Stack Pr... )
2. [React Tutorial for Beginners]( • React Tutorial for Beg... )
3. [JavaScript Tutorial for Beginners]( • Javascript Tutorial fo... )
*❤️ SUBSCRIBE:* [Subscribe and hit the notification bell!](bit.ly/37Txw8d)
*❤️ Facebook:* [MBroMedia]( / mbromedia )
*🔥 Don't click this link:* [bit.ly/37Txw8d](bit.ly/37Txw8d)
*► You Can Share Your Ideas In This ❤️ Comment Box ❤️*
*► For copyright matters please contact us at:* help.yourassitant@gmail.com
*❤️ Search Me In Google:* Md Al Mamun
*🏷️ Related Tags:* learn react js, personal portfolio website, react js crash course
Thanks for all! What is this 'return !!token' at 8:26:52..And I get the same error.There is no user info in localStotage...Can you help me pls?
Just go to authSlice.js file and replace your code with the given one:
import { createSlice } from '@reduxjs/toolkit';
// Utility function to check if the token exists in cookies
const isTokenPresentInCookies = () => {
const token = document.cookie.split(';').find(cookie => cookie.trim().startsWith('token='));
return !!token;
};
// Utility function to get the initial state from localStorage
const loadUserFromLocalStorage = () => {
try {
// if (!isTokenPresentInCookies()) {
// localStorage.removeItem('user');
// return { user: null };
// }
const serializedState = localStorage.getItem('user');
if (serializedState === null) return { user: null };
return { user: JSON.parse(serializedState) };
} catch (err) {
return { user: null };
}
};
const initialState = loadUserFromLocalStorage();
const authSlice = createSlice({
name: 'auth',
initialState,
reducers: {
setUser: (state, action) => {
state.user = action.payload.user;
// Save user state to localStorage
localStorage.setItem('user', JSON.stringify(state.user));
},
logout: (state) => {
state.user = null;
// Remove user from localStorage
localStorage.removeItem('user');
},
},
});
export const { setUser, logout } = authSlice.actions;
export default authSlice.reducer;
@@mdalmamunit427 Thanks!Helped me
@@mdalmamunit427 Sorry but It didnt helped me.When ı resfresh and login again times and times, Localstorage was empty...I am stuck?
@@mdalmamunit427 Sorry, It didnt helped me. I am stuck for days...Thanks for ur time.
@@mdalmamunit427 Great project! However im also getting the same error where there is no user info in local storage, I tried to replace the authSlice.js code with the one you provided in this reply but still no user info in local storage when logging in, can you help me, sir?
Great project! I hope to see more like it. I've been stuck with RTK Query for almost eight months, but you made it possible to clear my concepts. Thank you so much, and may God bless you .
It's my pleasure, my little contribution helps you well ❤️🩹
Awesome project....❤...sir its request to make some unique projects using mern😊
Yeah, it’s also a real-world project
This is amazing. Big Thanks Sir
Welcome @yantech.4249
amazing video learn many new things from the video....
It’s my pleasure
I want help on 1:31:06 mine was through error 500 through catch
wow bro
Ur project is amazing but i request u please do make traditional CSS in ur next projects.
It would be greatly appreciate if u do that :)
Okay
great project 👍 , but 08:32:15 my localStorage is empty and user is showing null in auth state too
just login again, if not solved by login, contact me on Telegram
i am also facing this error like null in navbar'
hiii
your isssue solve ?
@@youtubersreaction5731 your issues solved or not ?
@@spotlitengn3356 solved brother
Can you help me from 08:32:15, why is it not showing up in localStorage
Ah I fixed the error, great video hihi
it's great, you fixed it without my support. Go ahead ❤️
@@tiendung3703 bro please help me i am also facing this error like null in navbar
please help me i am also facing same issues like localstorage null
la solucion es la siguiente:
en authSlice.js no escriban import { createSlice } from "@reduxjs/toolkit"; letra a letra como lo hacen en el video, lo que si deben hacer es escribir la palabra createSlice y cuando salga la sugerencia de importarlo le damos enter y automaticamente se importa de la manera correcta, si no sale la sugerencia mientras escriben createSlice pueden teclear control + espacio y automaticamente sale la sugerencia, asi que en pocas palabras el error es de importacion de import { createSlice } from "@reduxjs/toolkit";
Thanks!!
Thank you 🎉❤❤
Most welcome
Create travel full stack web to share the beautiful place in world..
By clicking the related blogs it can not navigate the blog page? What to do?
Contact me with screenshots or short video, firstly try to console log the related blog, then also check the api, or check the regex method
can you provide us source code
Deployment Video ??
Check the video description
i think make some strong and hard projects . here mainly crud operation working thats it . use other technology like redis , docker and so on so far not just a simple one . its not gone a
help us
Thank you for your feedback 😊
where is the code for register user?? timestamp?
Check out at 07:41:51
@@mdalmamunit427 no i mean you dont have handled the register page as you did for login check your code
@@mdalmamunit427 no I mean you don't have handled the register form and check for an existing user in db like you did with login
Must Make a medium-sized project with Context Api
Okay will try
can we upload images from from our local folder in the system?
No, you can keep your image from any image hosting platform and use the url
in starter files there is no blog.json file
please check here:
github.com/mdalmamunit427/hotels-rooftop-starter-files/blob/main/frontend/public/blogs.json
@@mdalmamunit427 Thank you so much❤❤❤❤
Brother please provide the blog.json file for data. plz
check the starter files please, I have attached all json data and images
Bro why you don’t use timestamp... Timestamp keeps us on track during learning in long video.
I added but why not working, I don’t know. Please wait and let me fix again
Great.pls give source code
Contact me on telegram
Why are u talking with nose?😅
Sorry for the unwanted areas
Please add the timestamp 🥲🙏🏻
Check, it’s already added
@@mdalmamunit427 ok, thanks man. This is the best project I have seen so far 🙏🏻🔥
@@mdalmamunit427 thank you so much for this project 🙏🏻
I want help on 1:31:06 mine was throughs error 500
I want help on 1:31:06 mine was through error 500 through catch
contact me social media, I need to see what the error, send me screenshot