Build A RealTime Chat App With React & Appwrite Cloud

Подписаться 2,2 млн

Просмотров 62 тыс.

50% 1

Fullstack chat application with Authentication and real-time capabilities with Appwrite cloud. Be sure to join the Appwrite discord channel for technical support questions and say hello on Twitter:
Appwrite Website: t.co/HVsoUClCF4
Appwrite Twitter: / appwrite
AppWrite Discord: / appwrite
Source Code: github.com/divanov11/React-Ap...
Read more about Appwrite cloud here: appwrite.io/public-beta
Timestamps:
00:00 - Intro
1:16 - Demo
2:20 - Appwrite Intro
8:08 - Basic Setup
8:08 - Basic Setup
12:00 - Configuring Appwrite
17:55 - Collection Permissions
19:45 - Querying Database Items
25:15 - Adding Styling
31:50 - Create Messages
40:50 - Sorting Queries
43:45 - Limiting Queries
44:23 - Deleting Messages
50:45 - Adding Realtime events
1:07:30 - Protected Routes
1:12:15 - Adding AuthContext
1:22:00 - Login User
1:39:45 - Persisting User After Login
1:47:20 - Logout User
1:51:00 - Register User
2:06:50 - Document Level Permissions

Наука

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 105

@emmanuelmunachi1801 11 месяцев назад

This came along just as we needed it. Thanks for all you do on this channel Brad.

@jkny771 11 месяцев назад

I love the speed of this tutorial. Straight to the point and no unnecessary talks. Thank you traversy media as always.

@gamingarea9011 4 месяца назад

this project is for only one chat room but what to do if there are multiple users then how i can store every chat ? do you have any idea@vincentge1334

@shygrammer Месяц назад

As always!

@ikik790 6 месяцев назад

Learnt a lot new things and its my first video tutorial of appwrite as well .. Thanks a lot Traversy media for sharing this valuable info

@user-vs5qy7kh7m 6 месяцев назад

Thank you for your tutorial. I love your teaching style, less UI with more appwrite implementations.

@gamingarea9011 4 месяца назад

this project is for only one chat room but what to do if there are multiple users then how i can store every chat ? do you have any idea

@shubhamkakad10x 2 месяца назад

this tutorial has helped me a lot thank you

@axlblazeauthor 11 месяцев назад

love to see a Dennis feature once in a while!

@trying-code3726 6 месяцев назад

i am from bangladesh ... i like your videos ... finaly i have completed this video and work with you ... thanks for creating this video sir

@ollyoctavian 2 месяца назад

Also, thank you Dennis! This tutorial was extraordinarily helpful. Do you think you could do a deep dive on permissions (with databases, realtime etc)?

@MrTomer157 11 месяцев назад

AMAZING !!! THANK YOU SO MUCH FOR THIS TUTORIAL

@gamingarea9011 4 месяца назад

this project is for only one chat room but what to do if there are multiple users then how i can store every chat ? do you have any idea

@michaelchiz8055 11 месяцев назад

❤ great tutorial

@sanjaybatak3549 11 месяцев назад

Thank you Brad 👌

@owaismalik 11 месяцев назад

Thanks Brad. Can you please do a video on some AI Chat Bot for a Website? :)

@andrecauselof4103 11 месяцев назад

Thank you for you work !

@missphantomhive2796 11 месяцев назад

Excellent tutorial!

@judevector 11 месяцев назад

Wow wow what a Banger let's f*cking go ,am early to the video ❤

@aliftaf.n892 8 месяцев назад

Love much of this tutorial, thankss

@gamingarea9011 4 месяца назад

this project is for only one chat room but what to do if there are multiple users then how i can store every chat ? do you have any idea

@user-uw4jw6bj2x 5 месяцев назад

thanks for this kind of videos . and can we use this real time chat feature as comments section in any application ?

@harshdeep7015 10 месяцев назад

When I connect with realtime it is saying invalid origin register your new client cloud appwrite io as a new web platform on your project console dashboard

@blue_berry_pie64 11 месяцев назад

thank Brad and Dennis!!1

@tejasnasre3074 11 месяцев назад

Bro you helped me 👍

@bigexpectation 11 месяцев назад

very cool! just as an fyi: vite is pronounced [veet], it's french for "quick":)

@DennisIvy 11 месяцев назад

Oh I had no idea! I'll remember that for the next video ;)

@ollyoctavian 2 месяца назад

Why do you need to "hide" project id? You can't access process.env server-side and everything is permissions-based, precisely so that it can be run client-side, no? Am I missing something?

@Michael_harry4 11 месяцев назад

great job!

@gamingarea9011 4 месяца назад

this project is for only one chat room but what to do if there are multiple users then how i can store every chat ? do you have any idea

@kokoaung2914 11 месяцев назад

Nice job

@felipesantana7376 5 месяцев назад

Very good project, I finished

@gamingarea9011 4 месяца назад

this project is for only one chat room but what to do if there are multiple users then how i can store every chat ? do you have any idea

@habib_nuhu 11 месяцев назад

Perfect

@thatbaldguy001 9 месяцев назад

I can't make request...I've installed everything i could, used different browsers but i keep getting preflight header errors

@IOKunalLad 10 месяцев назад

At 27:38 - The message is not rendered.Instead its showing me an error: ERROR: Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

@EmiedonmukumoDickBoro-kb9bn 11 месяцев назад

I need help in understanding how the .env file works after deployment

@john_smith281 11 месяцев назад

What is the difference between appwrite and supabase?

@ivramuito 10 месяцев назад

is there a good way to batch delete messages?

@Wanderer2035 10 месяцев назад

Can you do a tutorial for appwright that’s not a project tutorial but a normal tutorial going through all the different parts. And not just a small 30 minute tutorial but more of an in depth tutorial. I’m mainly asking because there’s no other tutorials like this on RU-vid for appwright :/. But there’s a whole bunch for FireBase

@DennisIvy 9 месяцев назад

I will have some soon

@gamingarea9011 4 месяца назад

this project is for only one chat room but what to do if there are multiple users then how i can store every chat ? do you have any idea@@DennisIvy

@dokgu 11 месяцев назад

I’m not a fan of having to check for those strings when determining if it was an insert or delete or whatever operation it was.. even the part where you need to check the string that includes your user ID from the permissions to display the trash icon. It just seems like an ugly solution.

@stavroskefaleas6320 11 месяцев назад

I see that this platform uses a document database internally. There is also supabase that uses postgres and pocketbase that uses sql lite. I would like to see a comparison of these 3 new platforms.

@dumbdavinchi3638 11 месяцев назад

Is it really necessary to get your hands dirty by actually understanding and building entire backend from scratch or you can just use these backend as services from get go? i am overwhelmed by how complex backend actually is(i am trying to do backend in express)

@DennisIvy 11 месяцев назад

There are use cases for both. A lot will depend on the complexity of your project and what you need to accomplish.

@hiryuimajin 11 месяцев назад

I suggest to look into the docs and find out what you actually just need. For me whenever I need to do backend that's how I do it. It saves me some time from reading the entire documentation (not unless it's necessary)

@mrsmola2354 8 месяцев назад

Hello, nice video btw! But i have one question. In your messages collection , you have body, user id and username. Now it doesnt matter if its messages or like posts or smthing another. I think that there should be only that user id and connect it with that user id from auth db where you get username. But i cant find how can i do this in appwrite. Because there is one posibility but only in node js, not in the web enviroment.

@gamingarea9011 4 месяца назад

this project is for only one chat room but what to do if there are multiple users then how i can store every chat ? do you have any idea

@santoshmore2953 11 месяцев назад

Is it fully responsive?

@DanielClipsTVS 11 месяцев назад

what a supprise

@titonecarter2071 19 дней назад

I'm getting error client.subscribe not a function, please how do.i.solve it? I'm using docker with appwrite

@romulororizz 11 месяцев назад

🙏🏼🙏🏼🙏🏼🙏🏼

@raypamber 3 месяца назад

appwrite giving server error if I use any query anyone else have this problem ?

@randomone1414 2 месяца назад

Yes, I get this problem

@Mellow_Soundscapes. 6 месяцев назад

can't fnd the app database permission

@treva383 7 месяцев назад

How do I deploy this?

@danyventura8654 11 месяцев назад

I've deployed on GH-Page but i get a blank page, I can't link to my Repo in here for some reason. I get a 404 Error in the console.

@ruru-dev07 11 месяцев назад

hi bro, i have a problem 27:30 i can't see in page you face this problem?

@limitedclashbimal8842 3 месяца назад

Did you get solution

@codernerd7076 11 месяцев назад

Tip: don't use any 3rd party services unless you do not have any other way! There are a ton of videos on RU-vid that shows how to make Real-time chat apps without 3rd party services!

@DennisIvy 11 месяцев назад

Yep, I've made video's with native API's as well, however you typically end up spending A LOT of time setting up your own infrastructure and managing when you scale. Take web sockets for example, great tool but a pain to setup and manage at scale. Ultimately, the choice is yours so use what you find fits you best :)

@nested9301 11 месяцев назад

it's 2023 bro time to move on from the traditional way of doing things my fingers hurt from typing

@codernerd7076 11 месяцев назад

@@nested9301 never build your apps with 3rd party services that did not even release their pricing model still... your butt will hurt a lot more from the kick after you get fired because of this service shutdown!

@Wanderer2035 10 месяцев назад

Oh okay so your saying its often better to build your application with MySQL and a server language than to use appwright or firebase?

@kerrongordon 8 месяцев назад

You do know you can self host Appwright it's free and open source

@danyventura8654 11 месяцев назад

How do I deploy this project on Netlify? it was published but the URL was broken..

@rafaelmauricio2067 9 месяцев назад

Create a netlify.toml file on the root directory containing: [[redirects]] from = "/*" to = "/index.html" status = 200

@jeanssmith5864 11 месяцев назад

❤😊

@serychristianrenaud 11 месяцев назад

Thank

@user-rc7qy3ws6i 7 месяцев назад

getting this error can anyone help App write service :getCurrentUser::error AppwriteException: User (role: guests) missing scope (account)

@dev-adarsh3860 5 месяцев назад

use role any

@learnwithsuyashshukla8347 11 месяцев назад

is there anyone who completed this project , can its working

@ajiskon100notout 11 месяцев назад

*Hi! Can anyone help me with how to deploy it, once we build this?*

@axlblazeauthor 10 месяцев назад

were you able to deploy it?

@limitedclashbimal8842 3 месяца назад

Did you deploy it

@surajbhardwaj2599 11 месяцев назад

which vs code theme?

@DennisIvy 11 месяцев назад

Halcyon

@surajbhardwaj2599 11 месяцев назад

@@DennisIvy thanks!!

@sudershansingh2839 11 месяцев назад

It appears better than firebase. Is this free ?

@DennisIvy 11 месяцев назад

Yep! Fully open-source. You can setup and deploy up your own instance locally and host yourself but there is the option to use the appwrite cloud. Appwrite cloud is still in beta so there is no pricing yet but when the do announce they promise to offer a generous free teir if you choose to go that route.

@nested9301 11 месяцев назад

@@DennisIvythe object storage what cost money , almost all cloud storage provider gives u 5gb max on the free tier 🙂

@michaelreid4300 11 месяцев назад

Hey yall i have a genuine question. Ive been studying front end development for 7 months now. I hear about tutorial hell all the time, whats the point of watching these type of videos if its just going to keep you in tutorial hell. I am just genuinely curious thats all. Im trying to break out of it is all.

@nested9301 11 месяцев назад

Ithink the point is u can skip all the errors and the pain point he is going through trying to set up the project , ans saves time having to read the docs.

@Kevin-jc1fx 11 месяцев назад

Can you think of an idea and build it on your onw? That is the point. Tutorials help you understand which tools are available and how to use it. After it, you need to use those tools to solve your own use cases. If you feel like you are in tutorial hell, build your own projects in between tutorials. When you get stuck, learn to find solutions on your own. You can start with a todo list app and build more and more complex projects from scratch on your own. When you can build something medium size on your own, try to get customers in order to solve real world problems and have a bette understanding of what the market needs and what are your strengths and your weaknesses.

@michaelreid4300 11 месяцев назад

@Kevin-jc1fx Ohhh I see, so start an idea like a todo app. If I get stuck, refer to a tutorial as documentation?