Convex Package

In this chapter we're going to add convex as our backend and thanks to monarepo we're going to add it as an internal package so that we can share it across two different Next.js applications. But just before we do that I want to resolve a lint error coming from the build command. So it's not exactly preventing the build from happening as you can see it's successful. But if you scroll a bit up you can see that we have this odd warning. S-Lint cannot find package S-Lint JS imported from S-Lint config next JS.

So obviously it didn't break the build but when it comes to building your app it would be nice not to have these types of warnings. So let's analyze this. I'm gonna go ahead inside of my packages, slint-config-nextjs. This is where the error is reported to happen, as you can see. And it's specifically talking about slint-forward-slash-js package.

Now, a very easy way you can check if you have a package installed or not is by pressing down the command or control button and hovering over your packages. You can see that whenever I hover over an installed package, I can directly go inside of its node modules. But when I try that here, it's not working. And of course, you can just look inside of your package json and convince yourself that that package truly is missing. Now there is a very easy way of fixing this.

What we have to do is we have to use pnpm and filter option to add that package to one workspace exclusively. So pnpm and let's go ahead and add forward slash f and after this you have to type the package or the app where you want to install this. So this is F as in filter. So slint config and then just as usual add save dev slint js. Make sure you didn't add any typos here otherwise it will throw an error and now if you go inside of here you will see that a package json was updated but not just any package json specifically the one inside of packages slint config with slint forward slash js and you can see that now we have the same effect when I hold down command or control key meaning this is now installed and more importantly if I try turbo build it still succeeds as it did before but now no errors.

Perfect! So I think this was a nice little lesson in pnpm filters and fixing a bug. Perfect! Now let's go ahead and let's add convex. So head to convex.dev or use the link you can see on the screen to let them know you came from this video.

So convex is the open source reactive database for developers and the thing I like the most about this is when they say open source they truly mean it. I've seen people self-host Convex. They're not just using it as a trendy word. The other thing I absolutely love is their sync engine. So in here we have a very simple to-do example And it's nothing new.

We've seen to-do examples a million times. But what actually happens when I add a new to-do? You might be thinking, oh, cool. So they refresh all to-dos when I add them. That's not what happens.

The moment a new record is written to the database, their sync engine automatically updates the UI. And this was the wow moment for me, because I just think of building a chat application and now think of building a customer support application. Think of all the web sockets that you have to handle, all the messages that you have to transfer from the chat box widget, and then to the operator dashboard, and then think of all the statuses of the messages that we have to maintain. And now think of all the potential web socket issues that could happen. Think of all the mismatched keys.

All of those things are no longer a problem because this is an amazing sync engine that works out of the box. No configuration needed for real time. This is what made Convex such an incredibly powerful tool for me. And I think for this kind of project, it is absolutely perfect. The developer experience will be at minimum a hundred times better than if we were to try to do this without convex.

So let's go ahead and for now just create an account. Nothing more nothing less and after that you're going to enter their dashboard here. And depending if you've used Convex before or not, you might have some apps here like I do. You don't have to create any app right now because we're gonna do that in a moment. So what we have to do now is we have to add convex to our project.

But how exactly do we do that? Right? Because we want to do it as an internal package. So what I'm going to do is I'm going to be using this documentation again as a reference. I'm going to be using this.

You can see the link on the screen to visit this. It's their Turbo Repo, Mono Repo template. So I'm specifically focused on their backend package here, which is convex. And I'm also going to be referring to this, Packages UI. So I'm going to learn from all those three sources to create our new backend package.

So the way I'm going to start is by adding backend package here. And what I'm gonna do is I'm gonna copy our recently created maths package JSON. I'm gonna go inside of this package JSON and I will rename this from workspace math to workspace backend. And for the exports, I'm going to simplify it by changing it to be forward slash convex. And I'm not gonna open an object.

Instead, I will just directly go to forward slash convex and then I'm going to match every single TypeScript file inside. For the dev dependencies, I think this is okay. I don't think we have to modify this. Now our scripts will be a little bit different. And you can do that by going inside of this shared package.

You don't have to go inside. I'm just showing you where I find my information from. I'm going to go inside of packages and then in here I have two scripts that I need to run. So I'm going to replace these two scripts with these convex dev and convex dev dash dash until success which is our setup function. Notice how there is no build script meaning that this package will not run when we do turbo build which is exactly what we want.

And now let's go ahead and see what we have to add. So it looks like I need to add the convex dependency and it needs to have a TypeScript dev dependency. And I think that is solved by these two dev dependencies now. So what I recommend you do is save this file, leave it as it is, don't add anything new here and now go ahead and do pnpm install. That's it.

I just want you to do that And you can see it's already up to date. Nothing new has changed, but I think it might... I'm not sure if you have to run this or not. Let me just try and see. There we go.

You can see that when I run this, we have a new log file package backend resource. So that's why I told you to run it. Right? Even though nothing really changed, You can now see that we are using the linking for the TypeScript config and the TypeScript into our package JSON in the back end package. So now let's go ahead and let's add convex here.

The way we just learned how to do is using the filter back end add convex just like that. And now you can see that in our dependencies we have convex. So my version is 1.25.4 just in case you want to use the same version as me. Perfect! So let's go ahead and see what else we have to do here.

I'm gonna go ahead inside of this repository again and I'm going to borrow this so they do npm run setup workspace packages backend so let me try and do this using pnpm here and let me try filtering to the backend and let me try run setup can I do that? There we go it works so what happened now I ran pnpm and I filtered to our backend package and I said run setup So what pnpm did is it filtered to the backend package and it used the package json here to find the setup script. So now let's go ahead and I'm not sure if you are getting the exact same prompt here. I'm getting this prompt because I already have Convex connected to my account. In your case, you might be prompted with press enter to connect your Convex account and once you press enter it's going to open Convex website and in here you're going to have to confirm and then go back inside of your terminal and perhaps you can try and run the command again and then you should be seeing this kind of prompt right here.

Now you can choose between an existing project or as I said you can create a new project here. So I'm going to go ahead and I'm going to call this echo tutorial like that and I'm going to be using the cloud deployment and that will create a new convex project and after the functions are ready it should automatically close. Perfect. And you can see that now I have a new echo tutorial project right here. I shouldn't have any data, I shouldn't have any functions, I shouldn't have any files, nothing, a completely empty convex database here.

And now in here we have some new files. So the first file we have is .environment.local here. You can see that in here it's set our convex deployment to this specific name and convex URL to its specific convex URL. So you should definitely have that in here. And now we also have this convex folder.

And inside of here, we have this underscore generated folder. This is what's important that we can share across our applications because that's where the type safety is. But we also probably notice something immediately there is no git ignore in here. Well there is right But it's not exactly ignoring everything here. So what I'm going to do is I'm going to, I'm not sure actually if I have to add node modules here because I think node modules is omitted by global gitignore.

Yes, I think I don't have to manually add it here. But there are some things we can do to ensure that our backend package is set up a bit more strictly, right? Because I think this is okay already but you can see that in our mat for example we have the ts config which we don't really have here in the backend package so what I'm gonna do is I'm gonna go inside of here and I'm just gonna check if they have it here looks like they don't let me see what's inside of their gitignore so just the environment files that's fine let me see their package.json so they have those two files I think we're doing okay here so far. So here's what I'd like to do right now. I'm going to close everything here and let me just do a little reload window here.

Okay. The reason I reloaded my window is because you can see that my node module is only now grayed out because a second ago it wasn't grayed out so I was thinking oh is that being committed and yeah I can see now both of these are grayed out so that's what was worrying me I was thinking that maybe they are getting committed okay so what do we do next What we should do first is we should go inside of backend convex and we should create a schema .ts. And now inside of your schema here, let's go ahead and let's import define schema from convex server and let's import define table from convex server we can actually combine them And let's export default define schema here and let's add users to be defined table and let's give each user a name using a v from convex values. This will be a very simple string. Like that.

And save this file. And right now, nothing should really happen until you run TurboDev. And here's what you're gonna notice now. We now have a new workspace backend package being run here. So right now what we're doing is we are running simultaneously our widget Next.js application, our backend workspace, our web Next.js application, and even this watch script for our math utils, which we added just as an example, right?

But we use that example and that knowledge to now put convex inside of our package. Perfect. And after that, you can see it said schema validation complete, which means that if I now go inside of here, you can see immediately I have my users table here. Perfect. And basically whenever you develop with convex you should keep TurboDev running so all changes are synchronized because that's how you develop with convex.

So if I now go inside of the convex folder and create users.ts and if I export const query here, my apologies, get many and call query. Let me just... I kind of forgot how to write queries. So where you import query from is actually query from generated forward slash server like that and then in here you define the arguments and in the handler here make sure it's an asynchronous function it's not an object my apologies so it's an asynchronous function and in here let's go ahead and simply do users to be await. And you have to add the context here.

Context.database. Let me just check. Database.query, users.collect. Context.database.queryUsers.collect and return the users. So what we've developed now is a very simple getMany query which will simply fetch all users from our schema.

And you can immediately see that here in the functions. We now have users getMany and we can run this function if we want to. It's now returning empty array. So this is another super cool thing about convex debugging is super easy because literally everything you write in your backend is immediately synchronized with the dashboard here. So if it's easier for you to keep track of how many function calls you have, how the code even looks like, you can see we have the exact same code.

All the logs coming from here or in worst scenario errors or if the execution time is too long you can track all of that from here. So what I want to do now is I want to find a way to run this query in my front-end here. So right now let's go inside of web app page.tsx right here And I do want to keep just the apps forward slash web. Just so I always know what website what app I'm on. So let me just go to localhost 3000 here.

There we go. Apps web. So I know that I'm on that because you can see that my web dev is running on port 3000. That's how I know. Perfect.

And now what I want to do is I want to find a way to fetch my database. But there is a problem, right? So what I have to do is I have to import use query from convex react. This is a problem because I don't have convex installed inside of my web app. Now, I'm not sure if there is some tricky way to reuse the convex package from my backend internal package, I mean my dependency here.

And honestly, I'm not sure if that's what you're supposed to do. I think what you're supposed to do is very simply pnpm filter web add convex. I think that's what you're supposed to do. You're supposed to add a package convex which you can see immediately resolve this error now because right now if you're going to package json for apps web here you can see we have a new convex here perfect so that now works right I should now be able to get my users from use query but what exactly do I query How do I get the type safety? Well, usually what you do is you import API and then you write api.users and then .getmany, the function that we just wrote.

But How do we get the API here? Well, the first thing that we have to do is we have to go inside of apps, web, and we have to go inside of package.json here. And then what we have to do is we have to add at workspace, just like we did with math, we now have to add our backend dependency here workspace colon asterix let me just double check I didn't misspell workspace and once you have added that Let's go ahead and let's just do pnpm install in the root of your applications. Looks like everything is already up to date but as I said I think pnpm log file has now been updated to link the workspace back end package properly. So make sure you do that every time you add a new dependency manually.

And now if you can set a page here let's try and import API from workspace backend convex underscore generated. And as you can see it's not exactly working right now I'm not 100 sure let me just try rendering the users here. Let's do this. JSON stringify users. So right now, if I refresh...

Oops, I have to do TurboDev. If I refresh now, I'm not sure what will happen. Okay, so it looks like it's not just types. We are actually not able to get to the generated folder where our type safety and API routes are. So now we have to fix that.

First thing I want to do is I want to go inside of my packages, inside of my backend, and in here I want to recheck my package.json here. I want to make sure that my export is correct. So what I'm exporting is my entire convex folder and what that is mapping to is this convex folder and then every file which is a typescript file inside which should be the users, which should be the schema, which should be the generated as well but it's obviously not working so it looks like we are missing something so one thing I know for a fact that we are missing in this package backend is the tsconfig so what if I just tried to copy the one from math Let's go ahead and try and add it to backend here. I don't think this will exactly resolve much. The good thing is we've added the proper extents TypeScript config here.

But for example, this compiler options make no sense for us. We don't even have the source directory. There will be no build so there is no need for the dist directory. So what I think is that we can remove both of this here and that we can remove this here and just leave node modules in here. And I want to go inside of UI as I told you in the beginning that I will do because I'm going to borrow their logic.

So if I go inside of tsconfig here, let's check how this works. So what they're doing is they're adding base URL here in the compiler options. So I'm going to do the same. I'm going to add base URL and I'm going to just add a dot. That is my base.

And then I'm going to add paths here. Like that. And I'm going to set the workspace forward slash backend here. In here they are targeting source. So I'm going to extend this to be like that.

And in my case, let's see, so they're targeting source. Can I just do this? Like that. I'm now going to just double check with my source code I am purposely not trying to yeah just this should be correct so this is how I've set up my TS config file in my original source code so let's see if this changed everything so what's happening now is our TS config is exactly the same as our UI packages config which kind of makes sense because the backend package by nature is more similar to the UI package than to any of these three here. So let's see inside of our app page did anything change.

Looks like it did not change but I think there is one more thing that's different here and that's inside of web here. So inside of here they have their own TS config and you can see that they have a path for workspace UI. So now, if I go ahead and do the same thing here, so at workspace forward slash backend, like that, and if I try this again, so forward slash, forward slash packages, and then I go inside of backend and then this let's see if this is doing any change here so looks like it is still not working let's see workspaces backend forward slash it should be okay. Not exactly sure why this didn't resolve it. There is a chance that we might just have to restart our TypeScript server or reload the window.

Looks like that's not it. And the issue is very funny. It's missing a forward slash API. I just forgot the proper import. We successfully did it with this tsconfig that we just modified in the apps web, I believe.

So now if I go ahead and comment this out, for example, and save, you can see that it immediately throws an error here. So let's recap everything we need to enable our back-end package to share the types to our front-end Next.js application. So let's start from the web application that we want. Instead of our web application, what we've added is we've added a package json with workspace backend and after that we have added a we have modified our tsconfig to add and support workspace backend the same way it supports workspace UI. The only difference is UI uses the source folder, whereas we do not use the source folder.

And inside of the package itself in the backend what we did is we added the package.json. What's important is that we are exporting the entire convex folder from here and in the ts-config it's important that we add the paths here workspace backend forward slash and we're just importing everything from here and looking at this now oh we also have this include source I'm not really sure if we need this. The reason, well, we definitely don't need source because there is no source here, but we could be just targeting the convex folder. That could be one solution. So we could treat convex as our source folder so what if I just changed the include here this is inside of the TS config in the back end package What if I change the include here to convex like that?

And let me actually compare again the tsconfig with the ui-tsconfig here. So what they're doing is they are directly entering the source folder. What if I directly entered the convex folder and just targeted everything inside? And in the include, I just put a simple dot. The exclude can only handle node modules.

That's perfectly fine. And let me just double check inside of their packages ui okay the node modules is outside of the source folder so that doesn't seem to be a problem perfect and now that I've done this I'm just thinking out loud here and I I've read some comments from you that you like to see me debug things. So that's why I decided to kind of include this here. Well, I hope you find it interesting. This is how I debug things.

So now I'm gonna go back instead of UI and I'm comparing their package. So basically I'm using things that I'm sure of are working with my examples and I'm trying to find the differences here. So let's see how they are exporting. So they have individual files being exported here but a good example of what we need is an entire folder like this so what they're doing so what I'm doing is I'm doing dot slash convex here And I think this is the exact same thing. I think there is nothing I have to modify in here.

So I'm going to close both of these package.json. I'm going to close this and I'm going to close the packages entirely. And now I'm going to go inside of the web again. And I'm going to focus, I think package.json is perfectly fine, but the tsconfig is the one I'm a little bit worried about so I think that I have to go inside of forward slash convex here and then another forward slash And then I think I also have to go inside of my app folder page.tsx and now this isn't working Because I think I should be able to remove this There we go. So now I feel like this is more natural.

What I've done is I've modified my code, my TS files and my package files in such a way that my backend convex folder is treated as the source folder. Because why should I be able to import tsconfig and gitignore and package.json from my workspace backend? This way I have remapped the alias workspace backend directly to the convex folder. So I think I personally think this is the correct way to do it. And in here, yes, we still have a problem, but thankfully not related to Convex.

It's because this needs to become useClient now. So just make sure instead of your apps.webapppage.tsx you have added this. Oh, yes, we are missing the convex provider absolutely I completely skipped the convex setup because I was so focused on turbo repo and adding this as a package. But this is super simple thing to do. Inside of your apps web, inside of your components, you should already have the providers here.

And now what we're going to do is we're going to import convex provider and convex react client from convex react like this and then I'm going to remove the next themes because we really don't need them at all. And I'm going to add convex provider here and I'm going to create a constant convex to be new convex react client process dot environment next public convex URL or an empty string like this and I'm simply going to pass the client to be that convex here. Now don't worry I'm going to show you the exact documentation for doing this. I'm just doing this because I've done it so many times so I know it by heart but I will show you the exact documentation where you can find it but the reason I didn't want to approach this by looking at the documentation is because we are in a very specific environment and our goal was to add this as a package and not really think about the convex setup because what I wanted to do first was just add it as an internal package and use our knowledge from the maths folder and the UI package.

And basically what we have to do now is we have to add next public convex URL instead of our web app here. So go inside of web here and let's check if we already have any environment files. We don't. So inside of here, inside of web, add .environment.local here and add next public convex url. What is the url you might ask?

Well, it's the exact one as in packages backend environment.local. So the difference is in here they don't have to use the next public prefix because they are the backend. They can read this directly. But in our frontend we need to expose that. So this is okay to be exposed this is just the API URL but so you have to put the next public prefix instead of next JS applications so that you can read it safely and already it should be working you can see a completely empty array here and if you now go inside of your database here and if you click add and I'm going to add a new Antonio user and click save you can see it was immediately created and immediately reflected here So you should now see an array with a single object inside named Antonio.

Perfect. So now let me just go inside of here. Support convex documentation. Let me show you how I know how to set up convex. So instead of a convex documentation in here you have quick starts for next.js and this is basically what we did.

We did npm install convex but in a very specific way right we did it using pnpm and we filtered to our back-end package and then instead of using just convex dev we have a very special backend script here called convex dev until success so we use that as the initial setup where we connected to our project and we just did this So they provided us with sample data here. We created a simple get many query from generated server. And this is what I just did, convex client provider, right? But instead of creating a whole new convex client provider, what I did is I repurposed this existing providers.tsx because they have it for whatever reason. If you don't have it, it's Super simple.

Just create a components folder and add it here. And after that, go inside of your app folder layout, import it from the providers folder and wrap it around your children. Just like that. Perfect. So that's, and that's exactly what they instruct you to do here.

Perfect. So we're almost done with this chapter. What I want to do is I want to add this package to both of my apps now. So I'm going to go instead of app-page.tsx and I just want to make this a little bit better. So let's add flex-column here and let's add a div around these two and let's give this a class name of maximum width small width full and mx auto like this and now they should load inside of somewhat of a reasonable container.

I think I can also add null too. There we go. So now you can see each of them here and let me add gap y for and flex flex call. Actually no, this is a JSON. My apologies.

This will not work. Okay, so do it exactly like this and now we can copy this page.tsx and close the web app and go inside of your widget app page.tsx and replace it entirely. And obviously we get a bunch of errors right now. And if you actually try to go inside of your widget, localhost 3001, you will get a bunch of errors. So the first thing we have to do is we have to add our workspace back end here.

So let's do that instead of widget app this time going set of package adjacent here instead of dependencies. You can just go ahead and copy this one and give this back end. That's the first thing you're going to do after that. But I suggest you do is just run PNPM install. And this way yarn lock will be updated once again linking the new workspace back end to the not apps web but apps widget there we go it's it's here somewhere apps widget packages backend so make sure you do that and after that you're gonna have to do pnpm f and this time widget add convex so just convex like that and now, instead of your widget package JSON, you should have the convex and workspace backend added.

But what's missing right now is the TS config inside of widget. So I'm not sure I remember it correctly. So I'm just going to keep the TS config from the widget open, and I'm just gonna quickly go inside of web TS config here. And I'm just gonna borrow this and add it here like that. And I believe that this fixes all of our issues.

You can now go back instead of apps-widget-app-page and you should have no problems at all and just change this to be apps widget. And let's go ahead and let's do turbo dev and let's refresh localhost 3001. Oh, I forgot my apologies. We also have to copy components providers here. So copy the providers content, go inside of widget, components, providers, and replace with convex react and this.

And one thing we also have to do not gonna forget this time is copy the environment.local the same as in our web and paste it inside of widget so now you should have three environment.locals one in apps web one in apps widget and one in apps backend In here it doesn't use next public, but in other two places is the same URL, but it has to use the next public prefix. And there we go. You can see that now our apps widget can load our database using convex and type safe APIs from both the widget and also from the other app. Amazing, amazing job. So that is the true power of Monorepos.

We are able to share a single convex backend with multiple Next.js applications. And I think that learning how to add the math package in the previous chapter helped a lot with this. But obviously without the UI example that was provided to us, I don't think we would have figured it out. But this just goes to prove that as long as you have a few working elements in your applications, you can pretty much fix everything, right? You just have to compare with things that are working.

I just think it was quite interesting to let you watch me debug. Usually, I just pause the video and show you the fix, but some of you have commented that you want to see me do this so yeah this is how I debug things in this specific example. Great so one thing that we can do to wrap up this chapter is just go inside of backend convex users for example and let's do export const mutation and you also have to import it from here like so arguments let's go ahead oh it's not from here just a second it is from here You just can't name the constant the same way. So I'm going to call this add like this. And let me call this add open an object inside.

The first one will be arguments and in here let's put the name of the user to be av. Actually you can just set the arguments to empty for now and just go immediately in the handler here. And what you're gonna do here is just await user, my apologies, const user ID to be await context database insert into users and just add a name here because that's all we require in our schema. We just require a name, which is a string and you can return user ID. And here's the power of type safety that you're going to see now.

So now that we've added this new function the first thing that's important is that you have your back end running so the functions are now ready as you can see because we just modified them and now for example if you go inside of your apps web app page and just above here add a button which you can import from workspace UI components button another shared package let's click on add and let's add a const add user here to be used mutation from convex react API users. Oh, I called it odd. Let me just change to add, and this is super cool. So you can command or control click here and it will take you to the actual package here. So that's why you needed all of those TS config and stuff, right?

It's well worth it to have that. And now button on click here, I'm just going to an arrow function, add user And that's it. So now if you go to your localhost 3000 here, you can see that you can just add new users here, right? This is what we just achieved. And you can do the exact same thing instead of widget app page.

So just add user here, import, use mutation and a button from workspace UI components, add, on click, Add user. And now you have the same type safety and functionality across two different apps. One apps widget. Oops. And other apps web.

Amazing, amazing job. So this was again a complicated chapter, but I think it was well worth it So we resolve the lint error we set up our convex we create a schema functions all of these things Now it's time to create a pull request to review all of these changes here. So I'm gonna go ahead and do the following. I'm gonna go ahead and stage all of these changes here. And I'm going to add a commit.

So the way I add my changes, my commits here are dependent on the chapter. So this is 0 to convex package. So in my case it will be 0 to convex package like this. But I'm not going to push it just yet. I'm going to create a new branch here, 0-2 and I'm going to call it convex package like this and I'm going to publish the branch instead like that and once you've done that you can head into your GitHub repository.

So inside of your GitHub repository here, you will most likely have a prompt like this 0.2.convex package had recent pushes and you can click compare and pull request from here. This is because we switched to that new branch is zero to convex package and we just pushed the changes to there. And now if this is not showing to you for whatever reason, you can go manually instead of pull request, click on new pull request, set the base to be main and then select the compare to be your new branch and click create pull request. So I'm going to create this pull request now to stimulate to simulate a real git workflow right and now we're going to go ahead and review this pull request. And now you're probably wondering what is Summary by CodeRabbit and why don't I have this?

Well, this is the AI review tool that I use to review my pull requests. It is especially useful because I work solo and having CodeRabbit is like having a teammate who gives me sanity checks on my code and confirms or warns me about serious security issues in my code and similar bugs. If you want the same thing you can use the link that you can see on the screen or visit coderabbit.ai and you can go ahead and connect it to your GitHub. And I'm also gonna show you a very cool 100% free VS Code extension that they have that does the exact same thing inside of the editor. But I always found their pull request review tool extremely useful because of their summary, because of their walkthrough, and because of their sequence diagrams.

So let's see, what was this pull request about according to CodeRabbit? And one thing I want to emphasize here is how well CodeRabbit's context works. So we introduced backend functionality for user management, meaning our user schema and the backend feature, implementing fetching and adding users. We integrated Convex as the backend service for both web and widget apps. So it recognized that this is a form of mono repo, allowing us to add Convex as the backend service for multiple applications that we have.

And of course we added a new provider setup to enable to connect to convex. In here we have a more in-depth walkthrough which basically shows either a cohort or individual files and the change summary for every single thing we did. So if there's anything unclear happening, you can pause the video at any point or simpler, simply add CodeRabbit to your own repository and you will have these in-depth explanations of what you just did here. And here's a sequence diagram. So from the front end page, we are calling use query using API users get many, which then reaches the convex provider.

And then we fetch all users from the convex appy. And then we return that users list and we provide the users data. And a pretty similar thing happens here on a button click, we add the user Antonio and we return it back here. So you can see how well it recognizes what's going on in our app. It also tells you the estimated code review effort here so you know how much time to allocate to something like this.

And here's another super cool feature. It won't let you get away with bad code. You can see that obviously I've just added this code here as a demonstration for the users and add user but CodeRabbit is not playing around. It definitely wants me to add a proper loading method and here's a cool thing It understands that I'm using convex. Convex has a very specific loading state where only the undefined state is loading.

That's how you know that CodeRabbit recognized our backend service is convex. So that's what makes CodeRabbit stand out in comparison to all other pull request tools. In here it's obviously forcing us to write better code but since all of this is just a demonstration and something that we're going to remove It makes no sense to change all of that now. But when I scrolled down here, I noticed something. So the first thing it warned me about is inside of my backend package, package.json, it told me that I'm using an invalid wildcard and file extension.

So that is pretty interesting. I think I can easily change this to be JavaScript because we do have JavaScript files inside of there as well. But I was just following the example from UI package. So I will research this a little bit. I'm not too certain myself if this is correct or not, but a good thing that I have to review this because it is warning me that it will break consumers running the package with plain node resolution.

And here is the thing that we should probably refactor. We have a version skew between SLint and our newly added package slintjs. So slint must match the exact slint version. So 920.1 and 932.0. Minor version mismatches have broken preset loading before so it's telling me that this kind of thing has broken apps before and that I should pin both to the same version like this to avoid invalid config errors.

So that's something for us to do in the next chapter thanks to this amazing tool. Again If you want to have the exact same pull request review, you can use the link on the screen or visit coderabbit.ai. And after this, I'm just gonna go ahead and click merge pull request and confirm merge. I will not delete my branch simply because I want to have a history inside of my repository like this so I can always go back to that. And after you've done this head back inside of your editor and down here you can see your branches.

So just go ahead and find the main branch. You will see that you have two main branches. One is origin main and one is just main. You can select the one you used 12 minutes ago, but you could also select the one from 5 hours ago. It does not matter because our next step is going to be to press this to push and pull changes like this.

And now if you go ahead and click inside of your source control again and click inside of graph, you will see that we had a feature where we added turbo repository. And then inside of here, we just branched out for convex package and We merge that back inside of main. So just for sanity check, double check inside of your packages that you have backend with convex and schema and users. And if you do, it means you've done everything correctly here. And you can click this button, synchronize changes as many times as you want it will basically make sure that you are up to date with your github repository here perfect so what we just did is we merged that detached branch convex package back instead of main instead of our main branch and then we synchronize the main branch locally here to ensure we have those changes.