Now that we've gone over how to code with Replit and a combination of cloud within the browser, let's
now go over a more efficient way to create AI generated code by utilizing more third party apps.
Now, this might take a little bit longer to set up and is a bit more complicated, but the end result
will be that your apps are much more complex and finished within design on the front end.
So the previous module was meant to teach you the basics on how to code with AI generally.
However, these next tools will simplify and also allow you to create even more advanced applications
based on the general knowledge that essentially they've learned from the previous sections.
So to start this section, we'll be making the same exact app, but we'll show you how to become more
efficient and capable with our new tech stack that you'll be utilizing.
So the tech stack we'll be using here is V0.
As you can see here.
And we'll also be using cursor.
And then the development language that will be generating our code in will be Next.js which is essentially
just a react framework.
So let's now go over these one by one.
So starting with v0 by vercel.
V0 will essentially code out a very modern front end design for you.
So this will help you essentially create a very complex front end with endless iteration iterations
when compared to something like the basic Replit or cloud combo.
And then a very important thing to actually note here about v0 is that it's built by Vercel, which
is the cloud platform that hosts most modern front end frameworks, such as react, which is the development
language we were using in the previous module for building out using Replit and cloud.
And then in this section we'll be using Next.js here, which is a framework that's built on top of react.
So rather than using the standard react framework, um, which is front end based, we would typically
have to connect to Firebase as a back end.
But Next.js you can think of is a more complex and modern version of react.
So like I mentioned, it's built on top of react.
It's a framework.
And this essentially combines front end and back end capabilities.
So with Next.js you're actually able to handle back end capabilities.
So you can consider this as a full stack language.
And the only thing that you would need to connect to Next.js for this to basically function for your
entire application is just an external database, which is what Firestore was to us in the previous
section.
So with Next.js we're able to handle all back end capabilities or I should say most back end capabilities.
The only thing that we need external help with is just a database to store all of our information.
But apart from that, it will be very simple to use.
We can either use Firestore once again, but I'll just use Postgres since it's a bit easier to set up
and is more in tune with the Next.js framework.
And then lastly, within our tech stack we'll be using cursor rather than Replit.
Now if you recall again, replay is mainly an online based IDE, meaning that all of our packages and
etc. were all run through cloud servers, but now we'll be using essentially all the bells and whistles
with cursor, so you can think of cursor as a fork of VSCode, but with additional capabilities.
And the key difference between cursor and Replit is that cursor is completely local.
So by using cursor, this will teach you how to use and deploy using local development environments
completely through the device you're coding on.
So presumably your desktop or laptop and there aren't any online requirements to actually use cursor.
So this will essentially be the most standard method in which most developers code.
But it's a bit more complex to set up, given that Replit, the IDE we used before, had all of the
packages installed for us and all the setup essentially done so with Replit, because this is all completely
hosted in your local environment.
This allows for full customization, but this also needs just a bit more fine tuning, especially at
the start, so that everything can work and you're able to deploy apps directly on your computer without
any online capabilities.
And then the reason why we're using cursor, rather than the standard VSCode in which this is based
off of, is because cursor has the market leading AI functionality that allows the model to read and
reference our code, rather than just simply providing context through a web browser such as cloud.
So by using cursor, we're able to reference specific files inside our code base, and we don't have
to go back and forth copying and pasting entire lines of code.
And with cursor it's essentially the same model.
So it also uses cloud.
But again it's a wrapper.
So it is able to look inside your entire code base and make changes for you directly, whether it be
within your file and folder structure or just the contents of the files itself.