Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query
Vložit
- čas přidán 16. 06. 2024
- Build a modern social app with a stunning UI with a native mobile feel, a special tech stack, an infinite scroll feature, and amazing performance using React JS, Appwrite, TypeScript, and more.
⭐ Appwrite: apwr.dev/JSMastery
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/socia...
GitHub Gist (Assets + code): gist.github.com/adrianhajdin/...
Active Lessons: www.jsmastery.pro/blog
There is an editing error in the CZcams video at 3:13:28. I discuss the useCreate mutation hook before it's made at 3:19:28. Just follow along and implement the hook at 3:19:28; it'll work fine.
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:05:56 - Setup
00:15:50 - Routing
00:18:51 - File & Folder Structure
00:23:49 - Auth Pages
00:51:16 - Auth Functionality - Appwrite
01:02:39 - Storage & Database Design
01:31:21 - TanStack Query
02:15:48 - HomePage
02:48:27 - Create Post
03:39:48 - Post Card
04:32:53 - Post CRUD
04:49:44 - Post Details
05:02:03 - Explore Page
05:29:03 - Search Results
05:39:22 - Active Lesson
05:45:58 - Deployment
![React Tutorial For Beginners [ReactJS] | ReactJS Course | ReactJS For Beginners | Intellipaat](http://i.ytimg.com/vi/9vZ8ELqerPo/mqdefault.jpg)
![React Tutorial For Beginners [ReactJS] | ReactJS Course | ReactJS For Beginners | Intellipaat](/img/tr.png)
I worked in adult education for years, mentored students at college and created courses on Udemy and YT but this is top notch. Great work!
Coming from a client facing role with excels, emails, conferences and endless context switching; Adrian's voice has become my new meditation. I work on projects for 10-12 hours in a single flow and my growth in less than 3 weeks has been surprising to me, I started from a plain website front end, and just finished social media app with all functionalities, logic, back-end. Its crazy how much better my anxiety and doom scroll induced ADHD is feeling.
A mi no me salio lo de poner el fondo negro.
Now that's how to start a weekend 🎉🎉🎉 ! Thank you Adrian!
this is a comprehensive yet essential tutorial indeed. thank you brother, keep up the good work. much love from South Africa🙏❤
Honestly you guys are insane, the amount of knowledge harboured in these videos is unreal, I hope you guys do a zero to hero course soon on Web Development
Amazing idea!
This is beyond amazing, thank you Adrian. Amazing work as always!
Thank you, Tessa!
Bro....u really went all out on this project....best practices, best tools for the job (ts, react query), external libraries to make life easier, and not to mention the ACTIVE LEARNING PARADIGM, which is just sick
Thanks so much for this course, can't wait to purchase your Next.js course 🔥
I finished the video. I really love the active learning paradigm and the tasks! Thank you for your hard work and putting together this amazing video!
Hi @gyurisc, congrats! well done.
i am having an error please can you fix it
I want to thank you guys. I've learned so much on this project. I'm new to ReactJS and this project helped gain some experience. Not to mention the latest tools, and Appwrite is sick.
Thanks so much, and keep up the good work.
bro can i ask u something
The rate at which you are releasing this content is phenomenal. This is my #1 go to channel for learning how to build applications. I cant wait for the day you release a tutorial on building an e-learning platform.
Coming really really soon!
I really like the visualization part. Keep going, bud🥳
here again with another outstanding project. truly love your hardwork
Thank you so much 😀
Wow Adrian... looking forward to this ..this looks super awesome
You and me both!
This is definitely the next project I'm doing. I'm excited!
Wonderful!
Amazing video, one of the clearest and best tutorials I've ever done. Thank you!
really amazing how simply you guys explain complicated things and the way this project is structured properly, truely amazed thank you so much keep creating such content .
Another wonderful and useful project from Adrian. You are the best!❤
Thank you! Cheers!
Wow! Yet another extraordinary project! 🤩🔥
Thank you! Cheers!
the active learn is amazing , please keep giving the best!
Thank you so much for this complete project! I didn't know i'd end up spending sooo many hours on this and all the small bugs I've had along the way but i'm very happy that it all works now and it's such a valuable porfolio item!!
Hello Lea I’m currently finished the project but having trouble with the sign-up and sign in page is there anything you did to fix this problem I just want to see if everything works properly but sadly this error is getting in the way of that
Everything looks same and amazing like Threads app.
Starting to explore my hands on these too.
Thank you so much for providing this
My pleasure 😊
I'm thoroughly impressed with your excellent course! Spending 25 hours immersed in programming with you, but the learning experience was invaluable. Despite making several mistakes along the way, I successfully navigated through them. I'm convinced that I'll be purchasing your course - it's been a rewarding journey. Thank you!
this is 6 hours course, how you have spent 25 hrs ?
there is 1 comment below as well who also says , he/she spent 25 hrs.
what am i missing ?
@@akshaynarwadkar5264 I think he is talking about whole time of watching the tutorial, writing code and debugging.
i really appreciate the content, cant imagin how i learn all this as self taught without this channel
I can't believe I missed best tutorials for all these months, but it's good to be back.🙂
Wow, I am truly amazed by the generosity of this project! 🙌 They could have easily monetized this valuable content, but instead, they've chosen to make it freely accessible to all students and learners. I am incredibly grateful for their efforts. 🙏
I'm proud to say that I landed a job thanks to the knowledge I gained from their videos and by working on projects alongside them. 🚀 Thank you so much for this incredible opportunity! 😊
That's amazing!
Can i ask u somrthing?
Just finished now
Its marvolous bro .....
Thanks for deliver the best content on youtube
It's my pleasure
i loved the way you explained each and every thing
Your way of teaching is calming and reassuring ! Helps people to learn at ease and keep learning new stuffs everyday !
I have learned so much from you! Keep up the good work!
Awesome, thank you!
just completed the project. Honestly, I learned a lot of good practices and reusable code practices. Thanks a lot JSM.
congrats bruh 👍🏻
Bro I am thinking of starting this project, can you tell me that we are using app write and wheather it's free or paid?
Do we need to pay for something in this entire project?
i am having a challenge ..in my appwrite users are signed up but on my front end, am told that its failed
Too many errors on the explore, queries(getNextpagepam). Loader without views and signin error. Even after api.ts add projectID.. Pls send a link for fix, love the classes. GODBLESS..
@@himanshuchahar5374 Have u done this project brother ? Is it anything we have to pay for that ? Appreciate.
I want to say thank you for this wonderful tutorial, I learned the process and now here I am with my full developed website :)
Thank you for this tutorial Adrian! You are one of the best on YT :)
You're very welcome!
I am watching your course from two years and thanks for all these free courses and projects ✨ as I learn many new things from your projects
Thank you!
This is absolutely fantastic! Thank you for this free course.
You're very welcome!
Another amazing course. I really tend to learn so much from you. ❤
And I see you've upped the time
I appreciate that!
Another great project delivered!😀
Thank you! Cheers!
I am incredibly grateful for your time and effort to continually grace us with amazing valuable contents that people charge to teach.. truly grateful
I appreciate that!
I learned a lot from the video. Thank you, master 🙇
Glad to hear that!
Now I know how to spend my weekend ! Thanks a lot for this amazing content
Any time!
Just love you guys! the quality of your videos is incomparable! A hero to zero , from scratch JS or React or Next course would be really helpful
My man, why you want to go from hero to zero?
The greatest teacher on CZcams right now ❤
Thanks!
Absolute Legend!!! 🔥
Yoo Dennis, thanks!
this is the most knowledgeable content I have ever found. Thank you for this video. May you shine bright. All the best to this team in helping us to progress in technologies with ease...
I've learned so much from you over the years. Thank you so much!
You are so welcome!
Wow. Eager to come to this after I finish your Next.JS course! Please have a project with react native next! Would be great to see how your genius works overthere as well. Thanks for the education you are providing.
Hey bro, how was that course?
Great suggestion!
You are amazing man, You are saviour to all the developers out there really man appreciate your efforts. Thank you so much for so much content.
It's my pleasure
Thank You so much!!! All of your videos are better then some of paid courses out there.
yeahhh my fav youtuber is back ,waiting for every friday😁
Yay! Thank you!
Thanks a lot for this amazing tutorial! Spent around 25 hours overall following it, as well as doing the Active Lessons. I must say if you diligently follow it, it really teaches you a practical skill. The tech stack showcased is also great: React Query feels like an overhead at the beginning and you wonder why on earth have it to begin with, but as you progress and especially once you start doing the active lessons, it becomes obvious how it makes things so much easier.
What an amazing piece of feedback. Thanks for following it diligently!
this is 6 hours course, how you have spent 25 hrs ?
there is 1 comment below as well who also says , he/she spent 25 hrs.
what am i missing ?
@@akshaynarwadkar5264 I was actually doing the website myself while watching?
buddy if you think it's a 6 hour video then you're doing it wrong...that means u're just copy pasting the code which results in ZERO learning...code along with him..try to implement features on your own and ,debug the code and then look at the solution@@akshaynarwadkar5264
I spend 23 hours, i had a lot of errors, but at the end was worth
I want to say my thanks to you for creating this tutorial. It was amazing, but more suitable for people who are already very acquited with React and WebDev in general. Want to remark that in the very beginning I used JS instead of TS and also I did all the backend and APIs using Supabase. It was pretty challenging, since some of the components I created differently so there was a lot of debugging.
And I also wanted to say that it was very clever to use userID for likes and saves, since if we used username, if the user changed it, the likes and saved would still have the old username and this would result in a nasty bug. However, since the userID doesn't change, it was swiftly eliminated.
Well Done!!
Is everything that Apprwrite does can you do it in Supabase as well?
@@Ivan-xi7to yes, but it's a bit harder
I am in the same situation as you, I will do this project with JS but I want it to do it with Supabase, do you think is worth it to continue with Supabase or just do it with Appwrite? Thanks man!
@@Ivan-xi7to Appwrite will be an easier way, but if you want more independence with the project that doing it with Supabase is a great challenge. If you are a beginner though, you should consider doing it with Appwrite first. Good luck with your coding path!
@@Ivan-xi7to Also in Supabase there is separation in layers for users metadata and public data, so when you reach the step with showing all users and generally working with not only the logged in user, but all of them, you will have to use some tricks to make it work.
This video dropped at the Right time....was just thinking of learning how to use Appwrite....thank so much ❤
Enjoy!
As always amazing
Thanks!
Your Videos are no.1 on CZcams | You are No.1 Teacher in the World | Thanks
It's my pleasure
Bro your contents are amazing, I love it !!
Active lessons that you provide are a really Awesome idea, I was thinking of adding new features on my own but then I got the surprise of "Active Lessons". Now I am going to complete the lessons.
I am almost done with this project and it is a hit!!! Lots of error on my part but i was able to debug all, I am overwhelmed with all i have learnt so far but it is definitely worth it . Thank you
how beginner-friendly is it. i am new to react
@@genexsis9203 it is beginner friendly, i am also new to react.
@@genexsis9203 start building and in the way if you face some problem , learn that right away . My suggestion would be make some simpler projects before , available on the same channel and then build this project . It's really really TopNotch.
did you get this error: AppwriteException: Invalid query: {"method":"equal","attribute":"accountId","values":["65ff5cffdfcc9eccf353"]}
? at 2.06?
@@VikramMega yes try installing appwrite version 13.2.0
Beautiful, i agree even paid courses cannt provide such content
That's the goal!
You're amazing as always, thank you so much!❤❤
You're so welcome!
Love the content! Thanks Adrian!
Thanks!
Wow stunning. Thank you.❤❤❤🎉🎉🎉
Thank you! 😊
I love it when you use free resources for learning cause most of us cannot afford those tools which need to buy for practice ❤❤❤
You are so welcome!
this is as usual high world class content here... I love it. thanks for sharing it on youtube.
"This is great! Thanks, Adrian, for such useful content."
Glad you liked it!
is anyone else having issues with globals.css coming up with problems?
JSM never disappoints 💯
Thank you for the React content, it is appreciated that you continue to upload projects focused on React to learn it well before next , greetings
This guy is a geniues! Thanks for this cool course @Adrian.
Thank you!
It is the best way to start project based learning along with the best javascript tutor and his teaching skills✌🏻😇
Glad you think so!
Thank you so much. I love your in depth videos, but I also like your shorter (60-90min) videos that dive into specific topics like Redux Sagas/Thunks, Axios, Testing, Debugging, etc.
You are so welcome!
i was waiting for this moment !!
The efforts and love you dedicate to your work is inspiring...thank you!!
Hey Adrian, you started using useCreatePost hook in the PostForm file without creating it in the queries&mutations file....At 03:13:00 in the video. I think it's the video Editor's mistake... Because the useCreatePost hook and createPost api function were created later in the video at 03:19:00... It means that the video editor miscompiled the videos .... and put video of 03:13:00 to 03:19:00 and 03:19:00 video to 03:13:00....I think many viewers will understand it.... But it can be a little confusing for some viewers... & It looks that it can't be corrected without deleting this video... So, would recommend that you just add a warning about it in the description/comments for viewers.....
Thanks, will check immediately and address it!
thank you for pointing it out, i was so close to be stuck at 03:13:00 if it wasn't for u. bless
Thanks, I got stuck for days figuring this out. Even tried replaying the video again and again from before the 3hr mark. lol
so awesome man! But if this was made with Next13, I think it would've been more amazing.
You can do it on your own in Next14 :)
You are the best, I follow you with great love and I am amazed by your knowledge. It is a pleasure to listen to your voice and the way you explain ALL .🎉🎉🎉
Wow, thank you!
Wow ...exactly what I am looking for....Thanks JSM
Glad it was helpful!
The best software development university ever ❤
Thank you!
Of course is the best for you, cuz it makes your learning easy as covers ONLY what needed for this kind of project
Show us more about react native, as flutter is the new competition and we don't wanna get lost of this react ecosystem.
more to come!
Yes agree. I hate flutter and I would like to focus only in react native since it's react based
@@thereaper7682 flutter is a Google's product hence it offers more because Android is from the same. Google should think equally for both
Exactly 💯
@@thereaper7682why so? is flutter code so bad?
Thank you for the project. I am brazilian, and for now i don't have yet monetary conditions for buying your masterclass as well, but on the future this is one of my plans without debt.
I liked a lot how to learned several things that i didn't knowed. As you said, i will try to implement more functionalities and stunning design patterns to the app as well.
Mind Blown away 🔥🔥🔥🤯🤯🤯 Amazingly Superbly Perfectly Well done
Thank you!!!
Appwrite Url need to be updated please. Or should we simply register a free account? Your affiliate will not work then.
Whenever I'm trying to logout (which works fine) we get a console error:
AppwriteException: User (role: guests) missing scope (account)
at Client.
It seems like you are trying to use account.get() without any permissions or having an active session in your AuthContext.tsx - Is this intended? How do we resolve this? I've tried to check for an activesession with getSessions but without any luck.
You are a beast!!! Keep going, and we will follow you.
I appreciate that!
Wow, amazing!! I am diving IN!
Rock on!
Amazing content ❤ May I ask what theme do you use?
It's called Copilot
Damn bro 🔥🔥 Adrian, can u provided more react native content? Tym
More to come!
I REQUEST YOU TO MAKE ALL YOUR VIDEOS LIKE THIS WELL EXPLAINING EACH AND EVERY FEATURE BEING IMPLEMENTED THANK YOU.
Thanks for the active lessons sir...I just now noticed it on the timeline....Please implement in all your future videos
Hey if anyone know how to fix the issue with logging in and signing up can you please send me a message I’ve gone through the whole project but not successful in that part of it other that I have everything completed.
hey were you able to fix it? i am also stuck on the auth part as well
This tutorial is a mess. The github repo doesn't always match what he's typing on screen. And in the Create Post section, he's checking to make sure a file has uploaded before we even setup any of the createPost/uploadFile/getFilePreview functions inside api.ts. Which doesn't make any sense and is super confusing.
I’ve been following the tutorial exactly the way he’s doing it, and every time I try posting something, I get the “Please try again” toast. I’ve done EVERYTHING the exact way it’s done in the video
that's an editing error, he mentioned about it in the description
amazing, another banger 🔥
You already know!
I just finished the whole video! I can say it was a challenging project, with a lot of personal debugging, but everything went perfectly! I really appreciate your work for creating this valuable content, and I just can't wait to start a new project!🔥
hey can you share ur github link just so i can reference if i face any errors
Same here... having a hard time getting after 1h 50min
@@belairbeats4896 did you complete appwritecloud setup properly?
Hey can you share your github link ?
Any chance you implemented the follow and unfollow functionality?
I'm facing issues with the web displays. The button, form won't align or move to the center of the page
same
Thank you so much 🙏. I am 14 and I really want to become a software developer before I'm 18, any tips? A
You can do it!
this is insane! 🔥, thank you so much
May God continue to reward you ❤....such an amazing video
Adrian, no TypeScript.
I want JavaScript, React , Redux, Appwrite, Tailwind projects please.
Ok coming soon
Hi, are most websites (mid-level not Facebook level) using tools like Firebase, Supabase, AppWrite, etc.. to handle Auth/Databases/Storage or is it much better for the long run to build their own systems?
I like using these tools, especially if they're open source like Appwrite :)
Thank you for sharing. Greatly appreciated.
Glad it was helpful!
I really like your videos very much. They are so great. I have been following your videos for years and I really hope you make a firebase tutorial
I am getting the below error after copying the globals.css file,
`The `bg-dark-1` class does not exist. If `bg-dark-1` is a custom class, make sure it is defined within a `@layer` directive.`
Whats wrong with this ? I am new to tailwind css
You have to use the globals.css and tailwind.config.js that I provide
For anyone looking, you have to add the 'bg-dark-1' colors in the tailwind.config file.