Build A RealTime Chat App With React & Appwrite Cloud

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

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

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

Наука

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

25 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@emmanuelmunachi1801 Год назад

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

@jkny771 Год назад

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 2 месяца назад

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

@michaelchiz8055 Год назад

❤ great tutorial

@MrTomer157 Год назад

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

@sanjaybatak3549 Год назад

Thank you Brad 👌

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

this tutorial has helped me a lot thank you

@missphantomhive2796 Год назад

Excellent tutorial!

@andrecauselof4103 Год назад

Thank you for you work !

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

love to see a Dennis feature once in a while!

@judevector Год назад

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

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

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

@blue_berry_pie64 Год назад

thank Brad and Dennis!!1

@tejasnasre3074 Год назад

Bro you helped me 👍

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

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

@Michael_harry4 Год назад

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 Год назад

Nice job

@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)?

@habib_nuhu Год назад

Perfect

@owaismalik Год назад

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

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

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

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

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

@bigexpectation Год назад

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

@DennisIvy Год назад

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

@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

@DanielClipsTVS Год назад

what a supprise

@romulororizz Год назад

🙏🏼🙏🏼🙏🏼🙏🏼

@serychristianrenaud Год назад

Thank

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

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

@jeanssmith5864 Год назад

❤😊

@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

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

is there a good way to batch delete messages?

@EmiedonmukumoDickBoro-kb9bn Год назад

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

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

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 10 месяцев назад

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

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

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

@dumbdavinchi3638 Год назад

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 Год назад

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

@hiryuimajin Год назад

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)

@john_smith281 Год назад

What is the difference between appwrite and supabase?

@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.

@n_fan329 Год назад

First 😂❤

@bacemsmiri795 Год назад

Nah i'm the first XD

@dumbdavinchi3638 Год назад

you both are second i am first *asserts dominance

@n_fan329 Год назад

😂😂

@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?

@vishalqalandari 5 дней назад

you should put them in .env file and shouldn't upload that .env in github if you are making it opensource, instead should make a .env.sample, in which you should put name like VITE_APPWRITE_URL= // Put you Appwrite URL over here, and write like this. If you talking about serverside, then, on severside, when you host your project or site, they ask for the environment variables like in vercel or in any other, they ask you for .env file or environment variables. ( BTW, I also teach programming in my this YT channel, only have 140+ Subscribers, so you are also a fellow programmer so make sure to follow me 🥺🥺)

@santoshmore2953 Год назад

Is it fully responsive?

@danyventura8654 Год назад

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 Год назад

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 Год назад

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 Год назад

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 Год назад

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

@codernerd7076 Год назад

@@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 11 месяцев назад

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

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

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

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

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

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

Yes, I get this problem

@stavroskefaleas6320 Год назад

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.

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

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

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

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

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

can't fnd the app database permission

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

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

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

use role any

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

How do I deploy this?

@ajiskon100notout Год назад

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

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

were you able to deploy it?

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

Did you deploy it

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

is there anyone who completed this project , can its working

@surajbhardwaj2599 Год назад

which vs code theme?

@DennisIvy Год назад

Halcyon

@surajbhardwaj2599 Год назад

@@DennisIvy thanks!!

@vishalqalandari 5 дней назад

You Should Have rather used Production Level Practices ( Good Practices ). The Practices you used were the good but,not saving in .env or not making one file for appwrite functions made them bas...Always remember, thousands of people are learning from you so make sure to teach them the right Way...I know, I also teach coding, it takes lots of time but still you need to teach the right way...

@sudershansingh2839 Год назад

It appears better than firebase. Is this free ?

@DennisIvy Год назад

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 Год назад

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

@michaelreid4300 Год назад

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 Год назад

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 Год назад

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 Год назад

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

@EmiedonmukumoDickBoro-kb9bn Год назад

Hello Brad please I want to ask you something very important 🙏