Build Real-time Full Stack Instagram Clone with MERN Stack (Socket.io, React.js, MongoDB)
Вставка
- Опубліковано 11 вер 2024
- Learn how to create a real-time Full stack Instagram clone from scratch using React.js, Express, NodeJS and MongoDB & Socket.io. This project is perfect for those looking to enhance their skills in web development and add a valuable project to their portfolio. Stay tuned for more exciting updates in future parts!
TIMESTAMPS:
00:00 Build Demo
15:54 Backend Setup
26:58 Connect with MongoDB Database
33:50 Create All Models
56:41 User Controller, Middleware, cloudinary etc
2:23:35 Create Post Controller
3:21:07 Create a Message Controller for Chatting
3:52:05 Frontend Setup (React vite, shadcnui)
3:59:26 Building Signup/Login Pages
4:20:35 Setup React-Router-Dom
4:33:46 Building Left Sidebar Page
4:52:43 Building Post Page
5:47:20 Setup Redux Toolkit for State Management
6:05:08 Implement Delete/like/dislike/comment
8:05:58 Building Right Sidebar Page
8:23:23 Building Profile Page & Follow/Unfollow
10:00:20 Building Chat & Message Pages
10:30:42 Implement Socket.io for real-time like
12:10:55 Implement Protected Routes
12:16:03 Let's Deploy Our App on Render
Source Code: github.com/Sur...
Join Discord: / discord
👉UA-cam Clone:
Ep-01: • 🔴 Let's Build & Deploy...
Ep-02: • 🔴 Let's Build & Deploy...
Ep-03: • 🔴 Let's Build & Deploy...
👉Netflix Clone: • Build Fullstack Twitte...
👉Master Redux Toolkit: • Master Redux Toolkit i...
👉Complete Javascript for Reactjs: • Master Javascript Befo...
👉NextJS Authentication App: • Build Full Stack Authe...
Tags:
instagram clone with reactjs
instagram clone with mernstack
instagram clone with nextjs
fullstack instagram clone
mern stack projects
HashTags:
#mernstackproject
#reactjs
#nextjs
In 2024, it is the most practical web development course on UA-cam. We will understand each concept theoretically as well as practically. After understanding the concepts, we will create projects and do fun challenges.
So make sure to subscribe to my channel, So you can't miss any updates.
Follow ME:
LinkedIn: / surendrakumar143
Disclaimer: This build is for educational purposes only. The views, opinions, and technology choices expressed in this video are solely my own and do not reflect those of any current, past, or future employers or affiliations.
![[Backend Project 🚀] Realtime Device track | Map with node.js express and socket.io | Maps | Leaflet](/img/n.gif)
i have never ever seen this type of project Thank you☺. Keep it up bro 🤗 love from pakistan
Thanks bro for your love & support ❤
Love from Pakistan🥰
@@awaixjoyia ok
Itni khushi 😂😂😂😂❤🎉
Back to back videos mern projects 🎉🎉 itna efforts
Thankyou bhaiya 😊
Thank you brother for your love & support. ❤
hey buddy i am building same project for past 3 days
& now I came across your video.
Thanks for visiting ❤
same bro, but I got stuck at real time notification part.
your videos are really good and the which way you are explaining all the things is amazing thanks for helping all the students and for your lots of efforts to make this type of learning content i really love this content 😇😃
Thankyou brother ❤
bro this project is next level if you have time please make it responsive
Bro, please make a video about how you learned the MERN stack so perfectly.
Noted!
love from pakistan patel sahb 🥰🥰
Thank you brother for your love & support. ❤
Abhi kl hii socha rha thaa aesa video❤❤❤❤❤
Lo fir agya😅 thanks for watching ❤
Thank you Bhaiya ❤🎉
I am learning new concepts from last Job portal. Such a good project it was 🔥🔥
Thanks for watching ❤.
Never stop learning 🚀🚀
It is no doubt one of the best Project i have ever see with great explaination ,lots of love bhaiya and specially the deployment part of this video is totally lit
@@memessite9261 thankyou❤
@@patelmernstack most welcome 🤗
Bro I love this amazing project
Maja aa gya demo dekh kr wanderful
Thankyou So much bro for your efforts and consistency. ❤❤🎉🎉👍🏻👍🏻
Thanks for watching❤
Jabardast Project : New Subscriber
Thankyou ❤
Waiting for your next video❤.. Agli mern ya next kya daal rahe ho!? 🎉
Mai toh kehta next pe krwao thoda.. Food delivery h kya agla!?
Cant wait for ur next 🎥 video
Ha mai bhi soch ra thoda Nextjs & TS.
you are doing execelent job , please bring uber clone in react js and mango db
@@vaibhavdixit6005 Noted!
Keep it up Bro! 🗿
I appreciate it 🙌🎉
(Advice) - You may add chapters
Nice 👍 lagy raho bro bohot achy projects banty hy. Aap
Thankyou brother ❤
Very cool project brother keep making such amazing projects❤❤❤❤❤
Yes! Ap logo ka support rhega toh bilkul 💪. By the way vo toh hai hi ❤❤
Bhai responsive portfolio bnwa do aap acha explain karte ho aapse hi sikhunga next Monday Tak bnwa do ..... placement bhi chl rha h thoda urgent me bnana h
such an amazing project we want more
Thanks for watching ❤
Very good project and easy to understand♥
Thanks for watching ❤
3:08:54 ~ jaise tum bandi ki figure ke bare me sochte ho waise hi code me har corner cases or possibilities ko socho
Great bhaiya ❤
Thankyou ❤
Best mern stack project
Thanks for watching❤
Great work
Thankyou ❤
having problem at 3:55:25......jsconfig.json....when try to create component.....shows ERR:"jsconfig.json is malformed JSON5: invalid end of input at 1:1"
its really good project bro.
Glad you like it👍
Does it have infinite scrolling, and if not how do add it. If possible add this feature in this or make a new video on this.
Noted!
Superb mind-blowing amazing content..
Thankyou ❤
Nice 👍
Bro can u bring react course in separate video
Noted!
@@patelmernstack thnks bro 🙏
12 ghante ka video bhai ye koi mazak nahi hai ,i am glad bhai ❤❤,but beggenr ke liye kuchh batado ki mearn sikh sake 😊 ,bhai 1 video banao jisse hum jaldi se jaldi sikh sake ❤
Bilkul
@patelmernstack bhai ek baat bolu please reply 😅
very logic building project...
next project try figma clone with realtime screen sharing
bhai postman vs code me hi download karlo easy hai bohot... Baki video ek number che ho !!
backend completed✅✅ 😊😊
Great 👍
Great brother
Thankyou ❤
Day 1 - 1:01:13 ✅
bhai mern per ek ecommerce project bna do tailwind css use karke
i am creating a task management backend by your tutorial of inta clone its funny lol but well it's helping me a lot thanks broooooo.... !!!! timestamp only for me i have to come back tommoroww !! 1:16:20
Hello Sir , I love your Content Can you make a complete video on school management system SaaS model
Noted
awesome project
Thankyou ❤
Bro is it responsive coz you used tailwind so i think it should be btw amazing project and one more request try developing a full stack (mern) e learning platform like udemy with payment gateway integration thanks again ❤
Noted!
@@patelmernstack Yes, Mern LMS platform 😀😀
thanks for helping me learn
🙌
Buddy please don't use abusive words because your content is educational everybody watches it on laptop and sometimes family is around
Ok next time I will care.
New subscriber for you! Im also learning react
Thankyou😇
Please bring a qna video
Hello bhai kya aap bata sakte hai mern sikhne mai kitna time lag sakta hai currently mai js pad raha hoon projects banana strt kar diye hain . React strt karne wala hoon final year mai hoon.
i'm not able to understand logout api how it is working without provide any id and another things 🤔🤔🤔🤔🤔. but in my ocde it is not working . not remove cookie. i don't know how can you do with this code
const logout = async (_, res) => {
try {
return res.cookie("token", "", { maxAge: 0 }).json({
message: "Logged out successfully"
})
} catch (error) {
console.log(error)
}
}
but in my code this is not working
const logout = async (req, res) => {
try {
// Clear the cookie
res.cookie("token", "", {
httpOnly: true,
sameSite: 'Strict',
expires: new Date(0)
});
return res.status(200).json({
success: true,
message: "Logged out successfully"
});
} catch (error) {
return res.status(500).json({
success: false,
message: "Logout failed",
error: error.message
});
}
};
please add some update when i see one notification its read and notification number will zero. and when someone like same post its show new notification and old one is also show as read notification
from Bangladesh brother
Bhai signup me problem aa raha hai,cannot read properties of un defined (reading data) at signuphandler aa raha hai
55:00 bakchodi wala group was personal 😂😂
🤣
Bhaiya deploy karne par realtime update nhi ho rha
Bro this was amazing 🤩 i want to make minimalist music player so please make video tutorial
Noted!
bhai please ek ERP system banao for college and placement very interesting project . I have been doing it but finding difficulty please help.
Noted!
Bhai apna jo linkedin pe food delivery project banaya h react redux aur api se please wo bana do bhut help milagai as a beginner 🙏🙏🙏
Solute Man❤
Thankyou ❤
bro thank you. ❤❤❤❤ very nice.
Thanks for watching❤
Bhaiya please next project Spotify ❤
Noted!
Good Project brother btw are you working somehwere ?
Bhai heroku per deployment ka bhi ek short video bna do
Patel bhaiya.. Banking ka koi MERN project banwa do please
Nice bro 👍 yashika 😎
Thanks for watching ❤🤣
i did everything same but during request sending through thunder client, it's showing 404 Not Found status. pls help
Mern stack pr food order delivery app laaona bhaiyya please kisi ne v acche se nhi bataya hai aap se expect krta hu aap project k through padhate chalte ho jo kafi accha lagta hai.please la dena ye app
Noted!
very best video all over youtube
NOW please make video making apk of it and connect to same database
Thanks ❤
New subscriber ❤
Thankyou ❤
Amazing
Thankyou ❤
Which vscode theme you are using ?
Sir project is very nice but if you add searching algorithm it give damm cool✨👍
Good idea 💡
Finally 💖🔥🔥🔥
Yepp 🚀🚀🚀
I wonder why you aren't creating a single API and UI for each function, and then another API and UI for another function.
Alternatively, you could create one UI or React page with its corresponding API, and do the same for the next page. This approach could help students maintain momentum and interest.
What do you think?
Good idea 💡
Bhai aap ne itni mehnat ki video bhi banai aur source code bhi de diya 😶
Mera ek hi maksad. Aap logo ko seekhana hai PRO FullStack developer. 🚀 source code deta hu taki kisi ko peoblem aaye toh dekh ske
nice 🔥🔥
Thanks 🔥
@@patelmernstack no problem 🔥
Bro jab user koi post kerta hai to ek image cloudinary per upload hota, to sab koi user apna koi post delete karega tab cloudinary se bhi to delete hona chaiye na nhi to bo bekar me space reserve kerke rakhega?
Ha uske liye tum delete wale controller me destroy use kr skte ho.
@@patelmernstack usme to shayed key dena dota na url me jo rehta?
bhai kitna essan karoge ham gareeb ko superb bhai really brother back to back banger bro
Thank you brother for your love & support. ❤
Maina apko phla bhi bola tha syd app bhul gya hoga please da iss week bando 🙏 request h apsa
Make a video on how you learn mearn stack
Nice Video
Thanks for watching ❤
is it beginner friendly
Yes
3:52:00 backend completed !!
👍👏
Bhai isme story or reels ki functionality kaise add hogi video banao please mane job portal bana liya h bhai
can we upload a video too, if yes then what should i do for that?
Upload video from your system rather than image. And you have to allow cloudinary for video as well.
bhai kya yah website responsive h?
Hello bhaiya 2:14:30 pe logout api test karte time bas processing hi ho rha hai (gol gol ghum rha hai bas)10 minut se wait kar rha hu koi result nhi aaiya h 😢😢😢😢
Jab api integrate kr rhe ho toh vha finally block me loading false krna hai.
please make a backend learning course, I have tried to learn from chai aur code but that was very advanced i feeel, can u teach backend from scratch? or give me some new resources to learn
Noted!
Bhai aap autocomplete ke liye konsi extension use karte ho (for classes)
For tailwind class -> Tailwind css intellisense
Bhai woh tmne follow/unfollow ka feature implement kiya h kya.. Kyunki tmne jo code github pe push kiya usme ig nahi h abhi tk!!
Demo se thoda alag lg raha ek baar dekho ki latest code push kiye ho kya
Sb kuch hai follow/unfollow all.
🙏 redux-persist/createPersistoid: error serializing state TypeError: Converting circular structure to JSON
--> starting at object with constructor 'gS'
| property 'io' -> object with constructor 'mf'
| property 'nsps' -> object with constructor 'Object'
--- property '/' closes the circle
at JSON.stringify () Does anyone know this error? It appears right when I log in, also some 401 GET ???? Thanks 🙏
how can i use django instead od mongodb
Hello bhaiya edit profile ka api test karte time "UNEXPECTED:FIELD " Name ka error aa rha hai jisme node module me multer folder ke andar index. Js name ki file hai useme check karne par ' LIMIT_UNEXPECTED_FILE ' AA RHA HAI HELP ME PLEASE
solve hua ya nhi?
@@user-dj5qd7ui9c nhi huwa bro tumhara bhi same error hai kya?
bhai Job-Portal aur iss wale project ko responsive kr do plzzzz
bro next project real time ticket booking ya integrating payment gateway kuch late !
Yes, stripe payment gateway included hai next MERN project me.
@@patelmernstack kab tak aayega bhaiya project koi idea
Bhai logic building kaha se sikha aapne mujhe bhi bta do yaar prectics kiya mene fir bhi nahi ho rha ! javascript
Practice krte rho logic banna start ho jyega.
Spotify clon please bhi bhot bar requests kar chuka hu🙃
@@De-CODE7 Noted!
@@patelmernstack is bar bana do bhi..
Har bar noted he bol ta ho 😭🫠
Bro i am beginner so plz tell how much should i learn first to start with these projects
At least very basic mern knowledge required.
Please Bhaiya videos ko partition kar Dena....dekhne mai easy hoga
during testing api when i try to upload image
{
error: { message: 'Request Timeout', http_code: 499, name: 'TimeoutError' }
}
same error
Pre requisite kya hai sir?
Mern stack basic knowledge
MAKE MORE MERN STACK VIDEOS AND YOUR CHANNEL WILL GROW FAST ❤❤ , YOu can check stats of your videos --- more people want quality MERN STACK PROJECTS, like this :) THANKS, #MORE MERN PROJECTS
Nice idea 💡.
Thanks for watching ❤❤
Please add comment reply features
Shivani : hello patel patel : hello Shivani : chalo ghumne patel : chalo Shivani : ni jaungi
Thoda ulta ho gya lol...🤣🤪