Build and Deploy a Full Stack Social Media App | React JS, Appwrite, Tailwind CSS, React Query
HTML-код
- Опубликовано: 31 май 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 RUclips 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
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!
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!
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
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 🔥
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.
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!!
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
this is a comprehensive yet essential tutorial indeed. thank you brother, keep up the good work. much love from South Africa🙏❤
Now that's how to start a weekend 🎉🎉🎉 ! Thank you Adrian!
This is beyond amazing, thank you Adrian. Amazing work as always!
Thank you, Tessa!
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?
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'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.
here again with another outstanding project. truly love your hardwork
Thank you so much 😀
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 .
Amazing video, one of the clearest and best tutorials I've ever done. Thank you!
This is definitely the next project I'm doing. I'm excited!
Wonderful!
Another wonderful and useful project from Adrian. You are the best!❤
Thank you! Cheers!
i really appreciate the content, cant imagin how i learn all this as self taught without this channel
I really like the visualization part. Keep going, bud🥳
Wow Adrian... looking forward to this ..this looks super awesome
You and me both!
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.
the active learn is amazing , please keep giving the best!
Your way of teaching is calming and reassuring ! Helps people to learn at ease and keep learning new stuffs everyday !
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 😊
Wow! Yet another extraordinary project! 🤩🔥
Thank you! Cheers!
I want to say thank you for this wonderful tutorial, I learned the process and now here I am with my full developed website :)
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 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!
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
i loved the way you explained each and every thing
I have learned so much from you! Keep up the good work!
Awesome, 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
Thank You so much!!! All of your videos are better then some of paid courses out there.
I can't believe I missed best tutorials for all these months, but it's good to be back.🙂
Just finished now
Its marvolous bro .....
Thanks for deliver the best content on youtube
It's my pleasure
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!
The efforts and love you dedicate to your work is inspiring...thank you!!
Thank you for this tutorial Adrian! You are one of the best on YT :)
You're very welcome!
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!
Beautiful, i agree even paid courses cannt provide such content
That's the goal!
Another amazing course. I really tend to learn so much from you. ❤
And I see you've upped the time
I appreciate that!
Thanks for the active lessons sir...I just now noticed it on the timeline....Please implement in all your future videos
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
I learned a lot from the video. Thank you, master 🙇
Glad to hear that!
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?
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
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.
Bro your contents are amazing, I love it !!
The greatest teacher on RUclips right now ❤
Thanks!
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
Now I know how to spend my weekend ! Thanks a lot for this amazing content
Any time!
this is as usual high world class content here... I love it. thanks for sharing it on youtube.
Your Videos are no.1 on RUclips | You are No.1 Teacher in the World | Thanks
It's my pleasure
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!
I've learned so much from you over the years. Thank you so much!
You are so welcome!
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.
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
It is the best way to start project based learning along with the best javascript tutor and his teaching skills✌🏻😇
Glad you think so!
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!
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?
Wow stunning. Thank you.❤❤❤🎉🎉🎉
Thank you! 😊
Absolute Legend!!! 🔥
Yoo Dennis, thanks!
You're amazing as always, thank you so much!❤❤
You're so welcome!
This video dropped at the Right time....was just thinking of learning how to use Appwrite....thank so much ❤
Enjoy!
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!
As always amazing
Thanks!
This guy is a geniues! Thanks for this cool course @Adrian.
Thank you!
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 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
JSM never disappoints 💯
Another great project delivered!😀
Thank you! Cheers!
Mind Blown away 🔥🔥🔥🤯🤯🤯 Amazingly Superbly Perfectly Well done
Thank you!!!
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
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 :)
What did you said on Active Lessons is absolutely correct and also helpful me.....😊😊
Adrian, thank You for this project too! I would say something I guess many people agree... Such services like appwrite, sanity, strapi is good from one side, but from the other side people who made projects on it completely depend on it too... and when they (services) change conditions everything become more complicated and projects could not be done same way as when You make video tutorials... Thats why it could be perfect if You make more projects where backend or admin part created from scratch same as frontend... we understand the moments of sponsorship and partnership... but if You sometimes do both part from scratch could be perfect! Anyway thank You for Your great work and always positive voice! I just say my opinion... ;) !
Appwrite Url need to be updated please. Or should we simply register a free account? Your affiliate will not work then.
I'm facing issues with the web displays. The button, form won't align or move to the center of the page
same
yeahhh my fav youtuber is back ,waiting for every friday😁
Yay! Thank you!
Love the content! Thanks Adrian!
Thanks!
Anyone got this error
" 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."
How can I solve it
this occurred after copying the globals.css and tailwind.config.js file
@@hardiksharma8097 I also got this error just follow him for few more minutes and it will go away.
or just comment the `bg-dark-1` property for initial steps.
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.
I REQUEST YOU TO MAKE ALL YOUR VIDEOS LIKE THIS WELL EXPLAINING EACH AND EVERY FEATURE BEING IMPLEMENTED THANK YOU.
"This is great! Thanks, Adrian, for such useful content."
Glad you liked it!
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 :)
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?
You are a beast!!! Keep going, and we will follow you.
I appreciate that!
May God continue to reward you ❤....such an amazing video
Amazing content ❤ May I ask what theme do you use?
It's called Copilot
Hi I was following your project and I'm getting an error on the console: Failed to load resource: the server responded with a status of 400 ()
did you find a solution?
Wow ...exactly what I am looking for....Thanks JSM
Glad it was helpful!
Wow, amazing!! I am diving IN!
Rock on!
Damn bro 🔥🔥 Adrian, can u provided more react native content? Tym
More to come!
Adrian, no TypeScript.
I want JavaScript, React , Redux, Appwrite, Tailwind projects please.
Ok coming soon
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
Amazing sir i can't wait for this project to work on this ❤❤❤
Same here
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!