Best Cursor Workflow that no one talks about...

This video is sponsored by Hadong, one of the best open-source platforms for logging, monitoring, and debugging your large L model applications.

Today, I want to show you how you can make your Cursor workflow 10x more effective to build production-level applications with much fewer errors.

If you don't know what Cursor is, it is the most popular AI code editor that everyone is learning. It enables anyone, even an 8-year-old, to build fully functional applications using just natural language.

We saw many wild examples just from the past week all around the internet where people showcased beautiful applications that they have been building with Cursor.

But the moment you start building with Cursor yourself, you probably start encountering countless errors and very hard guessing while actually running.

If this is your experience, the good news is that there are many things you can do to dramatically improve the success rate.

For example, instead of giving Cursor a simple instruction to build out the whole web application, you actually need to learn how to write the best documentation to communicate and align with Cursor.

What are the core functionalities? How does the file structure look like, including code examples? And list out all the dependencies.

It might be a bit unclear which tech stack you should be using and how does Cloud VZ and Cursor fit together into a cohesive workflow, and when to use which one.

With all those tips and best practice workflows, I was able to dramatically improve the success rate for my own projects.

So I'm going to show you step by step what my workflow looks like so you can replicate and build your next dream app.

The example application I want to show you how to build today is a really interesting AI analytics platform called Gummy Search.

It basically utilizes what large L models are really good at, which is reading through thousands of unstructured Reddit posts and summarizing, extracting key information like what kind of pain points people are struggling with and what kind of opportunities might be for solutions that people are asking for.

I learned about this app from one of Greg's videos where he showcased how he used Gummy Search to find startup ideas, which I highly recommend.

What got me really interested in using this as an example is because getting large L models to read through huge amounts of unstructured data and extract insights can be utilized for many other data sources apart from just Reddit.

You can probably build applications for Twitter, Facebook groups, Discord, or even private data sources that you might have somewhere else.

So to showcase how you can use Cursor to create such a social media analytics platform, where it can read thousands of posts and summarize and extract key information for people to find opportunities, we will set up a full backend as well as integration with a large language model monitoring platform so you can optimize costs.

So let's get started.

To get started, instead of jumping into Cursor directly and asking it to build something out, we need to do some planning.

The first thing is we want to scope out a little bit about what kind of core functionality we want to ship.

My process is to spit out a core scope the application has to have to be useful.

Now, do some quick research, maybe talk to ChatGPT to understand what kind of packages I can use for core functionalities.

In the end, I would get Cloud or OpenAI model to design the project structure folder so that I can plan ahead based on all the requirements I have and then write out the detailed requirements.

For a specific case, I will create a new GitHub repo called Reddit Analytics Platform.

Then I will start creating an instructions.md file, and normally I would start with a file structure looking something like this.

I would give a brief overview and then start listing out the core functionalities, including documentation of the packages that we're going to use and the current file structure so that I can ask the OpenAI model to plan a little bit.

In your case, you can probably follow a very similar structure, especially if you're building a web application.

For the project overview, I'll just give a brief description that you are building a Reddit application platform where users can get analytics of different subreddits, where they can go and see the top contents as well as the category of posts.

You will be using Next.js 14, Chass in, Tailwind, and Lucid icons.

In terms of tech stack, Next.js is just one type of framework that we are using, similar to React.

Chass in is a UI component library, Tailwind is a CSS library that will make the code easier to understand, and Lucid is an icon library that we can use.

But if you want to use another component library, you can just change it here.

Then I'm going to start fleshing out core functionality.

This is probably the most important part. I basically want to think through what are the core functionalities that this app has to have.

In my case, if I use Gummy Search as the reference, we need a page to actually view all the subreddits available, and users can create a new subreddit if they need.

We also need a part to review all details for a specific subreddit.

From my experience, the most useful part of Gummy Search is the same, where I can see the top content as well as the category about which posts people talk about solution requests and which posts they talk about pain points.

Something we can even do more than Gummy Search is that sometimes I have a very specific type of post that I want to find, so I want to enable people to maybe add a new category as well.

In my case, I would have a few different functionalities: one is the ability to see the list of available subreddits and add a new subreddit.

It needs to display a sub page, and we also need to fetch post data in the top post tab as well as using OpenAI to analyze the post data into different categories.

As a bonus point, we want to add a new category.

What I need to do after is basically just spit out all the detailed interactions that I can think of.

If this is your first time writing a detailed product doc, it will probably take some time, but it will be worth it.

So in my case, I will write down the details that users can see: a list of available subreddits that are already created, displayed in cards, common ones like AMA and OpenAI.

Users can click on the "Add a Reddit" button, which should open a modal for users to paste in the Reddit URL and add it.

After users add a Reddit, a new card should be added, and in the subreddit page, clicking on each subreddit should go to the Reddit page with two tabs as well as other details that you can pause the video and type out later.

After this core functionality, the next thing we want to do is to find the libraries and packages that we're going to use to build out some functionalities.

There are two types of documents I would need to include: one is the code example for how do we get Reddit data.

There are a few ways I can go. The easiest way is that you can go and ask ChatGPT, especially for functionality like this one where Reddit is not a new API.

You should already have training data about how to implement things for Reddit.

So I can just go and ask, "I'm building a web app using Next.js for fetching Reddit post data. What is the best package to use?"

Then I can say, "Give me an answer," where Snowwrap seems to be one of the best packages to use.

Then I can go to npmjs.com to search for that specific package.

NPM is like the package manager which we're going to use to install this package later.

Here, it gives us some examples and also links to the detailed documentation, which we can take a look at to get more details.

One thing I would normally do is I would start in Cursor to give it documentation and try to spit out some proof of concept of this functionality that we want.

So I will just copy this one, go back to Cursor, open the Cursor composer, and then I add a doc where I can click on "Add new Doc," pasting the link here.

So it will add the documentation of Snowwrap.

I will confirm, and then here I will give a specific instruction: "Help me build a simple TypeScript file of fetching recent Reddit post data from the past 24 hours, including title, content, score, number of comments, and date using Snowwrap."

You can see it starts creating an example script.

So I can accept all, and the first thing is I will need to get the Reddit API credentials.

You can keep asking it about how to get Reddit API credentials, but you basically go to reddit.com/preferences/apps and then you can click on "Create another app" and give it a name.

In our case, I call it "Post Categorizer."

I want to choose "script" as the type.

In the description, we can put "an app that analyzes Reddit posts," and about the redirect URL, I will just keep "localhost:3000" and click on "I'm not a robot" and create the app.

Now you will get credentials here, so I'm just going to temporarily replace the credentials.

The user agent can just be whatever client ID will be the tag here, and the secret ID will be this one.

Here it asks for the refresh token as well, but remember Snowwrap offers a few different ways to authenticate.

I just want to make it easy, using the username and password.

So I'm going to copy this one and replace the refresh token to be the username and password, where I can put in my username and password.

Next, I want to install NPM, so I'll copy the command line in the terminal and then do `ts-node fetchRITPost.ts`.

Okay, cool.

So you can see that it does return actual post data back.

This code example is actually working, and then I can just copy-paste this as a code example.

Again, just taking away another layer of potential errors from this process by doing some research early on.

So what I'll do is I will copy this code example in and go back to the instructions.md and put an example here, saying "Documentation of how to use Snowwrap to fetch Reddit post data."

So code example and paste this in, and now we also get a description that we will use Snowwrap as a library to fetch Reddit data.

I will basically do the same thing as documentation for how to use OpenAI structured output to categorize the Reddit posts as well.

So I'll go to OpenAI documentation, copy the link, go back to Cursor, add a new one, and add a doc, and paste in OpenAI structured output, confirm.

Here I would say, "Instruction: Help me write a simple TypeScript to categorize the Reddit posts. It should have output post category analysis where it has boolean values for each category below: solution request, pain point, advice request, and money talk."

So I will click enter, and it creates a simple script for me.

I can just come here and temporarily replace the API key.

I do notice the code here is actually not using the structured output, so I'm going to actually give a very specific example that I get from the documents.

This is kind of another reason why I think this type of advanced planning and research is necessary.

So I would just go back to Cursor and then say, "I want you to use the OpenAI structured output function. Use the example above as a reference to refactor the code."

If I come back out, you can see that it used the structured output now, even though the model is wrong.

So I will change this to be "4 mini," but I will also just do some quick updates because I don't really like the structure.

I wanted to put a description of each category to the model itself instead of part of the prompt, so later it'll be more flexible if categories change.

Okay, now it should be all good.

So I will open the terminal, `npm install openai` and then do `ts-node categorizePost.ts`.

Okay, I got this error.

Okay, looks like it didn't add the beta here, so I'm going to paste in the beta according to the documentation.

Okay, another problem I found earlier was that TypeScript has a very strict return type, and previously the return type was defined as `resultType` we defined earlier, but the actual thing we return here is a string.

So I just remove that, and we can run again.

Cool, now you can see it returned this result properly.

So this is also an example we can include into the instruction.

So I'll add documentation for OpenAI structured output code example, and I can also include the example output and example response.

At the top, I update using OpenAI structured output functions.

So this is pretty much the crux of the initial draft.

The last thing I want to do is include the current file structure.

To do that, I will first need to set up the project.

So to set up the project, I can go to Chass in. They have a pretty good command line.

I press in `npx chass in@latest init`, and it will ask me whether I want to create a new Next.js project.

First, I will click "Y" and then give the name "Reddit Analytics."

I will choose a New York style natural, yes.

Then all the project has been created publicly.

You can see a project folder has been created.

What I want to do is that I actually want to first create a folder inside this project folder called "instructions" and move this instructions.md under that folder.

Now I do `cursor RedditAnalytics`, so this will open Cursor in that specific folder.

If you don't have this Cursor command line yet, you can command shift P and then select this shell command to install the Cursor command.

Otherwise, you can always just open that specific folder from here.

But now I'm going to this specific project folder and then open the instruction that we created earlier.

So let's firstly install a few different packages that we know we're going to need.

`npm install snowwrap openai` and the next thing is I will create a new file called `.env.local` where I will add all the credentials in and also do `npx chass in@latest app`.

So by default, the components from Chass in will be automatically added in.

I'm going to manually select the ones that we know we're going to need, like badge, card, input, label, sheet, table, tabs, and enter.

Then you can see the components have been added.

Then we need to add the current file structure in.

So we'll firstly do `brew install tree`.

This is a library that will get a snapshot of the current file structure.

If you just do `tree`, it will return the whole file structure, which is not exactly what we need.

Instead, I would do `tree -L 2`, which means we would go just two layers down, which should be enough, and then `-I`, which means ignore, so we don't want to include the node module file.

Now it will give me a clean file structure here, and I will copy this in Reddit Analytics and then paste this file in to indicate what the existing project folder looks like.

So now what we have here is a pretty decent starting point of the product requirement doc.

But that's not it.

To actually get Cursor to produce really good results with fewer and fewer errors, I actually want to give it an initial PRD to the OpenAI model or Cloud to design what the final PR structure should look like, what kind of dependencies there will be, and write out the final PRD to fill in all the details.

I personally found OpenAI is really good at writing and filling those detail docs.

What I would normally do is copy the existing product requirement doc, paste it in here, and then add a bottom: "Above is the project I want to build. How should I structure my project file? Try to create as few files as possible because I found when you have fewer files, Cursor tends to have fewer errors."

Click enter, and you can see the OpenAI model starts thinking through a few different steps and then spits out a project structure file based on the requirements.

After that, I will give the second step: "Help me add details to the original PRD that give clear alignment to developers who are implementing this project.

So don't create actual code, just a PRD including file structure in the doc and all documents provided with both example code and response. Those are important context."

Click enter again, and the OpenAI model will start thinking through a few different steps and spit out very detailed instructions on how this project should be created, as well as updated PR structures and code examples.

In the end, it will give a very detailed breakdown of all different components.

Okay, great.

So this is a really decent product requirement doc.

The only downside is you can't just copy-paste it in because it's not in markdown format.

So normally what I do is I go to Cloud, paste this in, and then say, "Help me convert this to markdown."

Then Cloud will break that down into specific markdown files that I can copy-paste in.

Once this is finished, I will just copy this and paste it into instructions.md and save.

Okay, so this file should give Cursor quite a good amount of alignment.

So now I think we are pretty much ready to start getting Cursor to build out this application.

But before we do, I got a lot of DMs where people are asking for more in-depth tutorials on utilizing AI to build fully production-ready applications.

That's why I started a community called AI Builder Club, where I'm spending lots of time every week adding really in-depth content on how you can use AI to bring your next startup ideas to life.

It includes step-by-step tutorials on how to build real-world use cases with AI, where I share best practice prompts and code examples that I use in every single project, and you can just copy-paste, plug and play.

As well as some ready-to-use templates for some common agents that you can build.

Most importantly, you can go and post challenges and questions that you are experiencing in the community.

Me or other community members will normally jump on and answer you.

You can also see some secret tips that other AI builders in the community have tried and worked well for them.

If you think this is interesting, you can click on the link in the description below to join.

Now we can start getting Cursor to build out this application using the fully fleshed-out documents.

So I would do command I, open Cursor composer, and let's give instruction: "Let's build a Reddit analytics platform based on the instructions."

Let's firstly build 1.1, view available subreddits.

Enter.

You can see that it will create files in all the right places, and I click accept.

We can try to run this by doing `npm run dev`.

Okay, great.

So we can see that the homepage is already created, listing out all the subreddits available.

Next, let's build 1.2, adding new subreddits.

So create new components under the components called "Add Subreddit" model, and it also asks me to add in those new components.

I believe I already added, oh, but looks like I didn't add the dialog.

Okay, so I'm going to do `npx chass in@latest add dialog`.

Now if I go back to localhost:3000, I can see this new button called "Add Subreddit."

If I click on that, you can see the UI is a bit broken, but we're going to come back to UI later.

First thing, we just want to make sure everything works, so the functionality of adding sub seems to be there.

Next, we're just going to move on to the subreddit detail page navigation.

Let's view the next part of subreddit detail page navigation.

So it will basically create pages and files based on the predefined structure.

If I go back to localhost and click on the specific Reddit page, you can see it navigates to that specific side page.

Then I will ask you to move to the second part, adding the tabs.

Great, now let's build the next part.

You can see the beauty of predefined product requirement docs like this is that you basically break tasks down into small steps that Cursor can take very well.

I will accept all.

So if I go back to the app and click on this, it will open the two tabs here as well.

Again, I'm going to ignore the UI and just finish the functionalities.

So I'm going to give instruction now.

Great, let's build fetching Reddit posts, 3.1 data retrieval.

So this should create a few different files, and I will just click accept all and refresh the page here.

You will see there looks like there are some errors in terms of the modules.

So I'm going to paste the error into Cursor and help me resolve this error.

So we might need to install these two libraries or just go to the other terminal and install, and I'll accept all.

Now I can actually display the posts.

Great, now let's build 3.2.

Okay, after this, it looks like no content is displayed.

So I'm going to go back.

I can see "Loading posts" show up briefly on the UI, but later it disappears, and no posts are displayed on the interface.

Help me think through the root cause, step by step.

So first, say try to add some additional logging.

I will accept this.

It looks like it says "No posts found," which would be weird.

My guess is maybe the API is set up incorrectly.

So I can go to libraries Reddit.ts and give feedback.

It says "No posts found."

This is because Reddit.ts is not set up properly.

Okay, so it looks like the problem is that the client side versus server side, where the Reddit.ts file was executed on the server side, but the subreddit tabs component is a client-side component.

So the solution here is to get the data flow from the server-side API to the client-side components.

Given this observation, here are the potential root causes: the client-side component might not be able to make a server-side API call directly.

So the solution here is creating a new API route to fetch posts.

Now all the posts have been updated properly, and what I would do is I will quickly come here and then submit a commit: "Set up project and fetch Reddit posts."

Commit.

So I'm going back to the Cursor composer, and also this is fetching Reddit posts.

Now next, based on the instructions, let's build the 4.1 post categorization.

I will accept all and go back to this page, refresh.

Okay, so looks like here is an error.

I'm going to copy this error and add it to the composer: "Help me identify the root cause and resolve this issue. Let's think step by step."

Accept all.

Okay, and next, I wanted to display categories as well.

So I would say next, let's implement this 4.2 display categories.

Okay, so looks like this one issue is that there's no actual categorization displayed.

So I'm going to go back to Cursor and then give instruction back if "Categorize post" and point actually working.

Okay, if we go back to the Reddit, you can see again the endpoint here of OpenAI is not exactly what we have in the instruction.

So I need to be more specific.

I'll go back to the instruction, copy-paste the code example, and accept all first.

Then add Reddit.ts, paste the file in.

The "Categorize post" function is not implemented correctly.

It has to be based on the documentation we provided in this instruction file.

Please refactor the code.

So accept all, and I want to change this model to be "4 mini."

I still observe a few kind of weird parts.

For some reason, it just keeps ignoring some specific parts like beta, so I just need to manually copy-paste over those things.

Okay, cool.

So you can see that the categories have been shown properly for each post.

If I go to the "See" page, I can click on each card, and the relevant post will be displayed here.

Great, so I'm going to add a commit again: "Categorize posts ready."

So you can see the core functionality is implemented here.

I can see the top posts.

I can also go to the "See" page to filter out posts with specific categories.

But for anyone who is launching large L model-based applications, you all got a new problem that you need to worry about, which is how do you monitor and alert the large L model usage and whether or not you optimize the cost structure.

There can really make a difference in whether your business succeeds or not.

I give you one example: a few months ago, I launched an AI girlfriend, and back then I offered a 60-second free trial chat for every single user.

Lots of people signed up, but somehow I just never made money from it.

So I manually implemented a bunch of tracking to understand the cost structure there, and later I realized for the 60-second free trial, if I have 1% conversion of all the users, I need to charge at least $13 from each user to break even.

So it's really a balance between performance, cost, and speed.

The same case for this Reddit analytics platform.

We kind of need to understand what is the cost of every single large language model call to categorize those posts and how many posts do we normally have under one subreddit.

That's why I normally set up integration to a large language model observability platform like Hadong.

So if you haven't heard about Hadong before, Hadong is an open-source platform for logging, monitoring, and debugging large L model applications, where they give us the ability to see exactly how people are interacting with our large language model application, track the cost, errors, and latencies so that we can optimize for performance.

I can also do a bunch of very advanced interesting things like automatically caching the response if the prompt is the same to save costs and improve speed, send custom properties so that I can segment different types of requests, and many more.

The best part is it is extremely easy to set up.

So if you are calling an OpenAI model like me, all we need to do is just add this base URL and additional headers from our OpenAI clients, and that's pretty much it.

I can just copy this over and go back to Cursor, open the Reddit.ts, which is where we make OpenAI calls, and paste this in and add this environment variable Hadong.

That is pretty much it.

So now if I go to the Reddit platform and open a subreddit, after I get this response, it will automatically track that we made 200 large language model requests for that specific subreddit.

That probably means we processed around 200 posts, and those requests are from the same user, based in Australia, which is me, and the total cost is around 1 cent.

So now I know the cost to onboard a fairly popular new subreddit is around 1 cent using the GPT-4 model.

I can go to requests to see the details of every single request as well as the actual prompt that we send to OpenAI, and immediately I can spot the problems in my prompt.

For example, the structure now is actually not very clear what the actual post content is because some of the content looks like part of the prompt, and this might confuse the large language model.

So I can immediately improve the performance by updating the prompt here and save.

But on the other side, you also have a UI that allows me to experiment with different prompts directly and also switch between different models.

For each data while I'm reviewing that, I can add this to a dataset called "bad sessions," and this allows me to create a dataset that I can use to either evaluate the new model or fine-tune the model.

So I highly recommend that you set up your large language model application with those logging and monitoring platforms, and Hadong is one of the best ones.

I have put the link in the description below for you to try out Hadong for free.

After we connect this to Hadong, the next thing is we want to set up the backend.

So we have the core functionality kind of implemented for this Reddit analytics platform, but the annoying part now is that every time when someone clicks on this subreddit page, it will refresh all the posts and then go through OpenAI to analyze and categorize posts, which is not optimal and going to cost a lot of money.

So what I want to do is that when someone opens the page and fetches the data for the first time, I want to save this data in a database so that next time when someone else opens this page, we can check what is the last time we fetched the data from Reddit.

If it is within 24 hours, let's not update again.

To do that, we actually need Cursor to implement a kind of new functionality to save the data somewhere.

I want to showcase this because this is a great example to showcase how you can add new features to existing projects that are already set up.

So to do that, instead of just opening Cursor and asking it to implement the whole project, I will actually open the side panel and add codebase.

This is a really powerful feature where Cursor actually allows us to reference the whole codebase, and I can specify certain files to include and exclude.

For example, I probably don't want the node modules folder, so I put node modules folder.

By the way, I don't know if putting the folder name is going to work, but I'm just going to put it here.

If you know the answer, please comment below and let me know.

I'm going to put detailed instructions.

So I have this project built based upon the original instruction, but currently, we need to fetch Reddit data and call OpenAI every time when someone opens the subreddit page, which is not optimal.

I want a backend engineer to connect it to Supabase and save Reddit post data and AI analysis data to Supabase and only fetch data if the last update time is older than 24 hours ago.

Help me generate detailed docs that can help backend developers understand this project structure, what cool parts to build for Supabase integration that are compatible with this current project structure.

No need to include actual code examples, just the design.

By the way, if you don't know what Supabase is, Supabase is an open-source project that offers a complete backend for both mobile and web applications.

It was introduced back in 2020 and gained popularity very quickly because before Supabase, you basically had two options for building backend: one is Firebase, another is AWS Amplify.

They both kind of work, but the problem is they kind of lock you into specific vendors, which is not optimal.

That's why Supabase grew so fast because it allows you to build a backend and host it anywhere you want, and they provide full backend service for database, authentication, storage, and even vector storage now, and offer frontend SDK to connect to the backend very easily.

If you haven't built any kind of backend feature before, it might feel daunting, but it's actually easier than you think.

What you really need is to define what kind of data we actually need to store about your application.

For example, in our case, you probably always want to have a table for profiles so that we can track the users.

You can even add things like tier to track the pricing tier, how many credits they left, and strip customer ID and subscription ID if you are building the payments into the platform, as well as subreddits.

So we want to track the list of different subreddits and the last updated time and list of posts.

For each post, we want to track title, content, scores, and list of categories.

You can basically think of them as spreadsheets: what kind of sheets you need and what kind of columns you need for each sheet.

But if you don't know what specific columns will be needed, don't worry.

You can ask AI to help you figure out.

So go back to Cursor.

So first thing I will do is I will open the terminal and get the file structure.

So I will use the same command, but this time I will use three layers deep.

So this will give me the latest file structure, and I'm going to copy this over.

I'm just going to the instructions.md and update the file structure here.

Then I'm going to copy this over to the instruction on the right side and give instruction: "I have a project built based on the instructions.md, but currently we need to fetch Reddit data and call OpenAI every time, which is not optimal.

I want a backend engineer to connect to Supabase, save each subreddit data to Supabase, and only fetch data if the last update time is older than 24 hours ago.

Help me generate detailed documentation to help backend developers understand the project structure, what cool parts to build for Supabase integration that are compatible with the current project structure, and what database should we create and what optimal schema should look like.

Let's sync step by step."

I actually want to use the OpenAI preview model here directly and click enter.

Okay, now it returns back very detailed documentation where it talks about how the data currently flows.

It also shows me the actual database schema design and data fetching logic as well as detailed steps.

So this is really good.

Next thing is I actually want to convert this into a markdown file that I can get Cursor to refer to.

So I'm going to copy-paste the whole thing and go to Cursor: "Help me convert this into proper markdown format."

Okay, great.

So I can copy this over, go to the instructions folder, and create a new one called "supabase_setup.md."

Paste this in, and we do need to update one part, which is the file structure.

I will need to copy the latest file structure into here and save.

Before we get into Cursor, we need to do a few steps.

Firstly, we need to install the Supabase client library.

Open the terminal and paste in the command.

Next, we can start using Cursor composer.

So I'm going to open Cursor composer and then say we need to implement Supabase integration for this current project based on the instructions here.

Supabase first needs to initialize clients.

So enter.

So you can accept all, and next, we will need to add the credentials into `.env.local`.

To do that, we need to set up the Supabase project first.

I'm going to go to Supabase and create a new project.

I'm going to give it the name "Reddit Analytics" and give it a password.

Okay, great.

After the project is created, I will go to Project settings and API.

Then here we will get the credentials we need: one is the URL, another is the service role credentials.

After that, we will need to create the two database tables as well.

So there are two ways you can do that.

Either you can go to the table editor and create a new table by just typing the name of the table and adding the columns based on the instructions, or we can actually go to the cloud and then give instruction: "Give me the SQL command to create all tables in Supabase directly."

Then it will give me this SQL code.

I can copy and go to the SQL editor, paste it in, and then run.

Okay, and after it's running, you can go to the table.

All those tables should be created already according to the instructions.

So I'm going to give the instruction: "Great, I've set up the Supabase project table and added environment variables.

Now let's do the next step to initialize the Supabase client and modify the data fetching logic."

I'm going to copy-paste the specific part into here as well and click enter.

So I'm going to click accept all, and then do: "Let's do step six: update PR now."

Accept all.

The next step is now let's test the data flow.

Okay, I can see I got a few errors, so paste those errors in.

I got this error after loading the subreddit page, and accept all.

Okay, and thanks for the log.

Before I can see that we successfully fetched data from Reddit, but got an error actually upserting data.

So it says "Couldn't find advice request."

Okay, so I guess probably referencing the wrong schema, even though it is included in the doc.

So this time I'm going to be more specific, copy-paste the actual specific schema in, and then copy-paste this error in.

I got this error: "Seems failed to push data to Supabase. Please refer to the actual subreddit to actual tables and schemas we set in Supabase."

Let's think step by step.

Yeah, save this, and if I refresh again, I got another error.

So I'm going to copy-paste in.

I got this error after updating TS.

Okay, and I accept, and we got another error here related to Supabase.

So I'm going to copy-paste in and enter.

So it says that duplicate key error as well as category is not defined.

So it is fixing those ones.

Okay, cool.

So I can see the posts have loaded, and there are also posts created, sub-loaded, as well as post categories.

However, I do get an error, and it looks like the issue is that for some reason it kind of fetched the data twice.

So I will go back to Cursor and then copy-paste this in.

Everything seems to be working now.

I can see data is sent to Supabase.

The only issue is that it seems that somehow we fetched data twice after the initial fetch succeeded.

This led to an error I pasted.

What could be the root cause?

Okay, great.

So now I can see data is loaded properly on the front end.

If I quit this page and come again, you can see data loads much faster because reading data is from Supabase.

The only issue is the comment data didn't seem to be loaded.

The created data is not loaded, and the category is also not loaded.

So I'm going to go back to Cursor.

So here I will give instruction that there are some issues for top-right post comments created.

Category data seems to load down front end, and for "See," no data is loaded too, but I can see in Supabase that data exists.

What could be the root cause?

Okay, so it gives me an answer, but for some reason, it didn't really update the file directly.

So I'm just going to manually copy-paste in.

So you can just copy this function name, go to search, and then you will find a specific file.

So we need to update this part.

I'm going to update this part as well as the return value.

So I save this and refresh.

Okay, so you can see the comments data and the created data have been displayed properly.

The only thing is the category data still is not pulling through.

Let me just double-check.

I do think the post categories are created properly.

So I will give instruction: "Great, the created and comments data are displayed now.

However, no category data is loaded.

What could be the root cause?

Help me think through step by step, and above is a reference."

Okay, so it asks me to add in the debugging for so I just add it and then try to load the data again.

So I can see that the post category looks something like this.

So I tell it post category looks like an array of objects.

Okay, great.

So everything is working now.

I can see that it's added to Supabase, and I can go back and click again.

Data will be loaded instantly, but if the first time I open something, it will load the data and sync all the data to Supabase.

So this is actually how you can build a new feature on top of a project that already exists.

The last part I want to show you is how you can make your UI look a lot better.

So I'm sure you definitely heard about VZ, which is kind of a generative UI platform introduced by Vercel.

A lot of people are talking about it, but it might not be super clear to you about when you should use VZ.

From my experience, you can basically use Cursor to build out the functionality of your application, and in the end, you can go back and ask VZ to make your UI look a lot better.

It's a lot easier than you think.

I will show you how.

So I basically ask VZ to help me update the UI page by page.

For example, I will go back to my app and choose `page.tsx`, which is kind of like the homepage where I display all the subreddits.

What I would do is I will basically just go to VZ and paste in the `page.tsx`, and then I'll give instruction: "I'm building a Reddit analytics platform. Above is the homepage displaying all the subreddits available. Please keep the functionality exactly like above but make the UI a lot better. Remember, only change the UI; do not change functionality and variables."

So I will click enter.

What it will do is that it will start to spit out the UI.

It might give you some errors, but you can ignore that.

I will just come here and copy-paste this code and go back, save.

You can see the UI looks a lot better and different.

So this is basically how we are going to update the UI.

We basically just need to change things bit by bit.

So the next thing is I want to update the "Add Subreddit" button.

So now I'm going to go back to components and let's change the "Add Subreddit" model button.

So I'm going to copy things in.

Above is the "Add Subreddit" model and button.

Again, I'm going to copy the same kind of code, same prompt here: "Please keep the functionality exactly the same as above but make the UI a lot better."

Once it's finished, I'm going to copy this over, paste in.

Okay, one thing I did try again is add this part, making sure the same style as the previous page you created so that things will be consistent.

Alright, I will copy this in, save.

Okay, so now you can see the button is also in the same style as well.

If I click on that, it will give me the kind of dark mode model.

The next thing I want to change are those cards that display in the subreddit as well.

So I will go to the subreddit card, basically do the same thing, copy those over, and I just copy exactly the same prompt.

Okay, so the card has been created.

I can copy this, paste in.

Great, now the style you can see is the same as everything else on the platform.

Next, I will go to the subreddit page, and there I will firstly go to the subreddits page and paste it in and use the same prompt.

Give instruction: "Great, above subreddit page displaying details of this subreddit analytics."

Enter.

Okay, once this is finished, even though it shows an error here, but I'm going to ignore that and just copy this, paste in here.

Cool, so you can see that the overall structure looks more and more similar.

We only have a few things left: subreddit tabs.

Copy that in and paste over.

Okay, still looks a bit wrong, but I will just copy this code over and go back to Cursor, save it, and go back here.

Okay, it actually does look pretty good.

It kind of blends into the dark mode, same overall.

The next thing I want to do is that I want to update the table.

So I will go back to the post table, copy this, and paste it over.

Nice, so it looks a lot better now with the right color scheme and the Addison icon as well.

Obviously, you can prompt it further to get the right style you want.

I'm just going to move on to the last part, which is the same card.

So paste this in.

Awesome!

So you can see that now the UI is a lot more fleshed out than before, and everything looks a lot more cohesive.

Obviously, if you don't like a style, you can prompt VZ to change the style as well, but I would suggest you do that at the very beginning.

So this is how you can set up a fully functional web app with a beautiful UI and backend setup.

The last thing is that we actually want to bring this app live so the rest of the world can see it.

To do that, we're going to use Vercel, which is the company behind Next.js, and they made deployment a lot easier.

You can basically go to Vercel, create an account, and choose this project from GitHub repo and go through the deployment process, which normally involves some kind of debugging process as well.

I'm not going to go into details, and if you want to learn details about how to actually deploy the web app via Vercel, you can check out the other video where I dive deep into every single step that's needed to put your app live.

I've put that link in the description below so you can check it out.

So this is some of my best practice workflows of how I use Cursor to build fully functional applications by creating very detailed documentation.

I hope you find this useful.

I highly recommend trying it out and even building some kind of more advanced functions that maybe chat with this Reddit data.

If you want to learn detailed things like how to build user authentication with Cursor and how to connect to Stripe so that you can charge different pricing tiers, you can join my community, AI Builder Club, where I share a lot of tips and detailed prompts and code examples of how to build AI applications.

Each one of them has my best practice prompts that I personally use for every single project, where you can just copy-paste, plug and play.

Plus, you get to connect with other AI builders who might already have experienced problems that you are facing right now.

So you can click the link in the description below to join my community today.

I hope you enjoyed this video.

I will continue sharing interesting AI projects I'm doing, so please like and subscribe if you want to keep updated.

Thank you, and I see you next time.