Hello everyone. So in this video, I want to show you this admin dashboard from the SATCN space.
If you want to build an admin dashboard for your SaaS application,
AI application, Block CMS, ecommerce app, or basically any modern web application,
you can definitely use this dashboard.
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,
RTL,
and mini sidebar version.
Let's take a look at this main version.
As you can see, right, the UI is look really clean. As you can see the animation here, it is basically using motion.
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,
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.
For example, you want to build like AI image generator, you can also do that in here using this template.
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,
the contact, the invoice, that's a lot of template, guys. If they click a block, for example, right, the blog post,
the blog detail, right, blog edit.
So maybe in this video, we are going to try to using these template
to create a blog application.
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.
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.
So also we can use the login for example, the login template, the sign up, and etcetera.
And also there is a couple pages for example, account setting, FIQ,
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
megabyte.
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.
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.
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,
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,
and any other application.
So let me show you in here. For example, after you running like a prompt, for example, I want to use this template dashboard
for blog application.
Please read the agent.
Md. So what is the agent. Md file? So this is basically complete AI instructions.
So for example, you want to use this template for blog application,
so the AI will automatically
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.
And, also, if you want to rebranding the application,
the AI will automatically
looking for the branding folder, go to this update branding.prompt.md.
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.
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
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.
Right? Pretty cool. Before that, basically, we have like AI,
calendar, chat, and email,
notes, and a lot of things. And with one prompt, now we just have unblocked.
Pretty cool. So anyway, I just asking the AI to rebranding this dashboard use dev block for the name, refer the agent.md,
and please remove another pages that we don't need for this block application.
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,
and it is works. Right? Nice. We can toggle this one, I believe. Yes. It is working,
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
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,
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.
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
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.
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
category
like a let's say businesses or whatever,
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
the businesses,
the title of the post, and the description.
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
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.