Now before heading over into our cursor development environment.
It's always important to just plan out your concepts beforehand rather than just diving in, especially
if you're working within something like front end.
So you can use Figma to design and develop a front end design that you're happy with.
So with Figma, you can just quickly create a user interface directly with designer tools, and then
from there you can either attach the file or take a screenshot of your Figma design to cloud and have
cloud create a mockup for you.
And you can even just do this on a piece of paper as well if you're not too familiar with Figma.
So if you just have a very general outline or sketch of what you want your application to look like,
perhaps if, perhaps if it's divided into four squares and these are what the cards look like, like
title, photo content, things like that, then you can go ahead and just draw it yourselves on a piece
of paper, and then also send the screenshot to cloud to also have cloud create a good looking UI.
But as we saw in the previous module, cloud by itself isn't too great for UI.
It requires a lot of tweaking to get it to a presentable front end design.
So what we are creating our authentication pages as well as dashboard for our Macro tracker app.
It just did take a little bit of back and forth, just to create a very simple design that isn't even
too complicated.
We didn't have a header, footer or any call to action sections.
It was strictly just the dashboard and login or register components.
However, by using V0 here we're able to push cursor to its limits by having this AI tool that focuses
primarily only on front end.
So let's now start with v0 here.
So what V0 is at its core is an AI based user interface designer.
That's great with react code and react based frameworks like Next.js.
So as you can see here, V0 is created by Vercel, which is a cloud platform that hosts react as well
as Next.js.
And just as a brief reminder, react is what we used in our previous example, which is seen as modern
front end development.
However, Next.js, like I mentioned, is a framework built on top of react, and it's an even more
capable and modern react in a sense where we can code the front end and back end together, all we would
need is an external database to ultimately finish up the application package.
So with V0 they focus only on front end development.
So you can type in any user interface you want, and V0 will create and code the front end completely
for you.
So in a general order of operations, you can essentially perfect your front end completely with V0
before ever moving on to cursor and pasting in the code.
And a very helpful thing with v0 is that they actually have a code output window that runs the code
for you.
So when you have a V0, for example, create a landing page.
You can see what the landing page looks like directly within the V0 window, and make tweaks back and
forth, rather than having to run the code directly in replit or cursor, and then coming back to v0
to perfect the code.
So everything front end related can all be self-contained within this V0 browser window.
So what we can do is essentially create a quick landing page on v0 right now to show you how this works
in a very basic sense.
So from here, if we ask v0 a question, we can just simply say I want to create a landing page.
Like Trello.
And again you can do this with any style, but we'll just use Trello for exemplary purposes.
And then we'll say this will be built on Next.js with app router, because these are the two main differentiators.
You can also say TypeScript, because if you recall again, when we created our Next.js project, we
had app router enabled.
It was written in TypeScript and it was a Next.js project.
We also had a few other options such as tailwind CSS which should be default, but we can also say and
tailwind CSS.
Perfect.
And then now let's go ahead and send this over to V0.
It's going to create a landing page inspired by Trello, using all of the languages and frameworks and
additional features that we denoted.
And then as you can see here, on this right hand side, we automatically have a preview window where
we get to see the code working in real time.
So this is currently coding itself.
But this is why it's loading.
It's because if we go to this page dot TSX, we can see that this code is being automatically generated
in the back end.
And then we're able to run the code in real time directly through V0.
So from here we can see how this looks.
Right now it's coding everything out.
We have our call to action section.
It's making the footer.
And then after it finishes it goes ahead and tells you what the component is made up of.
So we have a responsive header here at the top with navigation links.
We also have call to action buttons, a hero section here, a feature section of Taskflow.
And then finally this call to action section and then a footer here with just some terms of service
privacy and contact Us buttons.
And then to even take it a step further, they've also shown us how to actually use this component inside
our Next.js app.
So all we would need to do is create this file page dot Paste this code here into our file.
Make sure that we have tailwind CSS set up inside our project.
And again this tailwind CSS helps us use some of the components that we see here is primarily focused
around design.
And then from here we'll be able to actually utilize this front end design.
And like I mentioned we want to essentially perfect this before we even move on to cursor.
So for example, if we wanted to change this feature section, we can also say can you change the feature
section to have three cards instead of a list that goes up and down and it looks like a checklist,
we'll say instead of a checklist, one is collaborate anywhere, etc...
So all we want to do is change the feature section here to have three cards.
And then as you can see, let's wait for them to modify the features section.
And then from here they'll go ahead and create an updated landing page component with the feature sections
updated.
So now we'll see what V0 has come up with here.
Everything else should stay the same.
So we still have our header here at the top.
Let's wait for our hero section to once again be generated.
So this is just placeholder images because again V0 won't create the images for you.
You have to paste those in yourself.
And then perfect.
Now we have three cards here.
And then we can obviously take this a step further so we can change the font sizes.
We can change these icons even.
And we can get very, very detailed with V0 to essentially create the perfect front end design before
we ever move on to cursor.
But this is just an example of how you would essentially go back and forth with prompting through V0
to create the perfect application primarily focused on front end, and then from there, our order of
operations would then move on to cursor, where we would either add new features, we can start connecting
APIs, and we can also just add new components as well.
Come back to V0 style.
Those components go back and forth until you have a complete application.