MERN Stack blog app project. How to create a full-stack app using React, Node.js, and MongoDB. MERN tutorial using React Hooks and Context API for beginners.
You are watching the last part (3rd). Here are the previous parts.
First Part (Design): https://youtu.be/tlTdbc5byAs
Second Part (Node.js API): https://youtu.be/OML9f6LXUUs
Buy me a coffee: https://www.buymeacoffee.com/lamadev
Source Code: https://github.com/safak/youtube/tree/mern-blog-app
Join Lama Dev groups
Facebook: https://www.facebook.com/groups/lamadev
Instagram: https://www.instagram.com/lamawebdev
Twitter: https://twitter.com/lamawebdev
Discord: https://discord.gg/yKremu4mPr
0:00 Introduction
1:58 React.js how to fetch data from backend
05:40 Displaying all posts on the homepage
8:32 React router dom using dynamic link
11:12 Fetching single post using Axios
14:32 Fetching all categories
16:44 How to use query in Axios
21:47 React Node.js Register System
30:56 Why we are using Context API
32:35 React Context API Best Practise
44:30 React Node.js Login System
50:10 Using Local Storage with Context API
53:53 How to use current user with Context API
55:05 React Logout using Context API
59:10 Creating new post using Axios
01:01:55 React upload file to the Node.js server
01:11:55 React delete post
01:17:51 React update post
01:28:22 Updating user using Context API
01:46:38 Outro
"await" was mentally hurt during the entire project. 😁
Great Video
very good very nice
I couldn't get past the error 431 "Request Header Fields Too Large". Tried every possible solution I could find with no luck. If anyone else encounters this problem and manages to solve it, let me know 😓
Thank you for the video. But I have a request. Could you please post another video demonstrating everything from scratch, front end, back end and database
why my login component render twice : LOGIN_START render twice on console and LOGIN_SUCCESS or LOGIN_FAILURE also render twice
I am using module import on backend so after adding app.use("/images", express.static(path.join(__dirname, "/images"))); this command app.use("/images", express.static(path.join(__dirname, "/images"))); works for image path
I am wondering how I would create a separate page where the audience I am writing to can see the blogs but have no access to create an account or the ability to create an account?
I want to have one page when I post it goes to that separate page.
Do you have any advice for me?
Great overall tutorials. My question is, did we ever cover how to assign categories to our blog posts? I would imagine we would want to set that on the write page, possibly using a checkbox to capture that data?
Anyone have a good solution for this?
You are awesome . I learned a lot of things today because of your tutorial. thanks a ton.
anyone got the Out of memory error at 44:02 ??
I met this bug and seem hard for me to fixed
I have ignored this channel multiple times (because of that llama pic) .but when I started the playlist, I realized that this individual is not only incredibly talented but also a true genius in the art of teaching.
I can't thank you enough for this amazing MERN tutorial! Your teaching style is simply outstanding and by far the best on YouTube. I was able to follow along with ease, and your explanations were incredibly clear and concise.
You have a real talent for breaking down complex concepts into simple, easy-to-understand terms. I've learned so much from this tutorial, and I feel confident in my ability to use MERN to create my own web applications. Thank you for taking the time to create such an exceptional resource for the community. I look forward to watching more of your videos in the future!
At 26:15 while registering with no value it should give 500 internal server error acc. to lama. but it is accepting that with 200 OK.
email
:
{name: 'ValidatorError', message: 'Path `email` is required.', properties: {…}, kind: 'required', path: 'email', …}
username
:
{name: 'ValidatorError', message: 'Path `username` is required.', properties: {…}, kind: 'required', path: 'username', …}
Pls help
Can anyone help me with hosting this? I am unable to push the client folder into github
You are the best Lama. Started with this project two weeks ago. I wasn't particularly good with JS but completing this tutorial really helped me a lot. I just finished it and added some validations and enhancements, I am now gonna start with the Booking App on your channel. Looking forward to it 🙂
Can someone tell me how to add data in posts.
anyone struggling with axios? error help
who faced error In updating user contex API ->useNewUrlParser, useUnifiedTopology, useFindAndModify, and useCreateIndex are no longer supported options. you don't need to write that
1:16:40 I ran into 500 internal server error after trying to delete a post, anyone has any idea?(SOLVED)
Hey lama dev,
I've been following your channel for a while now and i'm glad to say my development growth has improved substantially because of what you post and how you teach. I just want to say a Big Thank You.
Not able to see posts on homepage at 6:25…Any solutions?
ntext.js:6 Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)
i got this error in context.js file in line no 6-user: JSON.parse(localStorage.getItem("user")) || null,
and i my page does not rendering after adding this line
🥰💫❤🔥
How do you add posts through axios without setting headers?
very good explanation
Hey,am not able to fetch data from backend i used proxy inside the package.json while using axios.get in console not showing any post
@LamaDev while creating a post on the concole it is giving internal server error 500
can you please help me in this
During login functionality, if I write an incorrect username or pwd, the backend server closes automatically and I have to restart it again. This is causing problems in its deployment. Any Solution???
I am getting an internal server error (status: 500) while deleting the post.
Something is wrong with the request data it seems. Can anyone find me a solution to this?
completed this project!
Why do we have to save the data to local storage since is coming from mongooseDB?
i am not able to delete post with same code
is any error in api-post-posts.js
please any one tell
I'm trying to make admin schema but it's not working can someone help me out here
o front não funciona
i am getting one problem after fatching data from data base bolg are lossing there fomrating.means in which format i stored data and publise but reselting blogs does nota have any space .so what changes i want to do so blog show in proper formet
Hi guy, I forgot to demonstrate usage of the Action file. In the video, we directly dispatched them using 'type' and 'payload' like:
dispatch({ type: "LOGIN_SUCCESS", payload: res.data });
But you can use actions.
dispatch(LoginSuccess(res.data))