Create a Twitter Clone using Next.js, MongoDB, Auth0, & Deploy to Vercel

who loves a jam stack that does look pretty appetizing but we're actually not here to talk about food instead of Pancakes we're going to talk about Jam stack applications don't you love creating all of the boilerplate repetitious code required to connect to databases in your jam stack applications today I'm going to show you how you can connect to mongodb Atlas in your jamstack application with minimal effort and without even using any drivers I'm Jesse Hall I'm a senior developer Advocate at mongodb you might also know me from YouTube as code stacker alright so throughout this video we're going to talk about what the jam stack is what serverless is and how the mongodb atlas data API fits into all of that and then we're going to get into some Hands-On exercises I love workshops because in my opinion that's the best way to learn something by actually doing it and building it and so that's what we're going to do later on throughout the video there's going to be exercises and you'll be prompted to pause the video complete the exercise and then continue on so we're going to build a fully functional deployed application throughout this video we're going to create a mongodb atlas cluster and enable the atlas data API we'll clone a skeleton application and connect our database then we'll set up custom user authentication and permissions we'll also configure rules so that users can only read or write certain data we'll Implement search functionality with indexing and finally we'll deploy our application to the world well what application is it here it is the social butterfly it's a Twitter clone users will be able to authenticate and send messages now on Twitter messages are called tweets well this is the social butterfly so what do butterflies do they flutter so we're going to send flutters now you're also going to be able to update your user profile information you will be able to like any of the other users flutters and you'll only be able to delete your own floaters of course because that's what the user authentication is going to enable us to do and we're also going to implement something that not even Twitter has been able to do yet don't you hate it when you send a tweet and only afterwards you catch a typo don't you wish you could just edit the Tweet well you're going to be able to update or edit your flutters in this application now again you are going to build this throughout this Workshop now in order to successfully complete the tasks in this video you should have a familiarity with JavaScript you're going to need manga to be Atlas GitHub versus Cell and auth zero accounts now these are all free they are not free trials they're completely free and no credit cards required you're going to need to know some get Basics like how to Fork clone work with branches and commit you'll also need a relatively newer version of node.js installed on your computer and also a code editor my personal preference is vs code but any code editor will technically work now notice what's not on this list mongodb knowledge so you do not need any prior mongodb knowledge in order to complete this video I'm going to walk you step by step through all of that alright so what is Jam stack well the jam and jam stack stands for JavaScript apis and markup the term was coined in 2016 by netlifies Matt Billman and initially a jam stack application was intended to be a static website it was meant to deliver blazing fast websites with minimal effort so for the JavaScript this is any JavaScript libraries that you want anything Dynamic is handled by JavaScript and there are no restrictions there now the apis should be reusable https endpoints used to create or consume data these can be third-party apis or your own you can write serverless functions in node.js go rust whatever you want these should also be Plug and Play they should be easily swapped out now think of these like Lego blocks that you can use to build your application in any way you need using apis allows us to decouple the bits and pieces of our application making them modular and reusable a separation of concerns let's say down the road I decide that I want to switch out to a new authentication provider I should be able to swap those pieces of my application out without breaking or bringing the entire application down now markup is the way in which the site is delivered to the end user the site is served as generated pre-compiled HTML so a static website now this was the initial implementation of the jamstack architecture and you might think well this is just a website and you're right there's really nothing new here sites have been built like this forever the jam stack is more of a set of principles or general guidelines on how to build a performant modern web application a standard if you will now since 2016 the jamstack community decided to adopt a more flexible Dynamic and serverless approach and so in 2020 jamstack became Jam stack a very subtle difference now there's less focus on Strictly static websites it still consists of JavaScript apis and markup but it's more flexible on how you deliver your content to the user so instead of being strictly static websites Jam stack applications now take a static first approach you should compile as much data as you can up front and then rehydrate the data as needed this brings more Dynamic capabilities to jam stack applications the general concept is the same deliver blazing fast websites with minimal effort now because you're basically eliminating the back end of your website in lieu of these interchangeable apis you don't have to worry about building containers or maintaining any back-end infrastructure you should be able to just clone a repo install the dependencies and start coding this makes a front-end developer feel like a full stack developer because of the back-end functionality being abstracted and so easy to implement so the main point of jamstack is to reduce complexity and increase portability we're going to see in a little bit how that aligns perfectly with mongodb now a big part of the jam stack is the use of serverless infrastructure and serverless functions but what is serverless do we not need servers anymore well serverless things still run on servers but you don't need an entire server you just need a very small piece of the server and so serverless functions allow us to take advantage of a server on demand in short chunks of time most serverless functions for instance are limited to just a few seconds of execution time serverless is flexible serverless is scalable serverless functions can seamlessly and endlessly scale up and down to meet the needs of your application serverless can get you to Market faster because the development environment is so much easier to set up this results in accelerated delivery and Rapid deployment serverless reduces cost because there is no Hardware or software to maintain or manage but where does mongodb fit into the jam stack well mongodb has several serverless offerings one is mongodb atlas serverless instances with mongodb you are probably familiar with how clusters work if not you can create a dedicated cluster for your database and choose the size of the server that you want how much memory it has how much storage space and how much processing power that you need you can also set your dedicated cluster to Auto scale between the cluster sizes that you determine are appropriate but this is where mongodb serverless instances help these take all of the guesswork out of setting up your cluster sizing serverless instances will seamlessly scale up and down to meet the needs of your application so let's say on your eCommerce website you have a Black Friday sale and for a week you get a huge spike in traffic your serverless instance will automatically and seamlessly scale up to meet that demand and then when the demand subsides it will automatically scale back down and the awesome thing is you only pay for what you use if you don't use it for for an entire month for some reason you're not going to pay anything other mongodb offerings are Atlas functions and https endpoints you may not even know that these have actually been around for quite a while you can define a custom serverless functions using JavaScript to run any number of actions on your database and you can use these serverless functions in combination with Atlas https endpoints to create your own custom API endpoints and you can set all of this up in the atlas dashboard now what did we talk about earlier jamstack is Javascript apis and markup and so this is where mongodb fits in you can create your own custom apis directly inside mongodb Atlas to connect to your database that's really cool but it might sound like a lot of work to get all of these functions and endpoints set up and you're right I mean setting up all the basic crud functionality of creating reading updating and deleting that could be tedious so this is where the atlas data API comes in the atlas data API is a fully managed cloud service that is part of our application Services portfolio with the atlas data API you get instant rest like data access so if you're familiar with standard rest apis you'll be right at home with the atlas data API you'll be able to not only access but create and even aggregate your data and use our built-in search functionality as well all of the standard Freud https endpoints and serverless functions needed for creating reading updating and deleting will all be created for you out of the box you can even use like we talked about Atlas search in conjunction with the data API and we're going to see that in action in just a little bit now here's how easy it is to use this is an example of inserting a document using curl but first we specify which of the pre-generated endpoints that we want to use here we're using the insert one and then we pass our API key into our headers and then next in the body we'll pass our data source which is our cluster our database our collection and the document that we want to insert it's that easy now this sounds amazing and it is but the atlas data API shouldn't always be used if you're familiar with the mongodb drivers and they're available for the programming language of your application then that should still be your default the mongodb drivers are available in 16 languages and can provide faster querying results or if you need client-side database access meaning that you need to connect to the database from the browser directly the atlas data API is not right for you either in that case you might want to look at our graphql API or the realm web SDK and the atlas data API is only available on Atlas And so it's not included in the on-premise version of mongodb so if you're hosting your own mongodb server this isn't going to work for you all right so we talked about how the jam stack is awesome serverless is awesome and the atlas data API fits perfectly in the mix so next we're going to transition to our Hands-On exercises and see how all of it works all right start out by going to this repository this is going to be our base of operations for the rest of this video once you get to the repository you can click this link to see a live demo of the application that we're going to build so this is it we'll be able to log in send a flutter and see and like other people's flutters now notice in the repository there are many different branches there's a branch for each of the lessons that we're going to go over so let's scroll down and we're going to get started with the first lesson all right so for the first lesson the task here is to fork and clone the workshop locally so we're going to Fork the repo and then clone it to our local environment again this repository contains several branches each branch is a separate lesson so let's go up to the top here and we're going to Fork the Repository and then for me I have several different owners I can choose from I'm going to put this under code stacker I'll leave it as social app demo and then I want to uncheck this because I want all of the branches to be copied over so let's go ahead and create this Fork and now you can see that this is under code stacker now social app demo and I have this repository forked so now let's clone it locally so let's go over here to code and let's copy this URL so if you're familiar with Git and GitHub you know there's a million different ways of doing the same thing so I'm going to in vs code go over to Source control clone repository paste in that URL select the repository location and then once it's cloned you'll be prompted to open the Repository now when it first opens you're on the main branch and remember there are several branches so if we go down here we can change over to lesson one but this is actually all that we needed to do for lesson one so let's go ahead and now change over to lesson two Branch then we'll go back to GitHub to see what the instructions are for the next lesson all right let's switch over to the lesson 2 branch and let's see what we're going to do here so the goal of this lesson is to create a mongodb atlas cluster and enable the atlas data API so our first task is to sign up for mongodb Atlas if you don't already have an account there's a link there and then we're going to create a mongodb atlas cluster so we're going to create a free shared manga to be Atlas cluster if we don't already have one we can leave the default name as cluster zero if you already have an existing cluster we can use that as well that's no problem just take note of your cluster name if it's anything other than cluster zero you'll find out why a bit later let's go ahead and do that I'm going to go over to mongodb Atlas now all right so now I am in my Atlas dashboard we're going to create a new cluster or a new database here so build a database I'm going to select the shared free now again we talked about there are dedicated clusters and then there are serverless instances as well but for this Workshop a free shared cluster is all we need so let's create that now you can select your cloud provider AWS Google cloud or Azure as well as the region I pick a region that's closest to you and for the cluster name we'll just leave that at cluster 0 and create our cluster now normally you'd need a username and password as well as network access setup in order to access your database but because we're using the data API we actually don't need to set that up so for task 3 we're going to enable the atlas data API so from the atlas dashboard select the data API from the left menu enable the API by selecting your cluster adding read write and then take note of your url endpoint so let's go back to Atlas see on the left side we have data API and let's select our data source which is going to be cluster 0. and then enable data access from the data API all right so now if we look under data API access we can see that read and write are enabled and we can select this and we can change it to no access or read-only or custom access we'll just leave it at read and write for now let's make note of our URL endpoint here let's copy that and save it somewhere we're going to need that in just a bit all right let's go back to our next task is to create a data API key so again from the data API page we're going to create an API key and then name your key anything you want and then generate the API key we'll copy the API key and save it somewhere and just be aware that you're not going to be able to see this again so make sure you save it let's go back and notice here on our data API page we have the API keys or we can right up here to top right create API key let's do that we'll just say data API key you can name this whatever you want generate the API key all right so this is the key that you are not going to be able to see again so make sure that you copy this and paste it somewhere safe for now where we'll need it in just a bit all right now we can close this window and let's go back to our next task and so technically this is all that we have to do in order to enable the data API but the next two tasks are going to allow us to connect to our database and load some sample data for our next lesson so remember I told you that we shouldn't have to set up user and network access but in order to do the next lesson which is loading some sample data we're going to need to connect so we are going to set up user and network access for that let's go back into Atlas and let's go to database access let's create a new database user we're going to use password authentication so for the user you can name it whatever you want and for the password as well whatever you want you can Auto generate a secure password as well and then let's go down here and we want to add a built-in role so add the let's just use the read and write to any database that's fine and then go down and add the user right now for network access let's go down there we're going to add an IP address to our whitelist and allow access from anywhere is an option but I'm going to add my current IP address and that is going to only allow computers on my network to access this database so even if you have my user credentials you're still not going to be able to access it unless you're on my network all right let's take a look at our next ask is getting your database connection string so we're going to go to our databases we're going to connect and then Connect using mongodb Compass and we're going to copy that connection string and save it for later so back in Atlas we're going to go up to database connect and we're going to connect using mongodb Compass and let's copy this connection string and save it somewhere safe all right so we are done with this lesson let's move on to lesson number three all right so now on lesson three the goal of this lesson is to load a sample data set into your mongodb Atlas database so be sure that you switch to lesson three branch in vs code so let's go over to vs code make sure that we switch over to lesson three and you'll notice in this lesson we have a data.json file and that's going to be the sample data that we load into our database so there are a couple of ways to load the sample data we have Option One is using the mongodb vs code extension and number two is mongodb compass you can use whichever option you want you don't need to use both options so you can skip ahead if you want to use Compass we're going to go over the vs code extension right now so install the vs code extension if you don't have it already so in vs code go to extensions and you look up mongodb you'll see an official mongodb or vs code extension so you can go ahead and install that I already have it installed and when it's installed you'll have a mongodb extension now because I have it zoomed in so far you're not able to see there's actually a mongodb leaf here and that brings you to the extension let me Zoom back in all right so from the mongodb tab in vs code we're going to create a new connection and use our connection string that we just copied and then we need to update the username and password let's go back into vs code so right here we're going to add a new connection we're going to connect using a connection string I'm going to paste in the connection string that I copied earlier now it has my username which I used it doesn't have my password so I'm going to replace this with my password which is super secret it's as well don't worry I'm going to delete this cluster after I record this video so let's go ahead and enter that and now it's going to connect and you see it already quickly connected let's go back to our instructions so now we are being prompted to right click the cluster and choose add a database we're going to call the database social butterfly and a collection is going to be called flutters so let's go back to vs code we notice here that there are no databases so let's add a database now what this does is it brings up the mongodb playground and it tells us you know what do we want our database and collection to be called so for the database we're going to call it social butterfly and the collection is going to be flutters so what this is going to do is create the database create the collection and then after that we can do something with that collection so back in our instructions we're going to add a line after the collection is created to insert the sample data using the data.json file so this is the code that we need so let's copy this code after we enter this we're going to run the file and then we'll see our sample data so let's go back to vs code so right here after this we're going to paste in that code that we copied so what this is going to do is it's going to use our database that we just defined up here social butterfly it's going to use the flutters collection that we defined and it's going to insert mini we're going to paste in the data Json file here so let's go back up to our files data Json I'm just going to control a control C go into my playground here and I'm going to delete everything inside these parentheses and paste all of the data now at the top here I'm going to hit this play button now wants to confirm that we want to run all of this on our actual database so this is a real database in production with real data we're going to say yes really let's do this all right so now it's done and we can see the playground result here it inserted all of our documents so now we can close that we can close our data Json we don't need to save the playground and we can close that as well let's go back to our instructions and so now we should see our sample data in our collection which we can see in vs code and we refresh our database now we'll see our social butterfly database our flutters collection and nine documents also if we go back to our Atlas dashboard we can browse collections on our cluster and we can see the data here as well social butterfly database Fletcher's collection and here are all of the documents that were inserted so pretty cool all right so now I'm going to look at the option number two mongodb Compass if you already completed the vs code extension and you just want to watch this process go ahead and watch it but don't do both of these processes you can also use the timestamps to move on to the next lesson so for mongodb Compass if you're not familiar with it mongodb Compass is the GUI for mongodb it's available on Windows Mac and Linux and it's completely free you can download and install it if you don't have it already there's a link in the description below so for our first step we're going to use our connection string that we copied earlier and we're going to connect to our database with our username and password all right so this is compass we're going to paste in our URI here again we need to put our password in so mine was super secret again don't worry I'm going to delete this cluster after I record this video so let's go ahead and connect to our database and uh we go up here to databases you're going to see that I already have social butterfly because I did that earlier so I'm going to go in here to my Atlas dashboard and I'm going to delete the database from here so that we can start from scratch and I'll show you each step in compass all right so back in compass let's go ahead and refresh and now the social butterfly database is no longer there so let's add a new database so we'll go down here bottom left create database we're going to call this again it was social underscore butterfly and the collection is flutters let's create that so now we have our social butterfly database we have our flutters collection but there is no data here so let's import our data all right so this is going to be a Json file and we're going to select our file okay so now I'm going to navigate to my social app demo repository where I saved it on my computer and again make sure that you're on the lesson three branch if you're not on the lesson three branch you're not going to see this data.json file all right so go ahead and select that data.json file and hit open and again this is the Json file so let's go ahead and import it and there's only nine documents to insert so it's pretty quick we're done and there's our data now again we used compass to import our data we can go back to Atlas and we can go to our database we can do browse Collections and we can see that we again now we have a social butterfly database letters election and all of our documents all right so we're done with this lesson let's move on to Lesson Four all right let's get started with Lesson Four so the goal of this lesson is to test accessing the data API and we're going to use a bash script to test the API so again make sure that you switch to the lesson 4 branch in your local environment so just a quick overview of the data API when we enabled the data API it created all of these endpoints for us as well as all of the serverless functions that go along with these endpoints so we've got our fines our inserts our updates our deletes our replaced and our aggregate now for each request each endpoint must use the post method and here is the base URL now we already copied and saved our data API URL you'll notice the only variable in here is our data API app ID so in your url that you saved from earlier you should see your app ID right there in your url so each request must include the following headers we need a content type of application Json Access Control request header star and our API key now each request must include at minimum the following in the body we need our data source our database and our collection it depends on which endpoint you're using they could require more than this but this is the minimum required so let's look at our first task we're going to add connection variables so again make sure that you switched to the lesson 4 branch and then we're going to open the find one.sh file we're going to add our connection variables in items one and two all right so switch over to Lesson Four we've got the find one.sh so we need our app ID so now that is in your url if we go back to Atlas we go to data API my app ID is right here data Dash j c i y n yours is going to be different all right so I'm going to put my app ID right there and then I need my API key so I copied that earlier remember that was super secret you only could see it once so I'm going to paste mine in here and I don't care if you see it because again I'm going to delete this cluster and everything after I record this video so we did uh number one and number two let's go back to our instructions now if your cluster name is not cluster zero so if you had an existing cluster and you're using that then you want to change the data source variable item number five to your cluster name and then save the file so if we go down here data source the default is cluster zero if yours is named anything else go ahead and change that here and let's save this file now task two Let's test the find one endpoint now if you're on a Mac OS or Linux you're going to need to add permissions to the find one.sh file you'll just need to run this command in your terminal in order to give the proper permissions so go ahead and pause the video and run that if you need to and then after you've done that let's run this dot slash find one dot sh we're going to run that and let's see what happens I'm going to open up my terminal dot slash find one dot sh and look at that it returned a document to us remember find one is just going to find the first document that it finds and return it let's go back to our instructions task number three let's add a filter to the find one request so in the find one.sh file item number eight you're gonna find a commented filter so it's commented out we need to uh comment line number 27 and uncomment 28 through 33. so let's go back and look in here here's our filter so by default we're not filtering anything we're passing an empty object empty curly braces means find everything so let's comment this out let's uncomment these so I'm pressing Ctrl forward slash to comment and uncomment so what we're going to do now is we're going to add this filter which is going to filter on our body and it's going to use a regex now don't don't be worried it's it's all written out here for you but it's going to look for a flutter that has this in the body and then option I just means ignore the case not case sensitive all right so let's save this open up our terminal and let's run the find one again now it's going to return a different document it's finding the document that had database in it right so the first document was this one where it said this is an awesome Workshop the second document after it being filtered it returns this one where do you store terrible dad jokes in a database to the Applause all right so we finished this lesson we're able to connect to our data apis returning documents so it's all working great so we did make some changes to this branch and we don't want to commit these changes because that would commit our API key and we don't want to do that right so we're going to before switching we're going to run this get reset dash dash R that's just going to reset this Branch back to its original condition before we made any changes all right cool so now we can switch to the lesson five branch and let's move on all right so now we're on lesson number five you're gonna notice in this Branch there's a lot more to it we have an actual application here so let's look at our goal so the goal of this lesson is to get your local application up and running you should have basic crud functionality working by the end of this lesson again be sure that you switch to the lesson five branch in your local environment all right the first task install the dependencies so let's do an npm install get all of the project dependencies installed so back in vs code remember we're on lesson five Branch let's open up our terminal and we're going to do npm install all right now while it's doing that I'm going to open up the package Json and just show you the basics here so this is a next JS application it's based on react we've got some mankind stuff in here which is a CSS framework or react we've got some tablet icons in here this is all just styling you don't need to know next.js or react to complete this Workshop again we're going to go step by step through everything that you need to do all right let's go back to our instructions here so task number two add local environment variable so in order to connect using the atlas data API we must provide a mongodb API key that's going to be an environment variable so you're going to find the.env.local.example file in the root of the project renamethat2.env.local add your API key and then also your url endpoint and then if your data source is not cluster zero update that to your cluster name so let's go back into here we've got this dot emv.local.example file so let's go ahead and rename this and we just need to remove that dot example so it should be Dot emv.local all right let's paste in our app e data API key let's paste in our endpoint URL we copy that that was the first thing that we copied and then again data source cluster zero is the default if yours is named anything else change that here let's save that and we can close this go back to our instructions so now next.js has a native API route for handling serverless functions that's within the pages slash API flutter directory we're gonna have an index.js file and this contains all of the basic crud routes or application to connect to our Atlas data API let's check that out real quick so we go in here to pages API flutter and then index.js so what I have in here for you is a basic template for you to get started with but we're going to add a lot more into this file but this is where we're going to be working for a while here let's go back to our instructions so first thing we need to do is Define our standard fetch variables that will be used for all of the requests so there's a reference here if you need more information so the first thing that we need to do is in the fetch options variable we need to define the method in the headers property the method should be set to post and the headers should be a content type Access Control request headers and API key remember we had those earlier and then in the fetch body a variable we need to Define our data source our database and our collection and then in the base URL variable we'll use our data API URL endpoint variable so remember earlier we talked about all the basic needs for every request so use all of these to finish filling out the template here so we have remember our method we have our headers that we have to pass we have our body that we have to pass and then we have the base URL which is actually already filled out for you so see if you can figure out what to put in the method the headers and the fetch body go ahead and pause the video see if you can fill these out and then after you're done we'll look at the solution all right so now if we go back to our instructions hopefully you gave that a shot but we can actually show the solution right here the answers are in the documentation so show the solution this is what it should look like our method should be post here's our headers and here's our body so let's go ahead and copy all of this here and then we'll go back into the S code and that is going to be pasted right here remember our method needs to be a post content type application Json Access Control request headers of star our API key we're going to pull that from our environment variable our fetch body needs to be our data source which is our data source which we have in our environment variable our database is social butterfly and our collectionist flutters and then of course our base URL is in our API URL environment variable and we're going to append to that slash action remember we have several action endpoints that we can use the fines the inserts the updates the deletes and so on let's save this file and let's go back to our instructions so that is Task 3 completed let's move on to task four task four is creating the find endpoint So within the git case of the switch statement you should use fetch to make a request for the find data API endpoint using the base URL fetch options and fetch body variables add to the body object a sort field which should contain an object that sorts descending on the posted app field you'll need to stringify the body of the request and there's a hint here since this is an async function you can use the await keyword now after you've received the Json from the request return the Json to the client along with the status code of 200. then after we're done doing that we can test it out okay so let's go back over into our vs code we can see here we have a switch statement on our request method so if we are using a get request we want to continue to fill this out so our read data we're going to await fetch we need to enter the URL that we're going to use we need to enter the options that we're going to use and then remember we had to send a status and then send some Json so go ahead and pause the video see if you can figure out how to fill this in and then we'll come back for the solution all right back in our lesson let's go to show solution so this is what we need here we need to fetch our base URL find we wanted to use the find endpoint then we're going to spread in our fetch options and then in the body we're going to stringify our fetch body along with adding to that a sort on the posted at field like we were instructed to do and then we're going to return a status of 200 and pass back the Json data dot documents so let's go ahead and copy this go back into vs code and this was the entire git case let's paste that in let's save that and then if we go back to our instructions we can see that we can test it so to test this we can run our application from the terminal by typing npm run dev then we can go to localhost 3000 slash API flutter to see if we're getting the correct response so let's go ahead and do that let's go back into vs code remember we have saved this let's go to our terminal and let's run npm run Dev all right that's going to load on localhost 3000 but we wanted to go to localhost 3000 API flutter so now we can see here that it returned all of our data so this endpoint is working now if we just go up here and just go to localhost 3000 we'll see our app with limited functionality not everything works but we're able to see our data here that's what's important all right so let's go back to our instructions so we got the find endpoint working so let's go to task number five we're going to create the insert one endpoint so again within our switch statement we're going to create a post case within our post case we need to create a flutter variable and set it equal to the request body property now our application will pass the new document using the body property of the request within the post case you'll need to use fetch to make a request to the insert one data API endpoint using the base URL the fetch options the fetch body variables and you'll need to stringify the body of the request and then add to the body object a document filled with its value set to the flutter variable now if you have received the Json from the request return the Json to the client along with the status code of 200. all right so back in vs code we can leave that running so we have our get case we need to add another case so you could take this you could copy it and paste it and then you need to add a post hates and then add to it everything that is required in order to post or insert a document into the database so go ahead and pause the video and see if you can work through that and then we'll look at the solution together all right so let's go ahead and show the solution so we have our host eighth first we're going to create a flutter variable and it's going to get our flutter message from our request body and then we're going to create an insert data variable and this is going to await fetch our base URL slash insert one we want to use our insert one data API endpoint we're going to spread in our fetch options for our body we're going to stringify our fetch body and then add to that our document our document is the flutter message that we want to insert so then we're going to await the inserted Json when we receive it we'll say status 200 and return that inserted Json all right so let's go ahead and copy this go back into vs code and let's insert that here let's go ahead and save this and then let's test it out so our application is already running we don't need to restart it let's go ahead and navigate to our application and try to create a new flutter let's see what happens let's go ahead and just test and send there we go your flutter has been sent and there it is it showed up now I can show you in the database let's go back into our Atlas dashboard let's go to our databases browse collections and we can see let's go all the way down to the last document there it is the document was actually inserted into our database from our application awesome so that's working so now let's do our update one endpoint so really basically the same thing we're going to create a new case in our switch statement for a put method all right and so for the same thing we need all of our variables we're going to add to our body a filter we want to Define which document we want to update right so we have to let it know which document by ID do we want to update and we're going to get that from our request.body.underscore ID so use that to filter which document to update and then we're going to use the set operator to update the flutter's body field by getting that from our request body dot body and then of course uh return the Json along with status code 200. so go ahead and pause the video give that a try and then we'll go through the solution together all right let's scroll down here and let's show the solution for task number six all right so for this one we have our put case in this we're going to use the update 1 data API endpoint we're going to use our base fetch options and then for our body we're going to stringify our base fetch body and then add to that a filter we want to filter underscore ID needs to equal an object ID and we're going to pull that from our request body that underscore ID and then we're going to update within our update we're going to use dollar set to set our body to our new request.body.body cool now once that's updated we're going to receive that back we'll return a 200 and we'll return that update data Json all right so let's copy this let's go back over to vs code and we're going to add this new case in here let's save that and it's still running so let's just go back and we don't need to restart anything let's go ahead and try to update something so if I go here um test and I go to the edit icon here let's just say test updated and hit update success it's been updated cool so let's go and check out our Atlas dashboard and now we do need to refresh so up here at the top we can hit refresh scroll all the way down and test updated so it worked now here's um something that's he not really intended uh but this is an awesome Workshop this is not my flutter so I shouldn't be able to edit it if I go here let's add a couple of extra exclamation points and update and it worked that shouldn't have happened well we're going to get to that a bit later where we're going to limit users ability to edit and delete things that they shouldn't be able to edit and delete cool so let's go back to our instructions so now we're on task number seven we're going to do our delete one endpoint next so again that's another switch statement uh switch case of delete we have all of our standard stuff here we need to use that same filter where we're filtering by ID to make sure that we only delete the document that we intended to delete all right so then after that return our Json request along with status code 200 same thing as before really so go ahead and give that a try pause the video and then we'll go through the solution together all right so let's look at the solution uh for this endpoint all right so we've got our delete eighth we're going to use our delete one endpoint we're going to pass in our base fetch options we're going to stringify our base fetch body along with our filter to make sure that we only delete a specific document that we wanted to delete uh then we wait on that response we'll return a status of 200 and then return our response cool so let's copy this go back to vs code let's go ahead and paste that in and let's save this again we don't need to restart our server or anything let's just go back to our site localhost 3000 and let's go ahead and delete so let's delete that one and it's gone let's go to our database and let's refresh so we have we scroll to the top here we have 10 documents let's refresh now we have nine documents so that goes all the way to the bottom here that document is gone so now back to our little issue if I wanted to delete all of these I could right now because we don't have any user authentication set up so again we'll work on that in a bit let's go back to our instructions so we're done with this lesson that was a long lesson let's move on to the next one all right we're on lesson number six now the goal of this lesson is to get an overview of how the atlas functions in HTTPS endpoints are set up in Atlas in the dashboard so we're going to take a look at that so we're going to first open up the atlas data API app so let's go over to atlas all right so if we look at our clusters here under database there's a couple of ways to get to our app our data API app so if we look here linked app services we have this data app so if I clicked on that that would take me to our data API app if you have multiple app Services it's not going to show up here so another way to get to it would be up here under app services so here under app Services we'll also see that data app this contains the atlas data API let's go ahead and click on that all right so this is our data API now here is a easier way to get to our app ID remember we looked at that earlier it was in our URL it's also right here and we can copy it as well so notice on the side here we have rules we have app users authentication we have functions and https endpoints so let's go to https endpoints we see we have no custom https endpoints but we have a data API tab and that's where these are so again we can find our data API URL endpoint here as well we have some authentication options and some other Advanced configurations now this bottom setting user settings create user upon authentication since we're going to be using a custom JWT authentication a bit later we need to go ahead and turn this on for our application so let's do that and hit save so if you ever needed to create some https endpoints of your own along with some serverless functions you can do that here under these different tabs so that's going to be it for this lesson let's move on to the next one all right so now we're on lesson number seven the goal of this lesson is to set up user authentication to limit access to endpoints and limit users ability to modify certain data all right so what we're going to do is use auth zero to authenticate into our application so with auth 0 you can set up a free account it doesn't require a credit card it's not a free trial so if you don't already have an account go ahead and pause the video there's a link in the description you can set that up and then we'll go through the next steps here all right so the first thing we're going to do is from our auth zero dashboard we're going to select applications under applications and then we're going to create a new application so let's go ahead and look at that all right so here's my auth zero dashboard we're going to go to Applications then applications you'll see I've got several things here but we're going to create a new application and then next we need to name your application anything that you want but select regular web applications and then create so regular web application I'm going to name mine uh social butterfly demo and create now from the settings tab note the domain client ID and client secret we're going to need these later so let's go back under settings we need our domain so let's copy that save it somewhere we need our client ID and our client Secret all right now add to the allowed callback URLs localhost 3000 slash API slash auth callback so that's allowed callback URLs and then allowed logout to be localhost 3000. all right so let's go back here let's scroll down allowed callback urls and then allowed log out is just localhost 3000. all right so now let's go all the way down to the bottom and save our changes all right let's go back to our instructions so it looks like we're done there now from the dashboard we also need to select apis under applications and then we're going to create an API name it anything that you want and set the identifier as your data API ID and then create okay so let's go back here we're going to go under applications apis we're going to create a new API I'm going to say uh social butterfly demo API the identifier needs to be our app ID so remember everyone's is different this is mine and then create again if you don't have your app ID go to your data API app under app ID that's it right there okay so that is all for task one so now task two is going to be setting up Atlas authentication settings so back in our app services on Atlas navigate to the authentications tab and then edit the custom JWT Authentication so let's go back to our dashboard again this is our app Services data app we're going to go to Authentication we're going to go to custom JWT Authentication we're going to enable this let's go back to our instructions here we're going to set a verification method to use jwk URI and then we're going to set our JW K URI and then we need to put R auth zero domain in here so let's copy this so use the URI we're going to enter this and then we need to change this to our domain remember we copied that earlier so this is going to be different for you this is mine and then let's scroll down and Save all right let's go back to our instructions now we're on task number three so add a trigger to create users so when a user authenticates we want to add that user to our database so we're going to go to triggers we're going to add a trigger the type is going to be authentication and let's name it add user to database so let's start with that so back in our application app Services we're going to go to triggers we're going to add a trigger going to be an authentication trigger we're going to name it add user to database it's going to be enabled let's go back to our instructions the action type is create it's going to use our custom JWT Authentication the event type is going to be function and we're going to add a new function we're going to call it add user to database so that was create provider is going to be custom JWT it's going to be a function and we need to add a new serverless function so we're going to name that function add user to database and then this is the code let's copy it and then we'll walk through it so here for our function definition we can just paste that in there so this is a serverless function that's going to be triggered by Atlas whenever a user authenticates so from this function we're going to get an auth event from this auth event we can get our user and then we can get our mongodb context right so we're going to get access to our cluster zero again if you if your cluster is named anything except for the default of cluster zero change that here once we've gotten access to our cluster we can access our users election which is going to be mongodb.db social butterfly collection of users now we don't have users collection yet so the first time that this is run since there's no collection there it's going to automatically create it uh users collection.insert1 is going to insert that user so that's what this is going to do every time a user authenticates this is going to trigger this serverless function to run all right so let's save that let's go back to our instructions now we're on task number four we're going to set rules for the floaters collection all right so again in our data uh API app we're going to select the rules from the left menu select the flutters collection and we're going to create a new uh role named owner and this is going to be how we're going to Define it so let's go back over to atlas or app Services we're going to go over here to rules all right let's select our letters collection and we're going to select some rules now there are some preset roles which will deny access to all read all read and write to all um but we for this one we're going to skip and start from scratch so for the role name let's name this owner and then this is what we want it to do it's going to match so our user ID needs to match the user ID that is authenticated so if these don't match then they won't have whatever permissions we're about to Define so let's define those permissions so we're going to select all for the document permissions for the field permissions we're going to select read and write all Fields so let's go back and do that so document permissions we're going to select those and then field permissions we're going to read and write all Fields so if they own a document they should be able to insert delete search and read and write all Fields let's save that let's go back to our instructions we're going to add another role by clicking the add button and this time we're going to choose to read all okay so let's add another role this is going to be read all so anyone should be able to read everything right but you should only be able to update and delete your own that's what the owner role was for so we're going to add that so it goes in order it's going to check first to see if you're an owner if you're an owner you get all of these permissions if you're not an owner you're going to get just the read permissions all right so now let's look at task number five so this one we're gonna set the rules for the user collection so for this one we're going to do the same thing and we're going to have an owner roll but we're not going to have a default read all permission because we don't want everyone to read information that is not theirs or the user collection now notice we don't have uh users here but we can create a collection from here so cluster zero on the social butterfly database we're going to create users collection all right let's create that now we have our users let's go ahead and add a role we're going to skip and start from scratch we're going to name this owner all right so for this one we want the ID to be the user ID so the authenticated user ID needs to match the ID field that's in the users collection and then we want to allow them to insert delete search and read and write all Fields let's save that all right so let's go back to our instructions we've got that now we're on task number six add environment variable so we need to add environment variables in order to connect to auth zero so let's go ahead and copy this we're going to add this to our enav.local file so if you're still on the lesson five Branch remember we need to switch to lesson seven we're on now so we've got some uh so we need to commit some changes here so let's go over to our source control and let's go ahead and commit and sync changes and then we can switch over to the lesson seven branch all right on lesson seven you're going to notice that we've got some other API routes we've got auth flutter and users we're going to look at that in a minute for now let's go to our emv.local and we're going to add those environment variables that we just copied okay so first off we need an off Zero Secret we're going to use a terminal command to get this to generate it all right so let's open up our terminal and let's paste that into our terminal open SSL random it's going to give us a random hexadecimal 32 digit number so let's copy that and that is what we're going to use for our auth Zero Secret it's gonna be different for everyone so that's that's mine our base URL is localhost 3000 right now we're going to change this later when we deploy our base URL this is going to be our auth zero domain so replace that with yours you copied it earlier all right our auth zero client ID remember we copied that earlier so paste yours in there our auth uh xero client secret we copied that earlier as well so paste yours in there and don't worry I'm gonna delete all of my off zero information after this video is recorded so none of this is going to work for you all right now our auth zero audience is going to be our data API app ID remember we had that earlier so yours is different than mine paste yours in there and then our auth zero scope this is what what do we want auth zero to return to us uh in Atlas we want the open ID we want their email and their profile information that's what's going to get saved into our user database so let's save this and we can close this let's go back to our instructions we have an overview of our new structure remember I said we've got some new API routes or auth route and then we have this weird looking Javascript file brackets dot dot dot auth zero so this is a catch-all route this handles all of our authentication routes like login and log out Etc under Pages we have our index.js file and in this we have a with page auth required let's look at that real quick so Pages index we now have a next JS auth package installed and we're going to use the with age auth required so this if we scroll down is down here at the bottom under get server side props so it's going to require us to log in before it will render our page we also have a new flutter index.js under the API so this is now also protected and instead of using our API key it's using our JWT token string so let's look at that so again under API flutter index.js we have get access token and with API required so we're wrapping this entire serverless function this API route with an API required so you have to be logged in in order to access this route and notice our API key is no longer being passed into our headers but we're using our JWT token which we're getting from auth zero and then we also now have a user API route and that gets and updates our users data if we go back over here you'll see here users and then index.js and this is handling the user route all right so that is all for that task we have one task list in this lesson task number seven install these extra dependencies so again we we've added alt zero we've got some extra dependencies in this Branch we need to run npm install again to get those and then we can run npm rundev to spin up our server again locally and now we should only be able to update or delete our own flutters let's give that a try all right so we're going to do npm install or npmi for short now we can run npm run Dev and again we're on localhost 3000 so let me go over to that I'm getting an error message issuer base URL must be a valid URI let's go back to vs code and let's check the environment variable base URL ah okay so this should have been https colon okay so let's save that and then let's restart our server let's try this again all right so now auth zero is asking us to authenticate I'm logged in already and it's asking if I want to authorize this app so I'm going to say yes and it probably is going to ask you to log in I was already logged in I should have logged out before I did this but I should be logged in now I shouldn't be able to delete or update anyone else's flutters you can see that those icons are no longer showing up but if I put in a test flutter I can delete and update my own but no one else's that's pretty cool so let's go ahead and test that out let's make sure test test update yes that worked success and I should be able to delete my own and yes I was able to delete my own but I can't update or delete anyone else's that's awesome so that's working now that's gonna be it for this lesson let's move on to the next one all right we're on lesson number eight now so the goal of this lesson is to add functionality to like and unlike a flutter we should be able to display how many total likes of flutter has and if the current user has liked the flutter so again be sure to switch to the lesson 8 Branch commit any changes you have on the lesson 7 branch and then switch to lesson 8. so our first task is to add a like API endpoint all right so you're going to find a starter file for this endpoint it's under API flutter like slash index.js now this route should only update the likes field of a flutter the request body will contain the flutter underscore ID the user ID and the action action is going to be the update operator that we're going to use so we're going to use either the dollar add to set operator or the dollar pull operator that's going to add or remove the user ID to an array in our document again remember if you had any changes go ahead and commit them and let's change over to the lesson 8 branch under flutter we have light and then index.js under like so a lot of this is already filled out we have our fetch options our fetch body our base URL we have all of that what we need to do is add our update functionality here so go ahead and pause the video see if you can figure out how to make this update and add a like to each of our flutters and then come back and we'll look at the solution together all right let's go over here and let's show this solution so what we're going to do is we're going to use our update 1 data API endpoint we're going to use our base fetch options and then in our body we're going to stringify we're going to start with our our base fetch body options we're going to add to that a filter we want to make sure that we only update the document that we intended to update and then what do we want to update well we're going to have a an action our request Body Action is going to tell us if we're going to use our dollar add to set or our dollar pull which is going to either insert or remove the underscore ID from the likes array in our document so this is going to create a field called likes in our document in each letter and it's going to have an array of user IDs that have liked this flutter so then after that we await our data we return a status of 200 and return our data so let's copy this go into vs code and let's paste that here all right let's save that and then let's go back to our instructions our next task is going to be updating our app Services rule so remember if you are an owner of a flutter you should be able to update and delete your flutter but at this point we now want someone else to update your document but we only want them to have access to the likes field we only want them to be able to like or unlike your flutter so we need to be able to give them access to just this one field so let's update that rule in our app services so we're going to select our flutters collection under our rules tab and we're going to go to our Advanced view we're going to add a new role of non-owner let's copy this this is what we're going to use let's go back to our app services in mongodb Atlas under rules this is going to be under flutters okay so now we want to add a new role but this is a pretty custom role so we're going to change our view from card view to Advanced View now we can see the underlying rules that are set up here we have our owner we have our read all rule we're going to replace this read all rule in order to do that we need to convert to advanced mode and then type convert here there is a warning here that this action is irreversible it's not a huge deal it just means that we have to always use advanced mode instead of the easy mode so let's go ahead and convert this to advanced mode now we can edit this so the read all we're going to replace that with our non-owner role all right so the name is now going to be on owner we're going to apply it anytime that this first one doesn't apply this one's going to be applied so we want to be able to read um but specifically on the likes field we want to be able to write we want to insert a false delete false and search true all right so this is basically the read all rule but with an extra caveat that we should be able to write to the likes field all right so let's save this let's go back to our instructions and let's test all right so we're on the last step of this one so test your application it's not already running npm run Dev go to localhost 3000 and test liking and unliking flutters you should be able to like and unlike your own flutters as well as those created by someone else all right so let's go ahead and run our application npm run Dev let's go over to localhost 3000 okay so let's test okay so now we should be able to like or unlike our own let's just like it and let's refresh make sure it sticks and yes we do like it and now we should also be able to like or unlike other people's so let's like his and let's like his and let's refresh and it saved them cool so that's all for this lesson let's move on to the next one all right so now we're on lesson nine we're almost done the goal of this lesson is to enable search within manga to be Atlas by creating a search index we should be able to search for a flutter by taking advantage of fuzzy searching all right so our first task here is to create a search index so from our Atlas dashboard we're going to select our database from the left menu click browse collections go to the search tab create a search index we're going to use the visual editor use the defaults we're going to choose the social butterfly database the floaters collection and create that search index let's do that all right so if you are still in your data app Services app let's go over to Atlas now within Atlas we're on database we're going to go to browse collections we can see our collections here and we're going to go over to search now we need to create a search index we're going to use the visual editor next we're going to say default we're going to select our social butterfly database and our flutters collection that's what we want to be able to search on next and we're going to just use all of the defaults now we're going to create that search index all right so this is a now in progress it'll just take a little bit to finish we can close this while it's while it's doing its thing here let's go back to our instructions now we need to add a search term to our API endpoint all right so use one of the other endpoint files as a starter to create this new term index endpoint so under flutter API it's going to be a term endpoint so this is part of next JS we're able to use this bracket syntax to pull something out of our route so this is going to come through as a query parameter uh now this route should get all uh flutters that match the search term and the term can be retrieved again from our query parameters that's going to be request.query dot term now for this endpoint we're going to use the aggregate endpoint and we're going to create a pipeline so here's a default or an example of an aggregation pipeline so we're going to use a dollar search operator the index is going to be default that's the default name of our index is default unless you named it something else then you can change that out here uh we're gonna do a text search the query is going to be the term so again we can get our term from our request dot query.term um this is just an example of hello and then the path we're going to use a wild card but we can specify What fields we want to search wild card just says Search Everything so then after the search pipeline we want to add a sorting stage to sort descending on the posted at field all right so maybe uh you can give that a shot let's go over to vs code and again if you have any uh changes on the lesson 8 Branch uh commit those changes and sync those changes and then switch out to the lesson 9 branch again under flutter we have this brackets term JS file and I've got some starter code in here for you so again we've got all of our regular batch options batch body base URL but we need to add this search functionality here so go ahead and pause the video give that a shot and then we'll go through the solution together all right let's take a look at our solution for this show the solution now this one it uses our aggregate data API endpoint we're using all of our fetch options and then we're going to stringify our base fetch body options we're going to add to that a pipeline so an aggregation pipeline so just like we looked at earlier we have our search we're going to use dollar search our index is our default index that we created we're going to use a text search the query is going to be term now where where did term come from term is up here so we created a variable called term and that's coming from our request.query.term so we're passing in that that query here our path is going to just be a wild card is going to search everything then we're going to add this fuzzy Buzzy with empty curly braces makes it a a fuzzy search so it means that we can slightly misspell something and it's still going to find it um and then an aggregation pipeline runs an order the first stage of our pipeline is going to search the second stage of our pipeline is going to sort so we're going to use our dollar sort operator to sort on the posted at field we're going to use negative one to indicate that we want it sorted descending a 1 would be uscending so then we're going to await that response we're going to return a status code of 200 and return that response dot documents so we want all the documents that match so let's go ahead and copy this let's go back into vs code and let's add that right here and let's save it let me open up the terminal and let's run our server and now to test this we can test the search functionality by running our application and then entering a search term in our input so up here at the top we have this search so let's type in awe s oh m see that it's uh it's fuzzy if I kind of misspell things it still brings up awesome um if we type in let's see code so there is a way to refine the fuzzy searching to see how fuzzy it should be or how strict it should be right now we just have it on the default so if you slightly misspell something it will still find it awesome so we're finished with that lesson let's move on to the tenth and final lesson all right we're on the last lesson lesson number 10 so the goal of this lesson is to deploy our application to verse cell and so uh the first task is create a first cell account if you don't already have one it's a completely free to sign up no credit card required uh this is not a free trial there's a link in the description to sign up for reverse cell account now once you've done that from the versal dashboard we're going to create a new project and we're going to use GitHub to connect with our GitHub project or our GitHub social app demo repo so let's get started doing that let's go over to verscell now all right so here is my versal dashboard you can see I already have a social app demo running here let's go ahead and add a new project we're going to add a new project here we're going to continue with GitHub and it'll probably prompt you to authenticate with GitHub I'm already authenticated so let's go ahead and search for our social app so social app demo that's the one I want we're going to import that let's go over to our instructions and make sure we're following this step by step so uh we're going to select the next JS as our framework so right now it's coming up as other and that's because on our main branch there's really no app there it's just a readme file so it's not sure exactly what it is normally it it finds the the preset pretty easily but we're going to tell it specifically that this is next.js and then under environment variables we want to add all of our environment variables from our.nv.localfile all right so this is slightly tedious but we're going to go here environment variables and one by one we're going to add each one in so let's go over to vs code and we can go ahead and just stop our server from running while we're here let's go ahead and commit our changes sync guard changes and we can go ahead and move over to our lesson 10 branch and let's go over to our EnV file so we need each one of these we want to copy and paste them over so I'm going to do this and I'm gonna speed up the video so you don't have to sit here and watch me copy and paste I'll go through the first one and then we'll Speed the video up so here's the first one I'm going to paste in the name and then I'm going to go back and I'm going to copy the value and paste that in there we're going to add it so now I'll speed up the video and I'll paste in each one of these [Music] all right I've got all of the environment variables put in there and now we're going to deploy now this initial deployment is going to not really do anything because it's going to deploy that main branch which doesn't have our final code in it so we're going to go back to the dashboard after it's done deploying and we need to take note of our custom domain name so let's go back to verscell we've got all of these input here let's deploy deploy building it should be pretty quick because there's really nothing to deploy and build it's even going to fail because there's nothing there in that main branch that's fine let's go to our project all right let's go into our settings here and then in our settings let's go to our git tab and then let's go here and we're going to change the branch so instead of the main branch we want to deploy the lesson 10 so it's 10 dash dash lesson Branch let's save that all right so we did that now let's go to the environment variables Tab and we're going to change the base URL to our custom versus Cell domain name so we need to find that let's go back to versel we've got that let's go to domains and here is our custom versel domain so let's copy that and let's go to our environment variables and we have the auth 0 base URL we look at that right now it's set to localhost 3000 so when this is deployed uh for real in production it's not going to be localhost 3000 so let's edit that and we want this to be HTTP s colon slash social demo Dash app dash whatever.burstyle.app so yours is going to be different this is the value I'm going to set mine to we're going to save that let's go back to our instructions now we need to redeploy and so to do that we're going to make a new commit to the lesson 10 Branch we can just do that by doing anything on the lesson 10 branch and committing it so we are on less than 10 let's just open up the readme file let's just add a space save it and now we have a commit so let's just say updated and let's commit that and sync our changes that's going to trigger versel to redeploy our app from lesson 10. so let's go back to verse cell and let's go to our project we should see that it's building and let's just give that a minute to build and it should work after this and so while it's building we need to update some auth zero settings so back in our auth zero application we need to change the allowed callback urls and that is going to be the this our logout URLs and our web Origins so let's go to auth zero so back in auth 0 under applications you should see your social butterfly demo I've got a bunch of them in here social butterfly demo or whatever you named yours and then we go down here to allow callback URLs we're going to instead of localhost 3000 we're going to leave localhost 3000 so we can still do local development but we're also going to add to that verse self star.versel.app so that's for that and then let's go to our instructions here so the allowed log out URLs should be this so log out we have localhost 3000 along with versel.app uh https and http and then under allowed web Origins we're going to add Versa into that as well right there and then all the way at the bottom save changes all right thank you changes may take up to 30 seconds before they take effect that's fine let's go back to versel and let's check on that looks like we are deployed so we can now click here and let's see if it works awesome let's do another test uh from production and let's send that we've got another one in there we can like it we can edit it and let's just refresh the page to make sure it all works there we go so another feature um that I forgot to show you is right here if you hover over your login name you can log out and you can log in with another account try it with several accounts if you want also under profile you can edit your display name and edit the uh URL Avatar it takes your default from Google if you have one on Google so you can change that there as well and after you make a change the save button will pop up and that will save it to our mongodb database as well so now you should have a deployed Jam stack application we learned about the jam stack serverless functions next JS auth 0 versl and the mongodb atlas data API I hope this video was helpful let me know in the comments what your experience was and send me a tweet on Twitter with a link to your deployed application so I can check it out give this video a like And subscribe for more content like this

Channel: MongoDB

Views: 17,782

Keywords: mongodb, javascript, vercel, auth0, da

Id: xiowCksSKpk

Length: 89min 21sec (5361 seconds)

Published: Tue Sep 27 2022