1 00:00:02,000 --> 00:00:03,000 Now, as a database, 2 00:00:03,000 --> 00:00:07,000 I will use MongoDB here and to be precise, 3 00:00:07,000 --> 00:00:10,000 I'll use their cloud offering, MongoDB Atlas, 4 00:00:10,000 --> 00:00:15,000 which is a fully managed cloud-based MongoDB database 5 00:00:15,000 --> 00:00:18,000 with which we can get started for free. 6 00:00:18,000 --> 00:00:21,000 All you need to do is click Try Free. 7 00:00:21,000 --> 00:00:24,000 This will then get you to MongoDB Atlas in the end 8 00:00:24,000 --> 00:00:27,000 and create an account for free here. 9 00:00:27,000 --> 00:00:30,000 So just enter some data about yourself 10 00:00:30,000 --> 00:00:32,000 and then get started for free. 11 00:00:32,000 --> 00:00:34,000 If you do all of that, 12 00:00:34,000 --> 00:00:37,000 after logging in, you'll end up on a page 13 00:00:37,000 --> 00:00:39,000 where you can create a new cluster. 14 00:00:39,000 --> 00:00:41,000 You must also automatically end up 15 00:00:41,000 --> 00:00:44,000 in that create a cluster wizard. 16 00:00:44,000 --> 00:00:47,000 And here you can generally leave all the settings 17 00:00:47,000 --> 00:00:48,000 as they are. 18 00:00:48,000 --> 00:00:52,000 Just make sure that you always pick the free tier settings 19 00:00:52,000 --> 00:00:54,000 unless you wanna pay. 20 00:00:54,000 --> 00:00:56,000 So for example, you can go with AWS 21 00:00:56,000 --> 00:00:58,000 and the default region here. 22 00:00:58,000 --> 00:01:01,000 And leave all the other default settings as well. 23 00:01:01,000 --> 00:01:06,000 Especially make sure that you're using the M0 Sandbox here. 24 00:01:06,000 --> 00:01:08,000 I can't select this here 25 00:01:08,000 --> 00:01:11,000 because I already do have a cluster created based 26 00:01:11,000 --> 00:01:14,000 on that sandbox but if you don't have a cluster yet, 27 00:01:14,000 --> 00:01:18,000 you should be able to select M0 Sandbox. 28 00:01:18,000 --> 00:01:21,000 And that is the cluster tier you should use then. 29 00:01:21,000 --> 00:01:24,000 And then just leave all the other default settings 30 00:01:24,000 --> 00:01:25,000 and create your cluster. 31 00:01:25,000 --> 00:01:30,000 Again, I already have one based on that M0 Sandbox here 32 00:01:30,000 --> 00:01:33,000 and therefore, you eventually should also have one. 33 00:01:33,000 --> 00:01:37,000 Now, that's the cluster, the MongoDB database cluster, 34 00:01:37,000 --> 00:01:39,000 which we'll use to connect to 35 00:01:39,000 --> 00:01:41,000 to then create our database in there 36 00:01:41,000 --> 00:01:43,000 and to store our data in there. 37 00:01:44,000 --> 00:01:46,000 Now, in order to be able to connect to this cluster, 38 00:01:46,000 --> 00:01:49,000 there are two things you also have to do here 39 00:01:49,000 --> 00:01:51,000 in this MongoDB Atlas console. 40 00:01:51,000 --> 00:01:53,000 Under Network Access, 41 00:01:53,000 --> 00:01:56,000 you have to add your local IP here 42 00:01:56,000 --> 00:01:58,000 by clicking on Add IP Address 43 00:01:58,000 --> 00:02:00,000 and then selecting current IP 44 00:02:00,000 --> 00:02:03,000 so that your local computer is able 45 00:02:03,000 --> 00:02:06,000 to send requests to MongoDB 46 00:02:06,000 --> 00:02:08,000 and under Database Access, 47 00:02:08,000 --> 00:02:11,000 you need to create at least one user 48 00:02:11,000 --> 00:02:14,000 with any username of your choice 49 00:02:14,000 --> 00:02:17,000 who has to have read and write access to the database, 50 00:02:17,000 --> 00:02:19,000 like this user here does 51 00:02:19,000 --> 00:02:23,000 so that this is a user with which we can connect 52 00:02:23,000 --> 00:02:24,000 to this cluster later. 53 00:02:26,000 --> 00:02:28,000 And once you did all of that, 54 00:02:28,000 --> 00:02:30,000 on Clusters, you can click on Connect 55 00:02:30,000 --> 00:02:32,000 and then connect your application 56 00:02:32,000 --> 00:02:35,000 to learn how you can connect to this cluster. 57 00:02:37,000 --> 00:02:38,000 And here we now actually need 58 00:02:38,000 --> 00:02:42,000 to use the Node.js MongoDB driver 59 00:02:42,000 --> 00:02:45,000 to write code here in our APIi route 60 00:02:45,000 --> 00:02:49,000 that does send queries to this MongoDB Atlas cluster. 61 00:02:50,000 --> 00:02:53,000 For this, we need to quit the development server 62 00:02:53,000 --> 00:02:57,000 and install an extra package with npm install. 63 00:02:57,000 --> 00:03:00,000 The mongodb package. 64 00:03:00,000 --> 00:03:02,000 This is the official MongoDB driver, 65 00:03:02,000 --> 00:03:06,000 which makes sending queries to MongoDB easy. 66 00:03:06,000 --> 00:03:07,000 Once you install it, 67 00:03:07,000 --> 00:03:10,000 you can start the development server again. 68 00:03:10,000 --> 00:03:13,000 And now this MongoDB driver allows us 69 00:03:13,000 --> 00:03:15,000 to connect to this cluster 70 00:03:15,000 --> 00:03:19,000 and then insert data or fetch data from there. 71 00:03:20,000 --> 00:03:22,000 For this in this api route file, 72 00:03:22,000 --> 00:03:27,000 we can import something from mongodb 73 00:03:28,000 --> 00:03:33,000 and that something is the MongoClient object. 74 00:03:36,000 --> 00:03:39,000 This is our object which allows us to connect. 75 00:03:39,000 --> 00:03:41,000 We can execute this code here. 76 00:03:41,000 --> 00:03:44,000 We can use MongoClient and call the connect method here. 77 00:03:45,000 --> 00:03:48,000 Now, the connect method wants this connection string, 78 00:03:48,000 --> 00:03:50,000 which we have here. 79 00:03:50,000 --> 00:03:52,000 So you should copy that string 80 00:03:52,000 --> 00:03:55,000 and then pass this as a parameter here 81 00:03:55,000 --> 00:03:57,000 to the connect method. 82 00:03:58,000 --> 00:04:00,000 Now, there, you need to plug in the username 83 00:04:00,000 --> 00:04:03,000 and password of your user. 84 00:04:03,000 --> 00:04:06,000 So that user who has read and write access, 85 00:04:06,000 --> 00:04:07,000 which you created. 86 00:04:10,000 --> 00:04:12,000 And I'll quickly do this 87 00:04:12,000 --> 00:04:16,000 without the angle brackets like this. 88 00:04:16,000 --> 00:04:18,000 Now, I will have changed my password 89 00:04:18,000 --> 00:04:19,000 when you're viewing this 90 00:04:19,000 --> 00:04:22,000 so you don't need to try to connect to my cluster. 91 00:04:24,000 --> 00:04:27,000 You also should replace myFirstDatabase 92 00:04:27,000 --> 00:04:31,000 with any database name of your choice, for example, meetups, 93 00:04:31,000 --> 00:04:32,000 but that is up to you. 94 00:04:34,000 --> 00:04:38,000 Now, when you do that, connect will establish a connection. 95 00:04:38,000 --> 00:04:42,000 And this is code which you never, never want 96 00:04:42,000 --> 00:04:44,000 to run on the client side 97 00:04:44,000 --> 00:04:48,000 because you would expose your credentials to your visitors, 98 00:04:48,000 --> 00:04:50,000 which is a security problem. 99 00:04:50,000 --> 00:04:53,000 But here in this API route, it's no problem 100 00:04:53,000 --> 00:04:55,000 because as I mentioned before, 101 00:04:55,000 --> 00:04:57,000 the code defined in here 102 00:04:57,000 --> 00:05:00,000 will never end up on the client side 103 00:05:00,000 --> 00:05:04,000 so this is a secure place to store credentials. 104 00:05:05,000 --> 00:05:08,000 Now, connect does return a promise 105 00:05:08,000 --> 00:05:11,000 and hence, we can turn our handler function 106 00:05:11,000 --> 00:05:14,000 into a async function to use await. 107 00:05:14,000 --> 00:05:18,000 This is possible and supported by NextJS. 108 00:05:18,000 --> 00:05:21,000 And then this will give us a connected client eventually. 109 00:05:23,000 --> 00:05:27,000 Now, on that client object, we can all the db method 110 00:05:27,000 --> 00:05:31,000 to get hold of that database to which we're connecting here. 111 00:05:31,000 --> 00:05:34,000 By the way, if that database doesn't exist yet, 112 00:05:34,000 --> 00:05:36,000 it will be created on the fly. 113 00:05:37,000 --> 00:05:38,000 And then on this database, 114 00:05:38,000 --> 00:05:41,000 we can get access to our meetupsCollection. 115 00:05:43,000 --> 00:05:46,000 Now, MongoDB is a NoSQL database 116 00:05:46,000 --> 00:05:51,000 that works with collections full of documents. 117 00:05:51,000 --> 00:05:54,000 Collections would be kind of your tables in a SQL database 118 00:05:54,000 --> 00:05:59,000 and documents would be your entries in those tables. 119 00:05:59,000 --> 00:06:00,000 So you have collections, 120 00:06:00,000 --> 00:06:03,000 which hold multiple documents. 121 00:06:03,000 --> 00:06:06,000 And a single meetup would be a single document, 122 00:06:06,000 --> 00:06:10,000 the overall collection then holds multiple meetups, 123 00:06:10,000 --> 00:06:11,000 multiple meetup documents. 124 00:06:12,000 --> 00:06:15,000 And you get hold of a collection by using your database 125 00:06:15,000 --> 00:06:17,000 and then the collection method. 126 00:06:17,000 --> 00:06:20,000 And the collection can have any name of your choice. 127 00:06:20,000 --> 00:06:24,000 Just as the database if it doesn't exist yet, 128 00:06:24,000 --> 00:06:26,000 it will be generated on the fly. 129 00:06:26,000 --> 00:06:28,000 And it could be named meetups as well. 130 00:06:29,000 --> 00:06:32,000 So it can have the same name as the database 131 00:06:32,000 --> 00:06:34,000 but you can also use different names here. 132 00:06:36,000 --> 00:06:39,000 And now that we got hold of the meetupsCollection, 133 00:06:39,000 --> 00:06:43,000 on that collection here, we can call insertOne, 134 00:06:43,000 --> 00:06:45,000 which is one of the built-in query commands 135 00:06:45,000 --> 00:06:49,000 for inserting one new document into this collection. 136 00:06:49,000 --> 00:06:51,000 And now the great thing about MongoDB 137 00:06:51,000 --> 00:06:55,000 is that a document is just a object in the end, 138 00:06:55,000 --> 00:06:57,000 a JavaScript object. 139 00:06:57,000 --> 00:07:00,000 And that now could be an object with title, 140 00:07:00,000 --> 00:07:02,000 image, address and description. 141 00:07:03,000 --> 00:07:04,000 And since that's the case, 142 00:07:04,000 --> 00:07:06,000 since that would make a lot of sense, 143 00:07:06,000 --> 00:07:10,000 we can also just directly insert data, 144 00:07:10,000 --> 00:07:13,000 so this full data object into our database. 145 00:07:13,000 --> 00:07:14,000 And hence, of course, 146 00:07:14,000 --> 00:07:17,000 we don't even need to use destructuring here. 147 00:07:19,000 --> 00:07:23,000 Now we would insert this data object into the database. 148 00:07:24,000 --> 00:07:26,000 Now, this also is an async operation. 149 00:07:26,000 --> 00:07:28,000 insertOne returns a promise 150 00:07:28,000 --> 00:07:31,000 and hence, we can await this here as well 151 00:07:31,000 --> 00:07:33,000 to get back the result of this operation. 152 00:07:33,000 --> 00:07:35,000 Result will be an object 153 00:07:35,000 --> 00:07:40,000 with, for example, the automatically generated ID. 154 00:07:40,000 --> 00:07:43,000 We can console.log result here if we want to. 155 00:07:45,000 --> 00:07:47,000 Now, we can also add error handling here 156 00:07:47,000 --> 00:07:50,000 to handle the case that connecting failed 157 00:07:50,000 --> 00:07:51,000 or inserting failed. 158 00:07:51,000 --> 00:07:54,000 And I do this in the full course 159 00:07:54,000 --> 00:07:56,000 but here, let's keep this focused and concise 160 00:07:56,000 --> 00:07:59,000 and let's simply assume that it will work. 161 00:07:59,000 --> 00:08:02,000 You can simply use try catch to wrap this 162 00:08:02,000 --> 00:08:05,000 to add error handling if you want to. 163 00:08:05,000 --> 00:08:07,000 Now, I wanna call client.close then 164 00:08:07,000 --> 00:08:10,000 to close the database connection once we're done 165 00:08:10,000 --> 00:08:13,000 and then we need to use this response object 166 00:08:13,000 --> 00:08:16,000 to send back a response 167 00:08:16,000 --> 00:08:18,000 because we're getting a request, 168 00:08:18,000 --> 00:08:20,000 we're then storing data in the database, 169 00:08:20,000 --> 00:08:24,000 ultimately, we also need to send back a response then. 170 00:08:24,000 --> 00:08:27,000 And we do this with this response object. 171 00:08:27,000 --> 00:08:30,000 Now, this works similar to what you might be used to 172 00:08:30,000 --> 00:08:33,000 from Node Express. 173 00:08:33,000 --> 00:08:34,000 You have a status method, 174 00:08:34,000 --> 00:08:36,000 which you can call on response 175 00:08:36,000 --> 00:08:38,000 to set a HTTP status code 176 00:08:38,000 --> 00:08:41,000 of the response which will be returned. 177 00:08:41,000 --> 00:08:44,000 For example, a 201 status code 178 00:08:44,000 --> 00:08:48,000 to indicate that something was inserted successfully. 179 00:08:48,000 --> 00:08:51,000 You can then chain a JSON call here 180 00:08:51,000 --> 00:08:54,000 to prepare the JSON data that will be added 181 00:08:54,000 --> 00:08:56,000 to the outgoing response. 182 00:08:57,000 --> 00:09:01,000 And here we could, for example, add a message key 183 00:09:01,000 --> 00:09:04,000 where we say Meetup inserted! 184 00:09:04,000 --> 00:09:06,000 But of course, it's totally up to you 185 00:09:06,000 --> 00:09:09,000 which kind of response you wanna return. 186 00:09:10,000 --> 00:09:13,000 With that, however, we have a basic API route, 187 00:09:13,000 --> 00:09:16,000 which will insert meetups into our database 188 00:09:16,000 --> 00:09:18,000 and therefore, in the next step, 189 00:09:18,000 --> 00:09:21,000 we can now send a request to this API route 190 00:09:21,000 --> 00:09:25,000 from the front end when this form here is submitted 191 00:09:25,000 --> 00:09:28,000 so that we actually do trigger this API route 192 00:09:28,000 --> 00:09:30,000 and we use that code here.