Hey there.
Eden here.
And in this video we're going to leverage V0 and zcn with cursor of course to build our landing page.
So first we're going to prompt v0 to give us the code and to show us the layout of our landing page.
Then we're going to ask V0 for instructions of how to integrate everything.
Then we're going to install CN.
We're going to do some configuration to use CSS components.
And we're going to integrate everything with cursor with our existing code base.
So in v0 I'm going to open up the chat.
And this is the prompt I'm going to write build a Nextjs landing page for a SaaS application which is
called dandy GitHub analyzer.
The application gets insights like summary stars, cool facts, latest and important pull requests,
and version updates on open source GitHub repositories.
The landing page should have a sign up slash login button and a pricing with a free tier.
Use Shatkin and I'm also going to provide a prompt in the video's resources.
So let's go and click enter and let V0 write our landing page.
All right.
So it's going to create a nextjs landing page.
And we can see it started to write some code.
And it is generating the landing page.
We can see we have a nice header.
We can see the title here.
We can see the key features with some icons like the Repository Insights import and PRS and version
updates.
And we have the pricing plans with a free tier.
So it really gives us all that we requested and it's close to being done.
Now I want v0 to help me also configure it.
So after it finishes I'm going to write show me step by step how to install and how to use it.
And this is important for me because I'm a JS newbie and I never worked with CDN.
So let's see what it tells us.
We can see we have instructions to first create the next JS project that we already did.
Now it tells us that we need to install CDN, and after we'll install CDN, then we'll need to go and
we'll need to add some card components.
So we're going to do that and then we'll install Lucid React.
Regarding coding what we'll need to do is to create a layout dot t6 Which is going to have this content
over here.
And we'll also copy all the content of the landing page to a file.
And I'm going to search for CDN.
I'm going to go to docs and to choose here Next.js.
And notice that according to the latest docs, the way we install CDN is with npm CDN and not np cdn
ui like v0 told us.
All right, so let's go and let's make sure that it's okay to install with yarn.
Amazing.
So let's go copy and let's paste it.
So we tried to install CDN but we have here an error no imports alias found in your tsconfig.json file.
So let's copy this error over here.
And we'll want to adjust this TS config in some way.
And what I'm going to do is to search for this error online.
And I'm going to write Qaqun.
And then I'm going to simply paste the error here.
And here we have a GitHub issue that somebody also mentioned this error when they tried to install Qaqun.
And in some of the comments somebody wrote with seven likes that you need to add into our compiler options
in our tsconfig.json the path key with these a path.
So let me just copy that and let me paste it in my tsconfig.
And let's now try to install it again.
And we can see it's working.
So we installed Qaqun.
And by the way, the reason why I looked online for this error and not use cursor or any other realm
is that Qaqun is pretty new as far as I know, and I wanted to get the recent documentation and to use
that.
So hopefully in the next couple of versions of cursor it's going to have indexed all the repositories.
Because right now I think those repositories are pretty stale.
So at least that's what we noticed when we implemented the link changes code.
All right.
Let me just go back and see what else do we need to do.
So we need here to install the CDN components.
So I'm simply going to copy that.
And let's go and paste it here.
And we get an error.
And the error tells us that the dash UI command not found.
And this is because V0 made a mistake.
And this is because we need to write a CDN and not CDN dash UI.
So let's go and fix it.
Let me just write here Npx CDN and then add button and cart.
And we installed those components.
Cool.
Let's go back.
And we also need to install Lucid React.
So let me just copy that and we'll install that with yarn.
Amazing.
So we have all of our dependencies installed.
Now we need to handle the code.
And according to v0 we need to create a layouts and put this content there.
So let me just go and create a new file.
I'll call it layouts.
And notice this is under my app directory here.
Let's now paste in this content.
And I just want to mention we already have a layout dot js file, so we might remove it later in this
video so we won't have any collisions or discrepancies.
And also I'm going to create now a new file page dot To six, and let's go and copy all of this content
here and let's paste it.
So what we did just now is simply some installations and some copy pasting.
All right.
So now let's go and run it.
So I'm going to write sudo yarn run dev.
And we have here the beautiful landing page.
Here is the key features.
Here are the pricing.
And let's go and try to log in.
And it doesn't work.
So you know what we're going to do right.
Let's go back to cursor.
And let's ask Cursor Composer to fix it.
So I'm going to create a new composer.
And it's on page dot six.
And let me right make this page has the same logging functionality as in page dot JS.
And this is because we know in Paige's everything was working fine.
All right.
So basically I can see right now that it imports now the sign in component from our components directory
that we created earlier in this course.
And now it uses this component instead of the regular button.
So that's cool.
And let's go and accept it.
And let's go and test it.
And we can see we have an error.
The error is from our sign in button JS.
And something which happened to do with the session provider which comes from the layout.
So we want also to fix the layout.
So let me just go back to composer.
And here I'm going to select also layout .26.
And I'm going to right.
Also adjust this file like layout dot js.
So it would have similar properties.
And we can see even in the diff.
Now that cursor suggests that.
Now in layouts six we import the next auth session provider from our components that we wrote earlier
in the course.
And we actually use it because we didn't use it before.
All right.
So let us accept this one.
And now let's go and test it.
And here you can see me and let's sign out.
Let's sign in.
And it is working as expected.
All right.
So the UI looks pretty good.
All we need to do is to add now the dashboards button.
So let's go and let's ask cursor to do it for us.
And I'm going to write add a button at the top to go to slash dashboards.
All right.
So now we're seeing that it changes page six.
And we can see that this diff is very simple.
It has a link to slash dashboards with a button component.
And it's called dashboards.
So let's go and see.
And yeah we have a dashboards button.
And we can see it goes to the dashboard.
And you can see here I have some API keys with empty names.
And this is a bug I introduced and I didn't notice but I'm going to fix it later.
But in the meantime everything here looks legit.
So let's just remove those empty, um, API keys with empty names and everything looks pretty solid
right now.