Build a Finance Saas Dashboard in 10 Minutes Using Cursor AI, Next JS and ChatGPT #Finance

what’s going on everyone I’m going to show you how you can create your very own Finance SAS company dashboard design in less than 10 minutes utilizing cursor Ai and the

best part about it is you could recreate this exact design without even having to know a single thing of code all you need to know is how to type words on your keyboard and press enter it’s that crazy so this is what you’re going to be able to build and basically let’s show you

just so cool thing is you can change it to the light versus dark mode here and then this has a sidebar that is static and showcases different menu options and you can see we have like car payments here profile and then settings and then basically additional stuff you’d like to add and this is

all with AI now obviously this information right here you’re seeing this is just filler content for right now but can connect an API you can actually have a display actual data or if you’re creating a company where you have to sign up users and stuff there’s obviously a bunch of

more things you can build on top of this but the fact that this can be created so quickly with literal prompting is insane and I’m show you exactly how to do it so here I am in cursor now let’s go ahead and open up the terminal you can do control back tick or also Max can do command J

and we can go ahead and copy in this or type it into your terminal npx creates next app and put at latest and let me make sure you guys can see this and then for me since I already have my folder opened I’m going to put do slash don’t do this if you want to make a file name and you want

it to be in a different location just know you need this beginning part so if you already know code then easy but if this is your first time then I’m showing you that now we can press yes typescript lint Tailwind SRC router import you can keep at no and then let’s it do its magic so now

we can see this is if you have coded before just like vs code except it has a lot of AI functionality so let’s do npm run Dev to open up the uh Local Host and hit command here real quick command and click and you can see this is our current design for the inexs this is just their templates

but uh at least we know the code is working fine and now if we go to the SRC we can see we have our page and this is all of the current code here so now in order to chat AKA utilize AI which we’re going to be doing for everything in this CashNews.co is you can press command L for mac and just

a quick run through in case this is is your first time using it here you can see the different models you want to use so if you want to go and switch to like um 01 preview for example can do it like this and we’ll try that for now I was using um claw 3.5 for most but again this is the newer

one so again depending on much model and the cost will change also as well if you have it connected with your account too but for now I just kick uh I’ll just keep it on o1 preview and then uh here you can change it depending on the page so this is the page we’re on right now called

page. TSX but like if you want to see like CSS then it goes and looks at all your stuff here so that’s pretty cool and now I’m just going leave it like this but let us write a prompt so this is essentially like chat gbt inside of code editor so let’s say write code for a next

let’s just say not say for right code next s and uh Tailwind CSS for a Finance let’s see dashboard and uh let’s keep it I want to be as specific as I can

have the dashboard dashboard uh menu on the left side with a clean nice UI design and then include in the sidebar menu dashboard dashboard for the main page that will display all the financial data such as total amount spent and and we’ll just say for um simply to sake for oh yeah for

Credit cards and then also include a chart showcasing the amount spent over time and then you can use filler data for now to display the numbers and charts and then make the sidebar static so when I click on other menus it stays there but the page content changes accordingly

accordingly and then uh make I’m not sure if I say yeah I already said UI clean and uh for now let’s uh oh yeah and for the for the sidebar menu include any other necessary menu navs that fit for a text-decoration: none;">Finance Credit card dashboard SAS I’ll just include some more keywords and now one thing is if you do not want to utilize the 01 preview model we can switch it so for example gbt 40 or just even Claude 3.5 Sonic so for now let’s keep

it let’s do Cloud Sonic just for um cost sake and just keep it like this and now if I go ahead and press enter we can see our code will start to generate now here’s what’s cool with uh at least course your AI the ability to add in things in here so for example you can go ahead and

just straight apply this directly so if I hit here apply you can see the code changes automatically then let me hit except C and we can go here link this is for the sidebar components so right now if I were to look at our p uh project we don’t have any components so let me see if I hit apply

here and hit continue nothing’s going to happen because we don’t have these uh files created like like these right here sidebar dashboard so instead we can do we can do command I and I say create all the necessary files and update the code so or for let’s see update code so the

app can work and here we can see it is updating this and look at this right now it is changing the folder structure we H just created automatically looks like we have the dashboard and a components folder now dashboards here sidebars here and if I were to go ahead and hit accept we can see see this

is what it currently is looking like so now I don’t think the CSS did much right now but for now let’s just run this or actually let me check it so this is what it currently is looking like and right now this is not what I like to see so you can’t really see anything but uh

let’s go back let’s go to command I let’s say um the text is invisible because it’s the same color as the background refactor the entire CSS to make it cleaner and look like a legit SAS company and then uh for the uh menu also update the sidebar menu to have additional uh

menus such as transactions cards Etc also for the uh the actual display of content on the page I did not see any there so let’s run this and see what happens so now it’s updating up updating the sidebar the page let’s see what else got the dashboard updated now too let’s see

here come on and let’s just hit accept and again if you want to read through all the code for now you can do that um but here let’s look at what we got so far dashboard okay so right away we have a pretty nice looking setup you can see our sidebar is right here and then if we go to the

main dashboard you can see we have users Revenue uh subscriptions and this like a typical standard uh templates however I want to include include a chart in the main dashboard showing data and then uh let’s see if we can do this also add a icon above the sidebar that allows

me to toggle between lights and dark mode and let’s see how it does for this so within what a couple prompts I hadn’t write any of this code we can see we have this like pretty standard dashboard that if you did not know how to code you would not be able to replicate this and if you do

know how to code it still will take you quite a bit of time because you got to go in here make a dashboard and then you got to go in here update it and obviously with this cursor AI we just did this in a couple what minutes let’s accept this real quick and uh I think what’s going to

happen here is it’s going to say for example module not found canot resolve recharts so I believe let’s see if it actually did yeah it didn’t say so now we have to say can’t resolve recharts which is going to make us actually install that but again if you don’t know

what to type in so you have to go here and type npm install recharge right here and then let me let this do do a thing real quick I’ll close it out for a second I’m going to go contrl C paste mpm install recharts we open command I again see what happens here so I’m going hit

accept all real quick and recharge if we go to our package Json uh recharge has been added perfect mpm run Dev go here and let’s uh refresh and uh look at this okay this is clean this is looking clean okay now for this data is like obviously it’s like um it’s not connected to

anything but we do have this icon here so let’s see Moment of Truth ooh see look this is this is sick this is sick now the transactions cards this stuff isn’t updated so let’s do that now let’s go and say command I updates all the other dashboard menus to Showcase some

filler page content so when I change the menu it looks more legit and again you’re probably thinking oh this isn’t a legit working of course not it’s a template and then you got to go in and prompt it accordingly to whatever you like but for now let’s see this if it can

update uh each individual uh uh section and see so right now it is taking his time but once it finishes I’ll show you the updated code here which looks like it’s starting now and uh let’s see problems counters popping up now includ more detail content so yeah let’s check out

pages right here so yeah let’s just hit accept right now and then let’s see yeah okay me refresh just in case yeah refresh let’s go to transactions now okay look at this look at this we got some nice data here we got okay we got it fits look it has Visa Mastercard according to um

their profile look at this this this is clean we can even toggle okay maybe this part you can’t toggle which obviously you got to um this stuff isn’t working but this actually no maybe it looked like it was just like lagging hold on okay let me see this toggle work this is the first

time I’ve seen a t not work which okay fine we we can fix that later but don’t worry about that but we go back to the dashboard look at this so now if you wanted to I could do another CashNews.co but basically you could prompt it again to like say include an API and say like update the

chart to show an API for like something whatever or you’d connect that physically yourself which again that’s going to be too complicated to explain in a short CashNews.co especially for someone who doesn’t understand coding and you might be using a different API so that could be

different too but look at this what I don’t even know how long this CashNews.co is but take a look at this nice looking Finance looking dashboard with everything working at least for

the menu navs now all you need to do is go in here update the design change things up a little bit and then go have fun with that so if you want to see more updated CashNews.cos on using Cursi to build projects quickly let me know in the comments below hit that subscribe like a CashNews.co and see

you in the next one