WEBVTT 00:00:00.000 --> 00:00:06.080 Hello everyone. So in this video, I want to show you this admin dashboard from the SATCN space. 00:00:06.160 --> 00:00:10.480 If you want to build an admin dashboard for your SaaS application, 00:00:10.560 --> 00:00:16.665 AI application, Block CMS, ecommerce app, or basically any modern web application, 00:00:16.905 --> 00:00:19.465 you can definitely use this dashboard. 00:00:19.545 --> 00:00:29.145 The UI look really beautiful and modern, so let's take a look at some demos of the dashboard. As you can see, there's a main version, dark version, horizontal, 00:00:29.740 --> 00:00:30.620 RTL, 00:00:30.620 --> 00:00:32.460 and mini sidebar version. 00:00:32.540 --> 00:00:34.620 Let's take a look at this main version. 00:00:34.860 --> 00:00:41.180 As you can see, right, the UI is look really clean. As you can see the animation here, it is basically using motion. 00:00:41.935 --> 00:01:01.560 Really nice. If you take a look on the top in here, there's also light mode and dark mode support by default and also multi language. Alright. It support by default as well. Chart in here, then the message. Right? The inbox. Pretty cool. Let's take a look The ecommerce, CRM dashboard, the AI stuff. If you want to build, for example, chat application, 00:01:01.800 --> 00:01:13.235 you can use this template in here. Right? It already have the history chat. Pretty nice. Also, you can select any model in here if you want. Right? Everything is just already out of the box. 00:01:13.475 --> 00:01:19.395 For example, you want to build like AI image generator, you can also do that in here using this template. 00:01:19.475 --> 00:01:31.660 Also, the calendar if you want to build like a calendar event in here. As you can see, if I click this, it basically will adding event. Really cool. The tab in here, the email, the notes application, if you want to build a notes application, 00:01:31.900 --> 00:01:38.140 the contact, the invoice, that's a lot of template, guys. If they click a block, for example, right, the blog post, 00:01:38.675 --> 00:01:41.235 the blog detail, right, blog edit. 00:01:41.635 --> 00:01:46.035 So maybe in this video, we are going to try to using these template 00:01:46.035 --> 00:01:48.035 to create a blog application. 00:01:48.355 --> 00:02:00.090 That's really nice. Let's take a look at the blog create in here. Right? We can upload the image and etcetera. So So let's take a look at ecommerce stuff, the shop in here, the detail, at least checkout, everything it just works. 00:02:00.410 --> 00:02:11.145 Let's take a look at Kanban, right, the tea cat, etcetera. It just works guys. That's a lot of template. I'm not gonna show you all of this, but anyway let's scroll down until we find the authentication. 00:02:11.545 --> 00:02:17.305 So also we can use the login for example, the login template, the sign up, and etcetera. 00:02:17.385 --> 00:02:21.210 And also there is a couple pages for example, account setting, FIQ, 00:02:21.210 --> 00:02:40.035 pricing, this API key if you want to build application that can basically generate epic API key, you can use these pages in here. Alright. That's it for the preview. So let's now try to download this template. I'm gonna click download. This is the zip file after you download the dashboard. The size is a 136 00:02:40.035 --> 00:02:40.915 megabyte. 00:02:40.995 --> 00:02:47.950 So let's try to open that. I'm going to extract that first. As you can see, we have two folder in here like a docs and also package. 00:02:48.110 --> 00:03:26.550 So inside a package, have the darks. This is basically dashboard for the dark version, horizontal version, main version, mini sidebar, next out, and RTL, and starter kit. So basically what we are going to use is the main version, so let's try to open this on the Versus code. Let's just drag and drop this main folder inside of Versus code. So for this video I'm gonna use open Code. So OpenCode is basically open source AI agent that help you write code in your terminal. So I'm gonna use that. I already installed it so I can run it like OpenCode and hit enter. The beauty about this dashboard, it also already have the ready to use prompt. 00:03:26.710 --> 00:03:34.125 So basically, we can use this prompt to, for example, remove the other app that we don't need. Right? For example, you want to build like a blog application, 00:03:34.365 --> 00:03:43.390 you can use this prompt to isolate or remove any app that you don't need. For example, it basically will remove the calendar, chat AI, contact ecommerce, 00:03:43.390 --> 00:03:45.150 and any other application. 00:03:45.390 --> 00:03:52.190 So let me show you in here. For example, after you running like a prompt, for example, I want to use this template dashboard 00:03:52.190 --> 00:03:53.790 for blog application. 00:03:54.285 --> 00:03:56.765 Please read the agent. 00:03:57.005 --> 00:04:02.365 Md. So what is the agent. Md file? So this is basically complete AI instructions. 00:04:02.525 --> 00:04:06.205 So for example, you want to use this template for blog application, 00:04:06.740 --> 00:04:08.740 so the AI will automatically 00:04:08.740 --> 00:04:30.955 read the prompt folders and looking for the app folders and inside that there is a isolate app prompt dot m d. So the AI will automatically read this instruction and try to remove the another app that don't need in this case. For example, it can basically remove the calendar, chat AI, and whatever. Right? It's basically just remove all of that automatically. 00:04:31.355 --> 00:04:33.675 And, also, if you want to rebranding the application, 00:04:34.420 --> 00:04:36.660 the AI will automatically 00:04:36.660 --> 00:04:41.460 looking for the branding folder, go to this update branding.prompt.md. 00:04:41.460 --> 00:04:52.445 So let's try to hit enter. Right? So anyway, the AI don't really know what I want, so I just asking that again to please remove other apps and keep the block refer to the agent.md. 00:04:52.605 --> 00:05:05.570 And now the AI is already read this isolate a dot md file and already create this to do list as you can see in here, and now hopefully this is done. Alright. So the installation is complete. As you can see, this is the action 00:05:05.730 --> 00:05:17.765 and this is the block route that available right now, and you can open another terminal and just running p n p m dev and as you can see on localhost 2,000 on here on the apps, now we just have unblocked. 00:05:17.765 --> 00:05:22.885 Right? Pretty cool. Before that, basically, we have like AI, 00:05:22.885 --> 00:05:25.205 calendar, chat, and email, 00:05:25.205 --> 00:05:29.445 notes, and a lot of things. And with one prompt, now we just have unblocked. 00:05:29.445 --> 00:05:37.250 Pretty cool. So anyway, I just asking the AI to rebranding this dashboard use dev block for the name, refer the agent.md, 00:05:37.250 --> 00:05:42.130 and please remove another pages that we don't need for this block application. 00:05:42.210 --> 00:06:16.385 Because I'm on the plan mode, of course, I get some question from the AI like the logo file. I'm going to keep the logo file, and for the company name, I'm gonna use dev blog theme. And for the third question, default page should slash redirect to slash app slash blog slash post. I'm gonna say just redirect. So now I'm going to hit enter on the build plan, so let's just wait until the AI done. As you can see, this is the result. We just haven't blocked in here with a blog post, the manage block in here, we can search by category, we can search in here for example apple, 00:06:16.385 --> 00:06:21.905 and it is works. Right? Nice. We can toggle this one, I believe. Yes. It is working, 00:06:22.225 --> 00:06:35.210 and also the added block for example, it also works. So anyway, all the UI is works for now. Right? So what we have to do now is we are going to try to create the database. I'm only using Prisma and my PostgreSQL 00:06:35.210 --> 00:06:52.625 local, and I'm going to run really simple prompt. Let's say use Prisma and PostgreSQL local for the database. So I'm gonna hit enter. Alright. So the Prisma is already installed and configure with the PostgreSQL database on my local. So now let's try to open another terminal and I'm gonna say npx prisma generate, 00:06:53.000 --> 00:07:06.600 then I'm gonna running npx prisma db push. Then now let's try to running npx prisma studio to just make sure this is working. So let's take a look on the browser and as you can see it works. We have the category, comment, post, tag, and also the user. 00:07:06.920 --> 00:07:22.515 Really cool. So now what we have to do is asking the AI to integrate this Prisma with the front end stuff. My prompt is really simple. I just wanna say integrate the back end with the front end. Let's try to hit enter. Alright. Finally, it's done. So let's take a look at the project 00:07:22.900 --> 00:07:34.180 and as you can see by default we have like a one two three four five blog post and then on the blog post in here of course we just have four because the one in here is unpublished. 00:07:34.420 --> 00:07:54.715 Right. So now let's try to create a new post. I'm gonna click the new post in here and try to create a new title. I just want to copy and paste the title and also for the content in here, right, just add some enter in here. So for the cover, I just wanna use maybe this one and then for the blog status, I'm gonna say publish 00:07:54.930 --> 00:07:55.810 category 00:07:55.810 --> 00:07:58.690 like a let's say businesses or whatever, 00:07:58.930 --> 00:08:12.975 then the publish date I just wanna say now and click publish. Then as you can see this is the post right it's already on this table. Let's go to blog post and as you can see, this is the cart. So I'm gonna click that and here we go. Right? Everything is just render 00:08:13.135 --> 00:08:14.575 the businesses, 00:08:14.655 --> 00:08:17.535 the title of the post, and the description. 00:08:17.695 --> 00:08:23.390 For example, I just want to a comment in here. I'm not sure if this is work or not, so let's try to click task 00:08:23.550 --> 00:08:37.725 and yep. It is works. So I think that's it guys for this video. You always can adding like a authentication. For example, user must be a login in order to adding a comment on your post. You can always do that. Thank So you so much for watching. See you on another video.