Best Cursor Workflow that no one talks about...

00:42:52
https://www.youtube.com/watch?v=2PjmPU07KNs

الملخص

TLDRThis video tutorial showcases how to enhance the development workflow when building applications with Cursor, an AI code editor. The presenter outlines a step-by-step process for creating an AI analytics platform called Gummy Search. This application aims to leverage Reddit posts to identify common issues and potential solutions. Key points discussed include the importance of detailed project planning, proper documentation, using a thoughtful technology stack, and considering backend setups with databases like Superbase. The video also introduces how to improve user interfaces using platforms like Vercel and emphasizes the benefits of having a supportive community through the AI Builder Club. Overall, it presents practical strategies for effectively utilizing AI tools to build functional applications.

الوجبات الجاهزة

  • 📝 Create detailed documentation for better alignment with Cursor.
  • 🔍 Use planning to define the core functionalities of your application.
  • 🛠️ Choose the right technology stack for your project.
  • 💡 Integrate large language models for powerful insights.
  • 📊 Monitor application usage with platforms like Hadon.
  • 🔗 Utilize Superbase for easy backend integration.
  • 🌐 Deploy applications seamlessly using Vercel.
  • 👥 Join AI Builder Club for community support and tips.

الجدول الزمني

  • 00:00:00 - 00:05:00

    The video is sponsored by Hadon, an open-source platform for logging and debugging AI applications. It introduces Cursor, an AI code editor that simplifies app development using natural language. Viewers will learn how to enhance their workflow for building production-level applications, minimizing errors.

  • 00:05:00 - 00:10:00

    When using Cursor, effective communication through documentation is vital. To ensure successful app development, it's important to detail core functionalities, file structures, coding examples, and dependencies clearly. The example app to build is Gummy Search, an AI analytics platform that summarizes Reddit posts.

  • 00:10:00 - 00:15:00

    The first step involves planning the app's core functionalities. It includes creating a GitHub repository, compiling instructions, and determining the technologies used in the project, such as Next.js, Tailwind CSS, and various UI libraries, while ensuring all documentation is precise and comprehensive for better development outcomes.

  • 00:15:00 - 00:20:00

    The presenter emphasizes the importance of writing detailed product documentation, including how users interact with subreddits, the actions they can take, and how to categorize posts. This helps to streamline the development process as Cursor generates code based on these specifications.

  • 00:20:00 - 00:25:00

    Next, the presenter illustrates how to fetch Reddit data through specific libraries like Snowwrap. They demonstrate how to use the Cursor tool to assist in creating scripts for this functionality and how to implement API credentials correctly for fetching data.

  • 00:25:00 - 00:30:00

    The video continues with an example of utilizing OpenAI to categorize fetched posts from Reddit. The process involves instructing Cursor to generate TypeScript files that analyze Reddit posts based on structured outputs, followed by error handling for successful implementation.

  • 00:30:00 - 00:35:00

    As they progress, challenges arise that require real-time problem-solving with Cursor. The presenter shares experiences of fixing coding issues, ensuring data fetch processes are optimized to avoid unnecessary API calls, and refining their overall development workflow.

  • 00:35:00 - 00:42:52

    The video concludes with a transition on how to style the UI better using Vzer and deploy the application using Vercel. The presenter encourages viewers to join the AI Builder Club for further insights and advanced tutorials on AI application development.

اعرض المزيد

الخريطة الذهنية

فيديو أسئلة وأجوبة

  • What is Cursor?

    Cursor is an AI code editor that allows users to write applications using natural language.

  • What is the purpose of the Gummy Search app?

    Gummy Search analyzes Reddit posts to extract insights and potential solutions to user queries.

  • What technology stack is suggested for building the app?

    The suggested stack includes Next.js, Chass, Tailwind, and Lucid Icon.

  • How can errors be minimized when using Cursor?

    Providing detailed documentation, including file structure and core functionalities, can help improve success rates.

  • What is Hadon used for?

    Hadon is an open-source platform for monitoring and debugging large language model applications.

  • What is Superbase?

    Superbase is an open-source backend service for web and mobile applications.

  • How does Vercel help in deploying applications?

    Vercel simplifies the deployment process for applications built with Next.js.

  • What is the AI Builder Club?

    It is a community for learning and sharing knowledge about building AI applications using various tools.

عرض المزيد من ملخصات الفيديو

احصل على وصول فوري إلى ملخصات فيديو YouTube المجانية المدعومة بالذكاء الاصطناعي!
الترجمات
en
التمرير التلقائي:
  • 00:00:00
    this video is sponsored by hadong one of
  • 00:00:02
    the best open source platform for
  • 00:00:03
    logging monitoring and debugging your
  • 00:00:05
    large L model applications today I want
  • 00:00:07
    to show you how can you make your cursor
  • 00:00:09
    workflow 10x more effective to build
  • 00:00:11
    production level application with much
  • 00:00:13
    less arrows if you don't know what
  • 00:00:14
    cursor is it is the most popular AI code
  • 00:00:16
    editor that everyone is learning it
  • 00:00:18
    enable anyone even 8-year-old to be able
  • 00:00:20
    to build fully functional application
  • 00:00:23
    using just natural language and we saw
  • 00:00:24
    many wild example just form past week
  • 00:00:27
    all around internet where people
  • 00:00:28
    showcase beautiful application that they
  • 00:00:30
    have been building with cursor but the
  • 00:00:32
    moment you start building with cursor
  • 00:00:33
    app yourself you probably start
  • 00:00:34
    encountering countless arrows and very
  • 00:00:37
    hard guessing actually up running and if
  • 00:00:39
    this is your experience the good news is
  • 00:00:41
    that there are many things you can do to
  • 00:00:43
    actually dramatically improve the
  • 00:00:44
    success rate for example instead of
  • 00:00:46
    giving cursor a simple instruction to
  • 00:00:48
    build out the whole web application you
  • 00:00:50
    actually need to learn how to write the
  • 00:00:51
    best documentation to communicate and
  • 00:00:53
    align with cursor what are core
  • 00:00:55
    functionalities how does n file
  • 00:00:57
    structure sure look like including code
  • 00:00:58
    examples and list out all the
  • 00:01:00
    dependencies or it might be a bit
  • 00:01:02
    unclear of which text tack that you
  • 00:01:04
    should be using and how does cloud VZ
  • 00:01:06
    and cursor fit together into a cohesive
  • 00:01:09
    workflow and when to use which one with
  • 00:01:11
    all those tips and best practice
  • 00:01:12
    workflow I was able to dramatically
  • 00:01:14
    improve success rate for my own purs so
  • 00:01:16
    I'm going to show you step by step what
  • 00:01:18
    does my workflow look like so you can
  • 00:01:20
    replicate and build your next dream app
  • 00:01:22
    and the example application I want to
  • 00:01:24
    show you how to build today is a really
  • 00:01:26
    interesting AI analytics platform called
  • 00:01:28
    Gummy Search it basically utiliz what
  • 00:01:29
    what lar L model is really really good
  • 00:01:32
    at which is reading through thousands of
  • 00:01:35
    unstructured redit posts and summarize
  • 00:01:37
    extract key information like what kind
  • 00:01:39
    of pinpoints people are struggling with
  • 00:01:41
    and what kind of opportunities might be
  • 00:01:42
    for solutions that people are asking for
  • 00:01:44
    and I learned about this app from one of
  • 00:01:46
    the Greg's video where he showcased how
  • 00:01:48
    he use Gumi search to find startup ideas
  • 00:01:50
    which I highly recommend and what got me
  • 00:01:52
    really interesed in to use this as
  • 00:01:53
    example is because getting large L model
  • 00:01:56
    readings through huge amount
  • 00:01:57
    unstructured data and extract insights
  • 00:01:59
    can be us utilize for many other data
  • 00:02:01
    source apart from just rdit like you can
  • 00:02:03
    probably build application for Twitter
  • 00:02:05
    Facebook group Discord or even private
  • 00:02:07
    data source that you might got somewhere
  • 00:02:08
    else so to hour showcase how can you use
  • 00:02:10
    cursor to reute such social media
  • 00:02:12
    analytics platform where it can res
  • 00:02:14
    thousands of posts and summarize and
  • 00:02:16
    extract key information for people to
  • 00:02:17
    find Opportunities with a full backhand
  • 00:02:19
    setup as well as integration with large
  • 00:02:22
    language model monitoring platform so
  • 00:02:23
    you can optimize cost so let's get
  • 00:02:25
    started so to get started instead of
  • 00:02:28
    jumping into cursor Direct ask you to
  • 00:02:30
    build something out we need to do some
  • 00:02:32
    planning the first thing is we want to
  • 00:02:34
    scope out a little bit about what kind
  • 00:02:35
    of core functionality we want to ship my
  • 00:02:37
    process is to spit out a core scope the
  • 00:02:40
    application has to have to be useful now
  • 00:02:42
    do some quick research maybe talk to
  • 00:02:44
    chbt to understand what kind of like
  • 00:02:46
    package that I can use for core
  • 00:02:48
    functionalities in the end I would get
  • 00:02:50
    cloud or 01 model to design the project
  • 00:02:53
    structure folder so that I can plan
  • 00:02:55
    ahead based on all the requirements I
  • 00:02:56
    have and then write out the detail
  • 00:02:58
    requirements so in order for a specific
  • 00:03:00
    case I will create new GitHub report
  • 00:03:02
    called Reddit analytics platform then I
  • 00:03:04
    will start creating a instructions. MD
  • 00:03:07
    file and normally I would start with a
  • 00:03:09
    file structure look something like this
  • 00:03:10
    I would give a Pur overview and then
  • 00:03:12
    start spit out the cool functionalities
  • 00:03:15
    including documentations of package that
  • 00:03:17
    we're going to use and current file
  • 00:03:19
    structure so that I can ask 01 model to
  • 00:03:21
    plan a little bit so in your case you
  • 00:03:22
    can probably follow very similar
  • 00:03:24
    structure especially if you're building
  • 00:03:25
    a web application for project overview
  • 00:03:27
    I'll just give a brief description that
  • 00:03:29
    you are building a Reddit application
  • 00:03:31
    platform where users can get antics of
  • 00:03:33
    different subreddits where they can go
  • 00:03:35
    and see the top contents as well as the
  • 00:03:37
    category of posts and you will be using
  • 00:03:40
    nextjs 14 chassis in Tailwind Lucid icon
  • 00:03:43
    and in term of tax stack so nextjs is
  • 00:03:46
    just one type of Frameworks that we are
  • 00:03:48
    using similar to react and chassen is a
  • 00:03:51
    UI component library and telwin is a CSS
  • 00:03:54
    Library where it will make a code more
  • 00:03:56
    easier to understand and Lucid is icon
  • 00:03:58
    library that we can use but if you want
  • 00:04:00
    to use other component Library you can
  • 00:04:02
    just change it here and then I'm going
  • 00:04:03
    to start flashing out core functionality
  • 00:04:05
    this is probably the most important part
  • 00:04:07
    I basically want to think through what
  • 00:04:09
    are the core functionality that this app
  • 00:04:11
    has to have in my case if I use Gummy
  • 00:04:14
    Search as the reference we need a page
  • 00:04:16
    to actually view all the subreddit
  • 00:04:19
    available and user can create a new
  • 00:04:20
    subreddit if they need and then we also
  • 00:04:23
    need a part to revew all details for
  • 00:04:25
    specific subred and from my experience
  • 00:04:28
    the most useful part of Gumi search is
  • 00:04:30
    the same where I can see the top content
  • 00:04:32
    as well a category about which post
  • 00:04:34
    where people talk about solution request
  • 00:04:36
    which post they talk about P anger and
  • 00:04:38
    something we can even do more than gumy
  • 00:04:40
    search is that sometimes I have very
  • 00:04:43
    specific type of post that I want to
  • 00:04:44
    find so I want to enable people maybe
  • 00:04:47
    add a new category as well so in my case
  • 00:04:49
    I would have a few different
  • 00:04:50
    functionalities one is the ability to
  • 00:04:52
    see the list of available subus and add
  • 00:04:54
    a new sub Rus and it need to display a
  • 00:04:57
    sub page uh and we also need to Fat post
  • 00:05:00
    data in the top post tab as well as
  • 00:05:03
    using open AI to analyze the post data
  • 00:05:05
    into different category SS and in the
  • 00:05:07
    end a bonus point to add new SE category
  • 00:05:10
    and what I need to do after I basically
  • 00:05:12
    just need to spit out all the detail
  • 00:05:14
    interaction that I can Sy of if this is
  • 00:05:16
    your first time writing detail product
  • 00:05:18
    doc it probably take some time but it
  • 00:05:20
    will be worth it so in my case I will
  • 00:05:21
    write down the details that user can see
  • 00:05:23
    list of available Subarus that already
  • 00:05:25
    created displayed in cards common ones
  • 00:05:27
    like AMA and open AI and users can click
  • 00:05:30
    on add a Reddit button which should open
  • 00:05:32
    a model for user to paste in Reddit URL
  • 00:05:34
    and add and after user adding a Reddit a
  • 00:05:37
    new car should be added and in subreddit
  • 00:05:39
    page uh clicking on each subreddit
  • 00:05:42
    should go to Reddit page with two tabs
  • 00:05:44
    as well as other details that you can
  • 00:05:46
    pause the video and type out later and
  • 00:05:47
    after this core functionality next thing
  • 00:05:49
    we want to do is to find the libraries
  • 00:05:51
    and packages that we're going to use to
  • 00:05:53
    build out some functionalities so there
  • 00:05:54
    are two type of documents I would need
  • 00:05:56
    to include one is the code example for
  • 00:05:58
    how do we get ready Reddit data so there
  • 00:06:00
    are few ways I can go the easiest way is
  • 00:06:02
    that you can go and ask chat gbt
  • 00:06:04
    especially for functionality like this
  • 00:06:06
    one where reditor is not new SC you
  • 00:06:08
    should already have training data about
  • 00:06:10
    how to implement things for Reddit so I
  • 00:06:12
    can just go and ask I'm building a web
  • 00:06:13
    app using nextjs for fashion Reddit post
  • 00:06:15
    data what is best package to use then I
  • 00:06:18
    can say give me answer where snow wrap
  • 00:06:20
    seem to be one of the best package to
  • 00:06:22
    use and then I can go to npmjs.com to
  • 00:06:25
    search for that specific package so mpm
  • 00:06:27
    is like the package man manager which
  • 00:06:30
    we're going to use to install this
  • 00:06:31
    package later so in here it give us some
  • 00:06:33
    examples and also link to the detailed
  • 00:06:36
    documentations which we can take look to
  • 00:06:38
    get more details and one thing I would
  • 00:06:40
    normally do is I would start un cursor
  • 00:06:41
    to give it documentation and try to spit
  • 00:06:43
    out some proof concept of this
  • 00:06:45
    functionality that we want so I will
  • 00:06:47
    just copy this one go back to cursor
  • 00:06:49
    open the cursor composer and then I addm
  • 00:06:53
    uh doc where I can click on add new Doc
  • 00:06:56
    pasting the uh link here so it were
  • 00:06:58
    adding the documentation of the snow
  • 00:07:00
    wrap I will confirm and then here I will
  • 00:07:02
    give a specific instruction help me
  • 00:07:04
    build a simple typescript file of fing
  • 00:07:06
    recent RIT post data from past 24 hours
  • 00:07:09
    under orama including title content
  • 00:07:11
    score number of comments and date using
  • 00:07:13
    snow rrap so you can see it start
  • 00:07:14
    creating example uh script so I can
  • 00:07:17
    accept all and the first thing is I will
  • 00:07:19
    need to get the redit API credentials so
  • 00:07:22
    you can keep asking it about like how do
  • 00:07:24
    you get uh Reddit API credentials but
  • 00:07:26
    you basically go to reddit.com
  • 00:07:29
    preference SL apps and then you can
  • 00:07:30
    click on create another app and give a
  • 00:07:33
    name so in our case I call Post
  • 00:07:35
    categorizer and I want to choose script
  • 00:07:37
    description we can put an app that
  • 00:07:40
    analyze Reddit posts and about Ur you
  • 00:07:43
    can keep empty redir URL I will just
  • 00:07:46
    keep Local Host 3000 and click on I'm
  • 00:07:49
    not robot and create app and now you
  • 00:07:51
    will get a credential here so I'm just
  • 00:07:53
    going to temporarily replace a
  • 00:07:54
    credential and the user agent you can
  • 00:07:56
    just put it whatever client ID will be
  • 00:07:58
    the tag
  • 00:07:59
    here and the secret ID will be this one
  • 00:08:02
    and here it ask for the refresh token as
  • 00:08:05
    well by remember snow wrap off a few
  • 00:08:07
    different ways to oos I just want to
  • 00:08:09
    make an easy one which using the
  • 00:08:11
    username and password so I'm going to
  • 00:08:13
    copy this one and replace the refresh
  • 00:08:15
    token to be username and password where
  • 00:08:17
    I can putting my username and password
  • 00:08:19
    in next is I want to install mpm so I'll
  • 00:08:22
    copy the command line in terminal and
  • 00:08:24
    then do TS node fash RIT post. TS Okay
  • 00:08:28
    cool so you can see that it does return
  • 00:08:31
    actual post data back so this code
  • 00:08:34
    example is actually working and then I
  • 00:08:35
    can just copy paste this thing as a code
  • 00:08:38
    example and again just taking away
  • 00:08:40
    another layers of potential arrows from
  • 00:08:42
    this process by doing some research
  • 00:08:44
    early on so what I'll do is I will copy
  • 00:08:46
    this code example in and go back to the
  • 00:08:48
    instruction. MD and put example here
  • 00:08:51
    says documentation of how to use snow
  • 00:08:55
    wrap to fetch RIT post data so code
  • 00:08:58
    example and paste this in and now we
  • 00:09:01
    also get description that we will use no
  • 00:09:03
    RP as a library to fetch Reddit data and
  • 00:09:05
    I will basically do the same thing as
  • 00:09:07
    documentation for how to use open AI
  • 00:09:09
    structure output to categorize the RIT
  • 00:09:11
    post as well so our go to open AI
  • 00:09:13
    documents copy the link in go back to
  • 00:09:16
    cursor add a new one and add Doc and new
  • 00:09:19
    one paste in open AI structured output
  • 00:09:23
    confirm and here I would say instruction
  • 00:09:25
    help me write a simple typescript to
  • 00:09:27
    categorize the RIT post it should have
  • 00:09:29
    output post category analysis where it
  • 00:09:31
    has bodan value bodan basically is like
  • 00:09:34
    true and false value for each category
  • 00:09:35
    below solution request P anger advice
  • 00:09:38
    request and money talk so I will click
  • 00:09:40
    enter so it create a simple script for
  • 00:09:42
    me and I can just come here and
  • 00:09:44
    temporarily replace the API key here I
  • 00:09:46
    do notice the code here is actually not
  • 00:09:48
    using the structure output so I'm going
  • 00:09:50
    to actually give a very specific example
  • 00:09:53
    uh that I get from the documents and
  • 00:09:56
    this is kind of another reason why I
  • 00:09:57
    think this type of in Advan plan
  • 00:09:59
    research is necessary so I would just go
  • 00:10:02
    back to cursor and then say I want you
  • 00:10:05
    to use the open AI structured output
  • 00:10:08
    function use example above as reference
  • 00:10:11
    to refactored code uh and uh if I come
  • 00:10:13
    back out you can see that it used the uh
  • 00:10:15
    structure output now even though the
  • 00:10:17
    model is wrong so I will change this to
  • 00:10:19
    be 40 mini but I will also just do some
  • 00:10:23
    quick updates because I don't really
  • 00:10:25
    like the structure I wanted to put a
  • 00:10:27
    description to actual Z data type here
  • 00:10:29
    here instead so I can just choose this
  • 00:10:31
    part of code so I can just go back to
  • 00:10:33
    cursor composer and I want you to set a
  • 00:10:36
    description of each category to zone
  • 00:10:38
    model itself instead of part of prompt
  • 00:10:41
    so later it'll be more flexible if
  • 00:10:42
    categories change okay now it should be
  • 00:10:44
    all good so I will open Terminal mpm
  • 00:10:47
    install open and zot and then do TS node
  • 00:10:50
    categorize post. TS okay I got this
  • 00:10:53
    Arrow okay looks like it didn't add the
  • 00:10:56
    beta here so I'm going to paste in the
  • 00:10:59
    beta according to the documentations
  • 00:11:01
    okay another problem I found earlier was
  • 00:11:03
    that type script have very strict return
  • 00:11:05
    type and previously the return type was
  • 00:11:07
    defined ex result type we defined
  • 00:11:08
    earlier but the actual thing we return
  • 00:11:10
    here is string so I just remove that and
  • 00:11:12
    we can run again cool now you can see it
  • 00:11:14
    returned this result po play so this is
  • 00:11:17
    also example we can include into the
  • 00:11:19
    instruction so our add documentation for
  • 00:11:23
    open AI structured output code example
  • 00:11:26
    and I can also include the example
  • 00:11:28
    output and example response and at top I
  • 00:11:31
    update uh using open AI structure output
  • 00:11:34
    functions so this pretty much the Croc
  • 00:11:37
    of the initial draft the last thing I
  • 00:11:38
    want to do is I want to include the
  • 00:11:40
    current file structure to do that I will
  • 00:11:42
    first need to set up the project so to
  • 00:11:45
    set up project I can go to chass in they
  • 00:11:47
    have pretty good command line I press in
  • 00:11:49
    npx chass in at latest initial and it
  • 00:11:52
    will ask me whether I want to create a
  • 00:11:54
    new nextjs project first I will click Y
  • 00:11:57
    and then give name Reddit and Antics and
  • 00:12:00
    I will choose a New York style natural
  • 00:12:03
    uh yes then all the project has been
  • 00:12:05
    created publicly so you can see a
  • 00:12:06
    project folder has been created uh what
  • 00:12:08
    I want to do is that I actually want to
  • 00:12:11
    First create a folder inside this
  • 00:12:13
    project folder called instructions and
  • 00:12:16
    move this instruction MD under that
  • 00:12:18
    folder and now I do cursor Reddit
  • 00:12:21
    analytics so this will open cursor in
  • 00:12:23
    that specific folder uh if you don't
  • 00:12:25
    have this cursor command line yet you
  • 00:12:27
    can command shift p and then select this
  • 00:12:30
    shell command install cursor command
  • 00:12:32
    otherwise you can always just open that
  • 00:12:33
    specific folder from here but now I'm
  • 00:12:35
    going to this specific uh project folder
  • 00:12:38
    and then open the instruction that we
  • 00:12:39
    created earlier so let's firstly install
  • 00:12:41
    a few different packages that we know
  • 00:12:42
    we're going to need so mpm install snow
  • 00:12:44
    wrap open Ai and z and next thing is I
  • 00:12:47
    will create a new file called EMV do
  • 00:12:50
    loal where I will add all the
  • 00:12:51
    credentials in and also do MPX chassi in
  • 00:12:55
    at latest app so at default the
  • 00:12:57
    components from chass in one be
  • 00:12:59
    automatically add in so I'm going to
  • 00:13:01
    manually select the ones that we know
  • 00:13:03
    we're going to need like badge card
  • 00:13:05
    input label sheet table tabs and enter
  • 00:13:10
    Then you can see the components has been
  • 00:13:11
    added then we need to add the current
  • 00:13:14
    file structure in so we'll firstly do
  • 00:13:16
    Brew install trees so this is a library
  • 00:13:19
    that going to get a snapshot of a
  • 00:13:21
    current file structure so if you just do
  • 00:13:23
    tree it will return the whole file
  • 00:13:25
    structure which is not exactly what we
  • 00:13:26
    need instead I would do tree- L which
  • 00:13:29
    which means we would go just two layer
  • 00:13:31
    down which should be enough and then - I
  • 00:13:33
    which means ignore so we don't want to
  • 00:13:34
    include node module file so now it will
  • 00:13:37
    give me a clean file structure here uh
  • 00:13:40
    and I will copy this in Reddit analytics
  • 00:13:43
    and then paste this file in to indicate
  • 00:13:45
    what does existing project folder look
  • 00:13:47
    like so now what we have here is a
  • 00:13:49
    pretty decent starting point of the
  • 00:13:52
    product requirement dot but that's not
  • 00:13:53
    it to actually get a cursor produce
  • 00:13:55
    really good result with less and less
  • 00:13:57
    Arrow I actually want to give it initial
  • 00:13:59
    PRD to 01 model or Cloud uh to design
  • 00:14:03
    what does the final Pur structure should
  • 00:14:05
    look like what kind of dependency Z will
  • 00:14:06
    be and write out the final PRD to fill
  • 00:14:09
    in all the details I personally found 01
  • 00:14:12
    is really good at writing and filling
  • 00:14:14
    those detail docks what I would normally
  • 00:14:15
    do is copy the existing Pro requirement
  • 00:14:18
    dog paste in here and then add a bottom
  • 00:14:20
    and above is a project I want to build
  • 00:14:22
    how should I structure my project file
  • 00:14:24
    try to create as few files as possible
  • 00:14:27
    because I found when you have less files
  • 00:14:29
    cursor tend to have less arrows and
  • 00:14:31
    click enter so you can see the O Model
  • 00:14:33
    start syncing through a few different
  • 00:14:35
    steps and then spit out a project
  • 00:14:38
    structure file based on the requirements
  • 00:14:40
    and after that I will give the Second
  • 00:14:42
    Step help me adding details to the
  • 00:14:44
    original PRD that give clear alignment
  • 00:14:46
    to developers who are implement this
  • 00:14:48
    project so don't create actual code just
  • 00:14:50
    a PRD including file structure in the
  • 00:14:52
    doc and all documents provided with both
  • 00:14:55
    example code and response those are
  • 00:14:56
    important context and click enter again
  • 00:14:59
    o1 model will start singing through a
  • 00:15:00
    few different steps and spit out a very
  • 00:15:03
    detailed instructions of how this
  • 00:15:05
    project should be created as well as
  • 00:15:07
    updated Pera structures and code
  • 00:15:09
    examples in the end it will give a very
  • 00:15:12
    detailed breakdown of all different
  • 00:15:14
    components okay great so this is really
  • 00:15:16
    decent product requirement doc uh the
  • 00:15:18
    only downside is you can't just copy
  • 00:15:20
    paste in because it's not in markdown
  • 00:15:22
    format so normally what I do is I go to
  • 00:15:24
    Cloud paste this in and then say help me
  • 00:15:27
    convert this to markdown and then Cloud
  • 00:15:30
    will break that down into specific
  • 00:15:32
    markdown files that I can copy paste in
  • 00:15:35
    once this finished I will just copy this
  • 00:15:37
    and paste into instruction. MD and save
  • 00:15:41
    okay so this file should give cursor
  • 00:15:43
    quite good amount of alignment so now I
  • 00:15:45
    think we are pretty much ready to start
  • 00:15:48
    getting cursor Wan so only last thing we
  • 00:15:50
    want to create aemv local file and
  • 00:15:52
    putting the credential of Reddit and
  • 00:15:54
    open AI here and now let's get cursor to
  • 00:15:56
    start implementing this project but
  • 00:15:58
    before we diam I got a lot of DMS where
  • 00:16:00
    people asking for more indepth tutorial
  • 00:16:03
    of utilizing AI to build fully
  • 00:16:05
    production ready applications and that's
  • 00:16:07
    why I started a community called AI
  • 00:16:09
    Builder Club where I'm spending lots of
  • 00:16:11
    time every week adding really in-depth
  • 00:16:14
    content of how can you use AI to bring
  • 00:16:16
    your next startup ideas life it includes
  • 00:16:18
    step-by-step tutorial of how to build
  • 00:16:20
    real world use case with AI where our
  • 00:16:23
    share best practice prompt and code
  • 00:16:24
    example that I use in every single
  • 00:16:27
    project and you can just copy paste case
  • 00:16:29
    plug and play as well as some ready to
  • 00:16:30
    use template for some common agents that
  • 00:16:32
    you can build and most importantly you
  • 00:16:34
    can go and post challenges and questions
  • 00:16:37
    that you are experiencing in the
  • 00:16:38
    community me or other community members
  • 00:16:40
    will normally jump on and answering you
  • 00:16:42
    can also see some secret tips that other
  • 00:16:44
    AI builders in the community have tried
  • 00:16:46
    and worked well for them if you think
  • 00:16:48
    this is interesting you can click on the
  • 00:16:49
    link in the description below to join
  • 00:16:51
    and now we can start getting curser to
  • 00:16:53
    build out this application using the
  • 00:16:55
    fully flash out documents so I would do
  • 00:16:58
    command I open cursor composer so let's
  • 00:17:00
    give instruction let's build a RIT
  • 00:17:02
    analytics platform based on instruction
  • 00:17:04
    let's firstly build 1.1 view available
  • 00:17:07
    subreddits enter so you can see that it
  • 00:17:10
    will create files in all the right plac
  • 00:17:13
    and I click accept and we can try to run
  • 00:17:16
    this by doing mpm wrong dep okay great
  • 00:17:19
    so we can see that the homepage already
  • 00:17:22
    created listing out all the sub Rus
  • 00:17:24
    available next let's build 1.2 adding
  • 00:17:28
    new sub Rus so Crea new components under
  • 00:17:31
    the components called add sarus model
  • 00:17:33
    and it also ask me to add in those new
  • 00:17:35
    components I believe I already added oh
  • 00:17:38
    but looks like I didn't add the dialogue
  • 00:17:40
    okay so I'm going to do npx chass and
  • 00:17:42
    latest add dialogue now if I go back to
  • 00:17:45
    Local Host 3000 I can see this new
  • 00:17:47
    button called at subreddit if I click on
  • 00:17:50
    that uh you can see the UI is a bit
  • 00:17:52
    broken but we're going to come back to
  • 00:17:54
    UI later first thing we just want to
  • 00:17:55
    making sure everything works so the
  • 00:17:57
    functionality of adding sub seem to be
  • 00:17:59
    there and next we're just going to move
  • 00:18:01
    on to the subredit detail page
  • 00:18:03
    navigation let's view the next part of
  • 00:18:08
    subreddit detail page navigation so it
  • 00:18:11
    will basically create pages and files
  • 00:18:13
    based on the predefined structure so if
  • 00:18:16
    I go back to Local Host and click on the
  • 00:18:18
    specific Reddit page you can see it
  • 00:18:20
    navigate to that specific side page then
  • 00:18:23
    I will ask you to move to second part
  • 00:18:25
    adding the tabs great now let's build
  • 00:18:28
    next part
  • 00:18:30
    so you can see the beauty of predefined
  • 00:18:32
    the product requirement doc like this is
  • 00:18:34
    that you basically break task down into
  • 00:18:36
    small steps that the cursor can take
  • 00:18:38
    very well and I will accept all so if I
  • 00:18:41
    go back to the app and click on this it
  • 00:18:43
    will open the two tabs here as well and
  • 00:18:46
    again I'm going to ignore the UI and
  • 00:18:48
    just finish the functionalities so I'm
  • 00:18:50
    going to give instruction now great
  • 00:18:53
    let's build fashion RIT post uh 3.1 data
  • 00:18:57
    retrieval so this should create a few
  • 00:18:59
    different files and I will just click
  • 00:19:01
    accept all and refresh the page here you
  • 00:19:04
    will see there are looks like there's
  • 00:19:06
    some arrows in terms of the modules so
  • 00:19:08
    I'm going to paste the arrow into the
  • 00:19:11
    cursor and help me resolve this Arrow so
  • 00:19:15
    we might need to install this two uh
  • 00:19:18
    libraries or just go to the other
  • 00:19:19
    terminal install and I'll accept all now
  • 00:19:22
    I can actually display the post great
  • 00:19:25
    now let's build 3.2
  • 00:19:29
    okay after this looks like no content is
  • 00:19:31
    displayed so I'm going to go back I can
  • 00:19:33
    see loading posts show up briefly on UI
  • 00:19:36
    but later it disappear and no post are
  • 00:19:38
    displayed on the interface help me
  • 00:19:40
    things through the root cost Ling step
  • 00:19:41
    by step so first say try to add some
  • 00:19:44
    additional logins or accept this it
  • 00:19:46
    looks like it says no post F which would
  • 00:19:48
    be weird my guess is maybe the API is
  • 00:19:51
    set up incorrectly so I can go to
  • 00:19:54
    libraries rdit dots and give feedback uh
  • 00:19:58
    it says no post found CU this because
  • 00:20:01
    Reddit dots is not set up properly okay
  • 00:20:05
    so it looks like the problem is that the
  • 00:20:07
    client side versus server side where the
  • 00:20:10
    rdts file was executed on the server
  • 00:20:12
    side but the separ r tabs component is
  • 00:20:15
    client side component so solution here
  • 00:20:17
    is that to get the data flow from server
  • 00:20:20
    side API to the client side components
  • 00:20:22
    given this observation here are the
  • 00:20:24
    potential root cost the client and
  • 00:20:26
    component might not be able to make a
  • 00:20:27
    service side API called directly so the
  • 00:20:29
    solution here is it creating new API
  • 00:20:32
    route to fetch post so now all the post
  • 00:20:34
    has been updated poply and what I would
  • 00:20:36
    do is I will quickly come here and then
  • 00:20:38
    submit a commit set up project and fetch
  • 00:20:43
    redit post commit so I going back to the
  • 00:20:46
    cursor composer and also this is fashing
  • 00:20:48
    RIT post now next based on instruction
  • 00:20:51
    let's build the 4.1 post
  • 00:20:54
    categorization uh I will accept all and
  • 00:20:56
    go back to this page refresh okay so
  • 00:20:59
    looks like here is Arrow I'm going to
  • 00:21:01
    copy this arrow and uh add to composer
  • 00:21:04
    help me identify root cost and resolve
  • 00:21:06
    this issue let thing step by step accept
  • 00:21:09
    all okay and next is I wanted to display
  • 00:21:12
    categories as well so I would say next
  • 00:21:14
    let's implement this 4.2 display
  • 00:21:16
    categories okay so looks like this one
  • 00:21:18
    issue that there's no actual
  • 00:21:19
    categorization displayed so I'm going to
  • 00:21:22
    go back cursor and then giveing
  • 00:21:24
    instruction back if categorize post and
  • 00:21:27
    point actually
  • 00:21:29
    working okay if we go back to the
  • 00:21:32
    reddits you can see again the end point
  • 00:21:34
    here of open AI is not exactly what do
  • 00:21:37
    we have in the instruction so I need to
  • 00:21:39
    be more specific I'll go back to the
  • 00:21:41
    instruction copy paste the code example
  • 00:21:43
    or accept all first and then add Reddit
  • 00:21:46
    TS paste the file in the categorized
  • 00:21:49
    post function is not implemented
  • 00:21:50
    correctly it has to be based on
  • 00:21:52
    documentation we provided in this
  • 00:21:53
    instruction file please refactor the
  • 00:21:55
    code so accept all and I want to change
  • 00:21:57
    this model to to be 4 uh mini and I
  • 00:22:01
    still observe a few uh kind of weird
  • 00:22:02
    part for some reason it just keep
  • 00:22:04
    ignoring some specific part like beta so
  • 00:22:07
    I just need to manually uh copy paste
  • 00:22:09
    over those things and Okay cool so you
  • 00:22:12
    can see that the category has being show
  • 00:22:14
    off properly for each post if I go to SS
  • 00:22:17
    I can click on each card and the
  • 00:22:19
    relevant post will be displayed here
  • 00:22:21
    great so I'm going to add it commit
  • 00:22:23
    again uh categorize posts ready so you
  • 00:22:27
    can see the core functional is
  • 00:22:28
    implemented here I can see the top post
  • 00:22:31
    I can also go to seams page future out
  • 00:22:33
    post with specific categories but for
  • 00:22:35
    anyone who is launching large L model
  • 00:22:37
    based application you all got a new
  • 00:22:39
    problem that you need to worry about
  • 00:22:41
    which is how do you Monitor and alert
  • 00:22:42
    the large L model usage and whether or
  • 00:22:45
    not you optimize the cost structure
  • 00:22:46
    there can really make a difference of
  • 00:22:48
    whether your business succeed or not I
  • 00:22:49
    give you one example a few months ago I
  • 00:22:51
    launched a AI girlfriend and back then I
  • 00:22:53
    offer a 60 seconds free Tri chat for
  • 00:22:56
    every single user lots of people sign up
  • 00:22:58
    but somehow I just never make money from
  • 00:23:00
    it so I manually Implement a bunch of
  • 00:23:02
    tracking to understand the cost
  • 00:23:03
    structure there and later I realized for
  • 00:23:05
    the 60 seconds free Tri if I have 1%
  • 00:23:08
    conversion of all the users I need to
  • 00:23:10
    charge at least $13 from each user to
  • 00:23:12
    break event so it's really a balance
  • 00:23:14
    between the performance cost and speed
  • 00:23:16
    and the same case for this radit
  • 00:23:18
    analytics platform we kind need to
  • 00:23:19
    understand what is cost of every single
  • 00:23:21
    large Lear mod call to together those
  • 00:23:23
    categories and how many post do we
  • 00:23:25
    normally have under one separ Addus
  • 00:23:27
    that's why I normally were set top
  • 00:23:28
    integration to large lar model
  • 00:23:30
    observability platform like hadon so if
  • 00:23:33
    you haven't heard about hadon before
  • 00:23:34
    haacon is open- Source platform for
  • 00:23:36
    logging monitoring and debugging lar L
  • 00:23:39
    model applications where they give us
  • 00:23:41
    ability to see exactly how people are
  • 00:23:44
    interacting with our large Lang mode
  • 00:23:46
    application track the cost arrows and
  • 00:23:48
    latencies so that we can optimize for
  • 00:23:50
    the performance and I can also do a
  • 00:23:52
    bunch of very Advanced interesting
  • 00:23:54
    things like automatic caching the
  • 00:23:56
    response if the promp is same to to save
  • 00:23:58
    the cost and improve speed send customer
  • 00:24:00
    properties so that I can segment
  • 00:24:02
    different type of requests and many more
  • 00:24:04
    and the best part is it is extremely
  • 00:24:06
    easy to set up so if you are calling an
  • 00:24:08
    open AI model like me all we need to do
  • 00:24:10
    just adding this base URL and additional
  • 00:24:13
    headers from our open AI clients and
  • 00:24:15
    that's pretty much it I can just copy
  • 00:24:16
    this over and go back to cursor open the
  • 00:24:19
    rit. TS which is where we make open Ai
  • 00:24:21
    call and paste this in and add this
  • 00:24:23
    environment variable headon that is
  • 00:24:25
    pretty much it so now if I go to the RIT
  • 00:24:27
    platform and open a subreddit after I
  • 00:24:30
    get this response and it will
  • 00:24:31
    automatically track that we made 200 lar
  • 00:24:34
    mod request for that specific subreddit
  • 00:24:36
    and that probably means we processed
  • 00:24:38
    around 200 posts and those requests are
  • 00:24:40
    from the same user basing in Australia
  • 00:24:43
    which is me and total cost around 1 cent
  • 00:24:45
    so that now I know the cost to onboard a
  • 00:24:47
    fairly popular new sub Rus is around 1
  • 00:24:50
    cent using the GPD 40 model and I can go
  • 00:24:53
    to request to see the detail of every
  • 00:24:55
    single requests as well as the actual
  • 00:24:58
    prompt that we send to open ey and
  • 00:25:00
    immediately I can spot the problems in
  • 00:25:02
    my prompt for example the structure now
  • 00:25:04
    is actually not very clear what are the
  • 00:25:06
    actual post content because some of
  • 00:25:08
    content looks like part of prompt and
  • 00:25:10
    this might confuse lary model so I can
  • 00:25:13
    immediately improve the performance by
  • 00:25:14
    updating prompt here and save but on the
  • 00:25:16
    other side you also have a URI that
  • 00:25:18
    allow me to experiment with different
  • 00:25:20
    prompt directly and also switch between
  • 00:25:22
    different models and for each data while
  • 00:25:23
    I'm reviewing that I can add this to a
  • 00:25:25
    data set called bad sessions and this
  • 00:25:27
    allow me to create data set that I can
  • 00:25:29
    use to either evaluate the new model or
  • 00:25:32
    ply or F tune the model so I highly
  • 00:25:34
    recommend that you set up your L mode
  • 00:25:36
    application with those logging and
  • 00:25:37
    morning platform and headon is one of
  • 00:25:39
    the best one I have put the link in the
  • 00:25:41
    description below for you to try out
  • 00:25:43
    headon for free after we connect this to
  • 00:25:45
    Helicon the next thing is we want to set
  • 00:25:46
    up the back end so we have the core
  • 00:25:48
    functionality kind of implemented for
  • 00:25:50
    this RIT analytics platform but Annoying
  • 00:25:53
    part now is that every time when someone
  • 00:25:55
    click on this subr page it will refresh
  • 00:25:57
    all the posts and then going through the
  • 00:26:00
    open AI to analyze and categorize posts
  • 00:26:02
    which is not optimal and going to cost a
  • 00:26:05
    lot of money so what IDE I want to do is
  • 00:26:07
    that when someone open the page and fet
  • 00:26:09
    the data for the first time I want to
  • 00:26:10
    save this data on a database so that
  • 00:26:13
    next time when someone else open this
  • 00:26:15
    page we can check what is the last time
  • 00:26:17
    we fin the data from Reddit if it is
  • 00:26:19
    within 24 hours let's not update again
  • 00:26:22
    so to do that we actually need cursor to
  • 00:26:24
    implement a kind of new functionality to
  • 00:26:26
    save the data somewhere I want to
  • 00:26:27
    showcase this because this is a great
  • 00:26:29
    example to Showcase how can you add new
  • 00:26:31
    features to exist pures they already set
  • 00:26:33
    up so to do that instead of just open
  • 00:26:36
    cursor and ask it to implement the whole
  • 00:26:38
    project I will actually open the side
  • 00:26:40
    panel and add codebase so this is really
  • 00:26:43
    powerful feature where cursor actually
  • 00:26:45
    allow us to reference the whole code
  • 00:26:47
    base and I can specify certain files to
  • 00:26:49
    include and exclude for example I
  • 00:26:51
    probably don't want the node modules
  • 00:26:53
    folder so I put node modules folder by
  • 00:26:56
    the way I don't know if putting the
  • 00:26:57
    folder name going to work but I just
  • 00:26:59
    going to put it here uh if you know the
  • 00:27:00
    answer please comment below let me know
  • 00:27:02
    and I'm going to put detail instruction
  • 00:27:04
    so I have this project build based upon
  • 00:27:07
    the original instruction but currently
  • 00:27:09
    we need to fetch R data and call open
  • 00:27:11
    API every time when someone open the
  • 00:27:13
    subr page which is not optimal I want a
  • 00:27:16
    backend engineer to connect it to super
  • 00:27:18
    base and save RIT post data and AI
  • 00:27:20
    analysis data to superbase and only
  • 00:27:22
    fetch data if the last update time is
  • 00:27:25
    older than 24 hours ago help me generate
  • 00:27:27
    detail stock that can help back and
  • 00:27:29
    developer understand this project
  • 00:27:31
    structure what cool parts to build for
  • 00:27:33
    super base integration that compatible
  • 00:27:35
    with this current project structure no
  • 00:27:37
    need to include actual code example just
  • 00:27:39
    the design do by the way if you don't
  • 00:27:41
    know what superbase is super base is
  • 00:27:43
    open source project that offered
  • 00:27:45
    complete backhand for both mobile and
  • 00:27:47
    web application it was introduced back
  • 00:27:49
    2020 and got popularity very very
  • 00:27:52
    quickly because before super base you
  • 00:27:54
    basic have two options for building
  • 00:27:55
    backand one is Firebase another is a WS
  • 00:27:58
    amplify they both kind of works but
  • 00:28:00
    problem is it kind of lock you into
  • 00:28:02
    specific vendors which is not optimal
  • 00:28:05
    that's why super Bas grow so fast
  • 00:28:07
    because it allow you to build backhand
  • 00:28:08
    and host anywhere you want and they
  • 00:28:10
    provide full backhand service for
  • 00:28:12
    database authentication storage and even
  • 00:28:15
    Vector storage now and offer front and
  • 00:28:17
    SDK to connect to the backand very
  • 00:28:19
    easily and if you haven't buil any kind
  • 00:28:21
    of backand feature before it might feel
  • 00:28:24
    stunning but it's actually easier than
  • 00:28:25
    you saw what you really need is kind of
  • 00:28:28
    Define what kind of data we actually
  • 00:28:29
    need to store about your application for
  • 00:28:32
    example in our case you probably always
  • 00:28:33
    want to have a table for profile so that
  • 00:28:35
    we can track the users you can even add
  • 00:28:38
    things like tier to tracking the pricing
  • 00:28:40
    tier how many credits they left and
  • 00:28:42
    strip customer ID and subscription ID if
  • 00:28:44
    you are building the payments into the
  • 00:28:45
    platform as well as sub ratus so we want
  • 00:28:48
    to track the list of different Subarus
  • 00:28:50
    and the last updated time and list of
  • 00:28:52
    posts for each post we want to track
  • 00:28:53
    title content scores and list of
  • 00:28:56
    categories so you can basically think
  • 00:28:58
    them as spread sheets what kind of
  • 00:28:59
    sheets you need and what kind of columns
  • 00:29:01
    you need for each sheet but if you don't
  • 00:29:03
    know what specific columns that will be
  • 00:29:05
    needed don't worry you can ask AI to
  • 00:29:07
    help you figure out so go back to cursor
  • 00:29:09
    so first thing I will do is I will open
  • 00:29:11
    Terminal and get file structure uh so I
  • 00:29:13
    will use the same command but this time
  • 00:29:15
    I will use three layers deep so this
  • 00:29:18
    will give me uh the latest file
  • 00:29:20
    structure and I'm going to copy this
  • 00:29:22
    over and I'm just going to the
  • 00:29:24
    instruction. MD and update the file
  • 00:29:27
    structure here and then I'm going to
  • 00:29:29
    copy this over to the instruction on the
  • 00:29:31
    right side and give instruction I have a
  • 00:29:33
    project built based on the instruction.
  • 00:29:35
    MD but currently we need to fast red
  • 00:29:38
    data and call open API every time which
  • 00:29:41
    is not optimal I want a backend engineer
  • 00:29:43
    to connect to super base save each
  • 00:29:45
    separated data to super base and only
  • 00:29:47
    fetch data if the last update time is
  • 00:29:50
    older than 24 hours ago help me generate
  • 00:29:52
    detailed documentations they help
  • 00:29:54
    backand developer understand project
  • 00:29:56
    structure what a cool parts beautiful
  • 00:29:58
    superbase integration that compatible
  • 00:30:00
    with current project structure and what
  • 00:30:03
    database should we create and what
  • 00:30:05
    optimal schema should look like let's
  • 00:30:07
    sync step by step and I actually want to
  • 00:30:09
    use 01 preview model here directly and
  • 00:30:12
    click enter okay now it return back a
  • 00:30:15
    very detailed documentations where it
  • 00:30:17
    talk about how the data currently FL it
  • 00:30:20
    also show me the actual database schema
  • 00:30:22
    design and data fashion logic as well as
  • 00:30:25
    detail steps so this is really good next
  • 00:30:27
    thing is actually want to convert this
  • 00:30:29
    into a markdown file then I can get
  • 00:30:31
    cursor to refer to so I'm going to copy
  • 00:30:33
    paste the hos thing and go to cursor
  • 00:30:35
    help me convert this into proper
  • 00:30:39
    markdown format okay great so I can copy
  • 00:30:42
    this over uh go to instructions folder
  • 00:30:45
    and create a new one called superbase
  • 00:30:48
    setup. MD paste this is in and we do
  • 00:30:51
    need to update one part which is the
  • 00:30:53
    file structure I will need to copy the
  • 00:30:55
    latest file structure into here and Save
  • 00:30:58
    and before we get into cursor we need to
  • 00:31:00
    do a few steps firstly we need to
  • 00:31:01
    install uh super based client Library
  • 00:31:04
    our open Terminal and paste in and then
  • 00:31:07
    next we can start using cursor composer
  • 00:31:09
    so I'm going to open cursor composer and
  • 00:31:11
    then say we need to implement super base
  • 00:31:16
    integration for this current Project
  • 00:31:19
    based on instruction here super base
  • 00:31:23
    First St to initialize clients so enter
  • 00:31:26
    so you can accept all and next it will
  • 00:31:27
    we need to add the credential into env.
  • 00:31:30
    loal and to do that we need to set up
  • 00:31:33
    the superbase project first so I'm going
  • 00:31:35
    to go to super base and create new
  • 00:31:37
    project I'm going to give a name edit
  • 00:31:39
    analytics and give
  • 00:31:43
    password okay great and after the
  • 00:31:45
    project created I will go to Project
  • 00:31:48
    settings and API then here we will get
  • 00:31:51
    the credential we need one is URL
  • 00:31:53
    another is service row credentials and
  • 00:31:55
    after that we will need to create the
  • 00:31:57
    two database table as well so there are
  • 00:31:59
    two ways you can do that either you can
  • 00:32:01
    go to table editor and create a new
  • 00:32:03
    table uh by just typing the name of
  • 00:32:05
    table and adding the colum based on
  • 00:32:07
    instruction or we can actually go to
  • 00:32:09
    cloud and then give instruction give me
  • 00:32:12
    the SQL command to create all tables in
  • 00:32:16
    super base directly then it will give me
  • 00:32:19
    this SQL code I can copy and go to the
  • 00:32:22
    SQL editor paste it in and then run okay
  • 00:32:25
    and after it's running you can go to
  • 00:32:27
    table all those tabl should be created
  • 00:32:29
    already according to the instruction so
  • 00:32:31
    I'm going to uh give the instruction
  • 00:32:33
    grid I've set up superbase project table
  • 00:32:35
    and add environment variables now let's
  • 00:32:37
    do next step to initialize superbase
  • 00:32:39
    client and modify the data fashion logic
  • 00:32:42
    and I'm going to copy paste the specific
  • 00:32:44
    part into here as well and click enter
  • 00:32:47
    so I'm going to click accept all and
  • 00:32:49
    then do let's do step six update PR now
  • 00:32:54
    and accept all uh and the next step now
  • 00:32:57
    let's test data flow okay I can see I
  • 00:33:00
    got a few arrows so past those arrow in
  • 00:33:03
    got this Arrow after loading sub page
  • 00:33:08
    and accept all okay and thanks for the
  • 00:33:10
    log before I can see that we
  • 00:33:12
    successfully fashed data from Reddit but
  • 00:33:14
    got Arrow actually upserting data so it
  • 00:33:16
    says couldn't find advice request okay
  • 00:33:19
    so I guess probably reference wrong
  • 00:33:21
    scheme even though it is including in
  • 00:33:23
    the doc so this time I'm going to be
  • 00:33:25
    more specific copy paste actual specific
  • 00:33:27
    scheme in and then copy paste this arrow
  • 00:33:29
    in I got this Arrow seems fail to push
  • 00:33:34
    data to super base please refer to the
  • 00:33:39
    actual sub red to actual tables and
  • 00:33:42
    schemas we set in super base let think
  • 00:33:46
    step by step yeah save this and if I
  • 00:33:49
    refresh again I got another arrow so so
  • 00:33:51
    I'm going copy paste in I go this Arrow
  • 00:33:55
    after updating TS okay and our accept
  • 00:33:59
    and we got another arrow here related to
  • 00:34:02
    super base so I'm going to copy paste in
  • 00:34:05
    and enter so it says that duplicate key
  • 00:34:07
    Arrow as well as category is not defined
  • 00:34:10
    so it is fixing those ones okay cool so
  • 00:34:12
    I can see the post has loaded and uh
  • 00:34:15
    there are also uh post created sub
  • 00:34:18
    loaded as well as uh post categories
  • 00:34:22
    however I do get it arrow and looks like
  • 00:34:24
    the issue is that for some reason it
  • 00:34:27
    kind of F the data twice so I will go
  • 00:34:30
    back to cursor and then copy paste this
  • 00:34:32
    in everything seems working now I can
  • 00:34:34
    see data stand to super base the only
  • 00:34:36
    issue is that it seems that somehow we
  • 00:34:38
    fetch dat twice after initial fetch
  • 00:34:41
    succeed this letter Arrow I pasted what
  • 00:34:43
    could be the root cost okay great so now
  • 00:34:45
    I can see data is loaded poply on the
  • 00:34:48
    front end and if I quit this page and
  • 00:34:51
    coming again you can see dat load much
  • 00:34:54
    faster because reading data is from the
  • 00:34:56
    super base the only issue is that the
  • 00:34:58
    comment data didn't seem to be loaded
  • 00:35:00
    create ad data is not loaded the
  • 00:35:02
    category is also not loaded so I'm going
  • 00:35:05
    to go back to cursor so here I will give
  • 00:35:07
    instruction that there are some issues
  • 00:35:09
    for top right post command created
  • 00:35:11
    category data then seem to load down
  • 00:35:13
    front end and for Sims no data is loaded
  • 00:35:16
    too but I can see in super baseer data
  • 00:35:18
    exist what could be the ru cost okay so
  • 00:35:21
    it give me answer but for some reason it
  • 00:35:23
    didn't really update the file directly
  • 00:35:25
    so I'm just going to manually copy paste
  • 00:35:27
    in so you can just copy this function
  • 00:35:29
    name go to search uh and then you will
  • 00:35:31
    find a specific file so we need to
  • 00:35:34
    update this part I'm going to update
  • 00:35:37
    this part as well as the return value so
  • 00:35:40
    I save this and refresh okay so you can
  • 00:35:43
    see the comments data and the create
  • 00:35:45
    data has been displayed properly the
  • 00:35:47
    only thing is the category data still is
  • 00:35:50
    not pulling through and let me just
  • 00:35:52
    double check I do think the post
  • 00:35:54
    categories are create pop so I will so
  • 00:35:58
    give instruction great the created and
  • 00:36:01
    commands data are displayed now however
  • 00:36:04
    no category data is loaded what could be
  • 00:36:09
    the ru cost help me Sy through step by
  • 00:36:13
    step and what I also probably do I would
  • 00:36:15
    just copy paste the command we have
  • 00:36:19
    about the schema above is the table
  • 00:36:22
    details we use to create uh super based
  • 00:36:27
    table as reference so I say so I pasting
  • 00:36:31
    the actual SQL that we use to create
  • 00:36:33
    table to give it more context and then
  • 00:36:35
    tell it to uh no category data is loaded
  • 00:36:38
    what could be root cost help me Sy step
  • 00:36:40
    by step and above is a reference okay so
  • 00:36:43
    it ask me to add in uh the debuging for
  • 00:36:46
    so I just add it and then try to load
  • 00:36:49
    the data again so I can see that the
  • 00:36:51
    post category looks something like this
  • 00:36:54
    so I tell it post category looks like an
  • 00:36:59
    array of object our pting like this okay
  • 00:37:04
    great so everything is working now uh I
  • 00:37:07
    can see that it's added to super base
  • 00:37:10
    and I can go back and click again data
  • 00:37:13
    will be loaded instantly but if the
  • 00:37:15
    first time I open something it will load
  • 00:37:17
    the data and sync all the data to super
  • 00:37:20
    base so this actually how you can build
  • 00:37:22
    a new feature on top of project that
  • 00:37:25
    already exist and the last part I want
  • 00:37:27
    to show you is how can you make your UI
  • 00:37:29
    looks a lot better so I'm sure you
  • 00:37:31
    definitely heard about vzer which is
  • 00:37:33
    kind of generative UI platform
  • 00:37:34
    introduced by versal a lot of people are
  • 00:37:36
    talking about it but it might be not
  • 00:37:38
    super clear to you about when should you
  • 00:37:40
    use VZ for my experience you can
  • 00:37:42
    basically use cursor to build out the
  • 00:37:43
    functionality of your application and in
  • 00:37:46
    the end you can go back ask v0 to make
  • 00:37:48
    your UI looks a lot better and it's a
  • 00:37:50
    lot easier than you saw I will show you
  • 00:37:52
    how so I basically ask v0 to help me
  • 00:37:54
    update UI Page by page for example I
  • 00:37:57
    will go back to my app and choose page.
  • 00:37:59
    TSX which is kind of like homepage where
  • 00:38:02
    I display all the Rus and what I would
  • 00:38:04
    do is I will basically just go to vzer
  • 00:38:06
    and paste in the page. TSX and then I'll
  • 00:38:08
    give instruction I'm building a RIT
  • 00:38:10
    analytics platform above is homepage
  • 00:38:12
    displaying all the sub R is available
  • 00:38:14
    please keep the functionality exactly
  • 00:38:16
    like above but make UI a lot better
  • 00:38:18
    remember only changes UI do not change
  • 00:38:20
    functionality and variables so I will
  • 00:38:22
    click enter what it will do is that it
  • 00:38:24
    will St spit out the UI it might give
  • 00:38:26
    you some error but you can ignore that I
  • 00:38:28
    will just come here and copy paste this
  • 00:38:30
    code and go back save you can see the UI
  • 00:38:33
    looks a lot better and different so this
  • 00:38:36
    is basically how we going to update UI
  • 00:38:38
    we basically just need to change things
  • 00:38:40
    bit by bit so next thing is I want to
  • 00:38:41
    update the add subreddit button so now
  • 00:38:44
    I'm going to go back to components and
  • 00:38:46
    let's change as SE model button so I'm
  • 00:38:49
    going to copy things in above is seated
  • 00:38:53
    model and button and again I'm going to
  • 00:38:55
    uh copy the same uh kind of code same
  • 00:38:59
    prompt here please keep the function at
  • 00:39:01
    exactly same as above but make UI a lot
  • 00:39:03
    better and once it's finished I'm going
  • 00:39:05
    to copy this over paste in okay one
  • 00:39:07
    thing I did try again is add this part
  • 00:39:10
    making sure the same style as the
  • 00:39:12
    previous page you created so that things
  • 00:39:14
    will be consistent uh all right I will
  • 00:39:16
    copy this in save okay so now you can
  • 00:39:19
    see the button is also in the same style
  • 00:39:21
    as well if I click on that it will give
  • 00:39:23
    me the kind of dark mode model and next
  • 00:39:26
    thing I want to change those uh cards
  • 00:39:28
    that display in the subreddit as well so
  • 00:39:30
    I will go to subreddit card basically do
  • 00:39:32
    the same thing copy those over and I
  • 00:39:35
    just copy exactly same prompt okay so
  • 00:39:37
    the card has been created uh I can copy
  • 00:39:40
    this paste in uh great now the style you
  • 00:39:43
    can see is the same as everything else
  • 00:39:46
    on the platform next I will go to the
  • 00:39:48
    subreddit page and there I will firstly
  • 00:39:50
    go to the Subarus page and paste it in
  • 00:39:53
    and use the same prompt and give
  • 00:39:56
    instruction great above subred page
  • 00:39:58
    displaying detail of this subed
  • 00:40:00
    analytics uh and enter okay once this is
  • 00:40:02
    finished even though it shows Arrow here
  • 00:40:05
    but I'm going to ignore that and just
  • 00:40:06
    copy this paste in here cool so you can
  • 00:40:10
    see that the overall structure looks
  • 00:40:12
    more and more similar we only have a few
  • 00:40:15
    things left subred tabs um copy that in
  • 00:40:19
    and paste over okay still look a bit
  • 00:40:21
    wrong but I will just copy this code
  • 00:40:23
    over and uh go back to cursor save it uh
  • 00:40:27
    and go back here okay it actually does
  • 00:40:30
    look pretty good it kind of blend into
  • 00:40:32
    the dark mode same overall um the next
  • 00:40:35
    thing I want to do is that I want to
  • 00:40:37
    update table so I will uh go back to the
  • 00:40:41
    post table copy this and paste it over
  • 00:40:44
    nice so it looks a lot better now with
  • 00:40:46
    the right color scheme and the Addison
  • 00:40:49
    icon as well obviously you can promp it
  • 00:40:52
    further to get the right style you want
  • 00:40:54
    I'm just going to move on to the last
  • 00:40:55
    part which is same card so paces and
  • 00:40:58
    paste in awesome so you can see that now
  • 00:41:01
    the UI is a lot more flash out than
  • 00:41:02
    before and everything looks a lot more
  • 00:41:05
    cohesive and obviously if you don't like
  • 00:41:07
    a style you can prompt V Zer to change
  • 00:41:10
    style as well but I would suggest you do
  • 00:41:12
    at very beginning so this is how you can
  • 00:41:14
    set up a fully functional web app with
  • 00:41:17
    beautiful UI and backand setup the last
  • 00:41:20
    thing is that we actually want to bring
  • 00:41:21
    this app live so the rest of world can
  • 00:41:23
    see it and to do that we're going to use
  • 00:41:25
    Verso which is company behind next JS
  • 00:41:27
    and they made it deployment a lot easier
  • 00:41:30
    uh so you can basically go to Verso
  • 00:41:32
    create account and choose this purchase
  • 00:41:33
    GitHub repo and going through a
  • 00:41:35
    deployment process which normally
  • 00:41:37
    involves some kind of debug process as
  • 00:41:38
    well I'm not going to go into details
  • 00:41:41
    and if you want to learn details about
  • 00:41:42
    how do you actually deploy the web app
  • 00:41:45
    Val versal you can check out the other
  • 00:41:47
    video where I dive deep into every
  • 00:41:48
    single step that's needed to put your
  • 00:41:51
    app life I've put that link in the
  • 00:41:53
    description below so you can check out
  • 00:41:54
    so this is some of my best practice
  • 00:41:56
    workflow of how do I use cursor to build
  • 00:41:59
    fully functional application by creating
  • 00:42:01
    very detailed documentations I hope you
  • 00:42:03
    find this useful I highly recommend to
  • 00:42:05
    try out and even build some kind of more
  • 00:42:07
    advanced function that maybe chat with
  • 00:42:09
    this redit data and if you want to learn
  • 00:42:11
    detail things like how do you build user
  • 00:42:13
    authentication with cursor and how do
  • 00:42:15
    you connect to stripe so that you can
  • 00:42:17
    charge different pricing tier you can
  • 00:42:19
    join my community AI Builder Club where
  • 00:42:21
    I share a lot of tips and detailed
  • 00:42:23
    prompts and code example of how to build
  • 00:42:25
    AI applications and each one of them has
  • 00:42:27
    my best practice prompts that I
  • 00:42:29
    personally use for every single project
  • 00:42:31
    where you can just copy paste Plug and
  • 00:42:33
    Play plus you get to connect with other
  • 00:42:35
    AI Builders who might already experience
  • 00:42:37
    problem that you are facing right now so
  • 00:42:39
    you can click the link in the
  • 00:42:41
    description below to join my community
  • 00:42:42
    today I hope you enjoy this video I will
  • 00:42:44
    continue sharing interesting a Pur I'm
  • 00:42:46
    doing so please like And subscribe if
  • 00:42:49
    you want to keep update thank you and I
  • 00:42:50
    see you next time
الوسوم
  • Cursor
  • AI code editor
  • Gummy Search
  • Reddit analytics
  • Superbase
  • Hadon
  • Vercel
  • Next.js
  • community support
  • application development