Building reactive web apps on Convex

hi cj from convex here today we're going to walk through how convex is the best way to build modern reactive web apps so what is convex convex is a modern backend as a service it helps you manage your global state going all the way from your components in the browser to the database to show this we're going to walk through a group journaling app that i built to keep in touch with a few friends let's get started so here's the main idea my friends and i can each have our own sections in the app and we can add daily goals write a journal entry for the day and check off our goals as we do them through the days but unfortunately since my app isn't actually wired up to any back end whenever i refresh the page everything just goes away let's fix this by managing our app state on convex there are two steps to porting an app to use conflicts the first is to write server side functions that run on convex's back-end and then the second is to call into these functions from our front-end components let's add a function to query all of the app state for a given month convex functions are written in typescript or javascript if you prefer and they have access to a globally distributed database it's really easy to query it here we're filtering for a document whose month field is equal to the month we're looking for then calling into this function from our front end component is really easy all we need to do is use the use query hook provided by the convex client which sets up data binding between our react component and the output of that function on the server and that's it let's commit our changes push up to the repo and deploy it in edify okay let's open our deployed app now when i recreate my profile everything is actually stored on convex's servers to prove it let's refresh the page everything is still there even better if we open up our app twice once in each browser tab changes that i make in one of the tabs automatically sync to the other let's take a step back i didn't have to make any explicit subscription management code or invalidate particular records to reload them from the back end all of this is happening automatically all i had to do is write my server side logic to query a particular month state and then bind the result of that function to my react component using the use query hook so next if i send this link to my friend james he can start making his changes on our deployed version and they'll just start streaming in again we didn't have to manually do the any subscription management reactivity works end to end going all the way from our app's components to the back end and its database all right that's enough for now but if you'd like to learn more go to convex.dev and you can join our beta we'd absolutely love for you to build all types of stuff on our platform and give us feedback on what you think hope to see you there