Build A RealTime Chat App With React & Appwrite Cloud

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

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

[@vincentge1334]

Also the approach we take when we build Appwrite ;)

[@gamingarea9011]

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]

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

[@shubhamkakad10x]

this tutorial has helped me a lot thank you

[@user-vs5qy7kh7m]

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

[@gamingarea9011]

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

[@iawds75]

love to see a Dennis feature once in a while!

[@aliftaf.n892]

Love much of this tutorial, thankss

[@gamingarea9011]

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

[@trying-code3726]

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

[@sanjaybatak3549]

Thank you Brad 👌

[@MrTomer157]

AMAZING !!! THANK YOU SO MUCH FOR THIS TUTORIAL

[@gamingarea9011]

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

[@andrecauselof4103]

Thank you for you work !

[@michaelchiz8055]

❤ great tutorial

[@blue_berry_pie64]

thank Brad and Dennis!!1

[@tejasnasre3074]

Bro you helped me 👍

[@missphantomhive2796]

Excellent tutorial!

[@ollyoctavian]

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

[@judevector]

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

[@owaismalik]

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

[@habib_nuhu]

Perfect

[@kokoaung2914]

Nice job

[@felipesantana7376]

Very good project, I finished

[@gamingarea9011]

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

[@harshdeep7015]

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

[@Michael_harry4]

great job!

[@gamingarea9011]

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]

is there a good way to batch delete messages?

[@user-uw4jw6bj2x]

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

[@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 ;)

[@DanielClipsTVS]

what a supprise

[@davidpepple171]

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

[@serychristianrenaud]

Thank

[@romulororizz]

🙏🏼🙏🏼🙏🏼🙏🏼

[@ollyoctavian]

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?

[@IOKunalLad]

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]

❤😊

[@Wanderer2035]

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 KZbin for appwright :/. But there’s a whole bunch for FireBase

[@DennisIvy]

I will have some soon

[@gamingarea9011]

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

[@EmiedonmukumoDickBoro-kb9bn]

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

[@mrsmola2354]

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]

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

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

[@vincentge1334]

Honestly helps to learn how backends work, even if we designed Appwrite with the intention that you won't need to. We try to make Appwrite simple, but still follow the same common-sense knowledge you learn from building traditional backends. I think where Appwrite makes the most sense and provides value is just saving time. Like imagine if you ran a freelance business to build apps for your local small businesses. Appwrite lets you get the same job done in a quarter of the time. But I still think knowledge of building your own backend helps you make better design decisions.

[@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.2567]

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

[@limitedclashbimal8842]

Did you get solution

[@dokgu]

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.

[@raypamber]

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

[@randomone1414]

Yes, I get this problem

[@santoshmore2953]

Is it fully responsive?

[@danyventura8654]

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

[@rafaelmauricio2067]

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

[@codernerd7076]

Tip: don't use any 3rd party services unless you do not have any other way! There are a ton of videos on KZbin 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]

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]

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

[@user-rc7qy3ws6i]

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

[@dev-adarsh3860]

use role any

[@john_smith281]

What is the difference between appwrite and supabase?

[@vincentge1334]

I think it's a matter of design philosophy. Supabase gives you a PostgreSQL DB and a more raw, exposed API. Might be your cup of tea. Appwrite gives you a more tailored DevEx, with a collection of documents type DB interface and query builder, which might be more natural for your apps. Appwrite gives you 10+ function runtimes (if you self-host) and a few more options for oauth providers. I genuinely think you should try both and go with what feels more natural to you.

[@Mellow_Soundscapes.]

can't fnd the app database permission

[@treva383]

How do I deploy this?

[@ajiskon100notout]

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

[@iawds75]

were you able to deploy it?

[@limitedclashbimal8842]

Did you deploy it

[@learnwithsuyashshukla8347]

is there anyone who completed this project , can its working

[@surajbhardwaj2599]

which vs code theme?

[@DennisIvy]

Halcyon

[@surajbhardwaj2599]

@@DennisIvy thanks!!

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

[@illam-saiv]

34:05 bro leaked his nationality

[@EmiedonmukumoDickBoro-kb9bn]

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

[@sharonamaina3553]

you always use shortcut can't you just code an app by yourself without backend assistant

[@n_fan329]

First 😂❤

[@bacemsmiri795]

Nah i'm the first XD

[@dumbdavinchi3638]

you both are second i am first *asserts dominance

[@n_fan329]

😂😂

[@bhaimohsin]

2:13:32

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

[@vincentge1334]

Appwrite exposes a document type API, but the underlying DB is actually a SQL db. For a REST API, we just thought collection of document returned as JSON is more natural to work with. Down the road, we might give you the option to choose MariaDB, PostgreSQL, MongoDB etc.

[@jonatan3678]

im not getting any response from console.log when doing Realtime .. anyone else?

[@jonatan3678]

i did exactly everything like in the tuto..

[@randomone1414]

Yep, me too

[@hellojworlddd]

Thanks T !!!!🦾