React Node.js MySQL Social Media App Tutorial | Full Stack Social Network App

You are watching the 2nd part.

If it is valuable to you, you can support Lama Dev.

Join Lama Dev groups

0:00 Introduction
02:02 Installation
04:20 MySQL Social Media App Tables and Relationships
53:41 React-Query Tutorial
59:40 MySQL Select Timeline Posts (User and Friends’ Posts)
01:11:44 React Add New Post to MySQL Database
01:16:45 React-Query Mutation Tutorial
01:31:10 Social Media App Fetch Comments
01:36:10 Social Media App Add a New Comment
01:40:10 React Social Media App Like/Dislike Functionality
01:53:20 React Fetch User Profile from MySQL
01:59:56 React Social Media App Follow/Unfollow Functionality
02:10:26 React MySQL Update User
02:29:45 React MySQL Delete Post
02:37:24 Outro

[vaibhav]

Hey Lama if you are reading this, I just want to say thank you, I'm from very poor family trying to learn from your channel, I will definitely pay you when I get the job...Thanks you again

[ferdinandeke]

This is amazing Lama. You've been my best teacher I've got to be honest. Thank you for all you do and keep doing. On the next project pls, could we build a logistics web app, one where we could ship items across borders and the calculate the distances by zipcodes of the origin and destination of the product being shipped, also taking into account if it's a ground shipping or sea shipping and the parameters that are important for either of such shipping methods when calculating an estimated shipping fee. That's something I haven't seen anywhere on the internet yet. And I would love to see possible ideas that could help me build a start up logistics company. Thanks once more Lama.

[girishtiwale]

One issue I came across was using useQuery for the components like Comments & Post that are rendered multiple times in our app and almost spent an entire day banging my head over it. I thought others might as well come across.
when we use 'useQuery' in a component that is rendered multiple times, we are passing a queryKey (eg. ['comments']) to the useQuery hook which essentially becomes the same for all the Comments components that are rendered all over the application.

It is evident whenever we keep a comment box open for one post and then open second post's comment box, the first post's comments are changed with the second post's.

My theory is that queryKey is essentially the same for all the comments components. So it has an effect on all the components.

Making the queryKey unique for each component by appending the postId to the key(so that every queryKey will be different for different post's comments) did the trick for me.
eg. useQuery(["comments" + postId], fetchFn );

I don't know if there is any other way to resolve this conflict. All the other suggesstions are welcome as well, I would appreciate the feedback too.

[TofuShifu]

Thanks for this project tutorials, I really appreciate it!!!
And also, I've had some error while coding and these are how I solved them. Hope this help guys XD

***Error:
{
"code": "PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR",
"fatal": false
}
->Fix: run again index.js (api> node index.js) and then try again


***Error:
ER_NOT_SUPPORTED_AUTH_MODE in MyQSL
-> Fix: in query, insert this code:

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
(change ur 'password' now to another, Ex:123 to 456)

And then fix this new password in connect.js



***Error:
- Blank page when try to login fail( json undentified)
->Fix: try replace this code

const [currentUser, setCurrentUser] = useState(() => {
const storedUser =
if (storedUser)
{
try
{
return JSON.parse(storedUser);
} catch (error)
{
console.error("Error:", error);
}
}
return null;
});


***Error:
- Timeout reached in Insomnia
-> Fix: check the correct link post, typo columns in MySQL, link in those event const handleRegister, ... This error happens when something is wrong, so u have to check all


***Error:
- Already accepted access for cors but still didn't work
->Fix: run again index.js (api> node index.js) and then try again


***Error:
->Fix:
Change the code in post.js into
export const getPosts=(req, res)=>{
const q=
`SELECT p.*, u.id AS userID, u.name, u.profilePic
FROM posts AS p
JOIN users AS u ON u.id = p.userID`

db.query(q, (err, data)=>{
if(err)return res.status(500).json(err);
return res.status(200).json(data);
})
}
*This error happened when u had something in code got wrong, check around the place u last did
*Remember to change the correct column of ur db
*After changed it, run again api (api> node index.js)


***My Stupid Error (XD) :
- return (
<div className="posts">
{error
? "Error!"
: isPending
? "Loading..."
: data.map((post) => <Post post={post} key={post.id} />)}
</div>
);

when realse this code, some of the object doesn't appear on the main website
-> Fix: Go to post.js in client
change name of those objects equal to columns in MySQL
EX: <p>{post.postDesc}</p>
means there's a column name "postDesc" in ur posts db


***Error:
- is not a function react-query, pocketbase, nextjs
-> Fix: Change Mutation code (lastest v5 for this time )
const mutation = useMutation({
mutationFn: (newPost) => {
return makeRequest.post("/posts", newPost);
},
onSuccess: () => {
// Invalidate and refetch
queryKey: ['[posts]'] });
},
});


***Error:
- Still error "Can't read properties of underfined(reading'map") after solved like in the video
-> Fix: run again api


***Error:
-Cannot read properties of undefined (reading 'includes' or 'length')
-> Fix: Change code to this
<div className="item">
{isLoading ? (
"loading"
) : ? (
<FavoriteOutlinedIcon
style={{ color: "red" }}
onClick={handleLike}
/>
) : (
<FavoriteBorderOutlinedIcon onClick={handleLike} />
)}
{data?.length} Likes
</div>


***Error:
- 404 Not found
-> Fix: check again those func such as Mutation, handle, upload, ...
Some place will be wrong when typing. Ex: makeRequest.post instead of put

[salmanpatrick]

A perfect tutorial. Perfect way of teaching and explaining things. I already had SQL knowledge so I didn't get much problems in understanding the logics. Can't to wait to do experiments with it and complete it's features.

My main goal to watch this tutorial was to understand the backend logic as UI is not a big deal. And I got it. In addition to that, I learned the advance folder structures and overall project organizing. This tutorial has helped me in many ways. Thank you so much bro. Please keep blessing us with such beautiful contents 💕🔥.

[selflearning]

Just in Time i just finished The full stack blog website and now this. thank you, i can't thank you enough. please provide us with more tutorials like this i really enjoy and learn from them.

[codewithgeeks]

Hey sir .. really thanks for the video and for the opportunity you keep giving to your community through the knowledge you keep sharing.
Please teach us how to safely deploy all this projects .
The aime for us should not be only to create but also to share links and have good portfolio's

[Dave-mozx]

graphql, testing, CI/CD, typescript, react native. Any one of these technologies will be fun to learn from you master Lama

[garpalion]

Want to say thank you very much for your projects!
Personally, I work with typescript and also can't implement everything in your way, but I still learn a lot from you and regardless, I just enjoy working with you!
I would like you to prepare some project with redux toolkit. I personally really need it.
Thanks a lot once again! You are great!

[ninjaplavi]

React Native, Node, and MySQL app would be a bomb. Thanks a lot!

[AIMEDIAinc-etkd]

Hello, I'm following your tutorial and I don't know why I'm not having the cookie after login. I tried with 3 browsers. I have a cookie only with insomnia.

[eren.sarioglu]

I've never seen a youtube channel as helpful as you. You are making excellent tutorials even that cannot be found in paid courses. I'll be following you, keep going on dude!

[beenbadamasyytv]

We thank you for your efforts to bring us useful projects with simple explanation absolutely for free.

It will be awesome if you can create a project with referral system functionality.
Because I have never seen it on YouTube.
Thank you God bless you

[SonnyBamra_]

Hey Lama - Thanks for the video. I really want to see the Git tutorial please.

[deepon]

login page onclick button after navigate home it's fixed

1-) Login.jsx add;
const {currentUser} = useContext(AuthContext);
2-)After handleLogin func open if statement;

if(currentUser){
navigate("/")
}

[melihgunasti]

çok güzel öğretici bir video olmuş teşekkürler şafak hocam

[adebisisheriff]

I don't only like your videos, I love it. Your video is essential for developers as water is essential for human body. Thank you so much Lamadev. More power to your elbow. Love you!

[frontend]

Lama thank you so much....Really You are you So make a video on advanced git.

[abyssfelo]

Hey lamadev, I would like to make a request. Would you please make a short video about nodejs on how we can store images to aws S3 bucket and the image url to MySQL database. Thankyou

[lexreal]

Woow this is really awesome..
Weldone LAMA
Will be great to see you develop a POINT OF SALE (POS) with MERN