Vibe Code a Full-stack App Effectively - complete tutorial & workflow

Hey people. So there's a lot of talk about vibe coding apps and there's, you know, a lot of hype and there's also some skepticism around it, whether you can really make complex apps or not. So

I kind of set out to see if that's possible. And I'm going to walk you

possible. And I'm going to walk you through how I built a fullfeatured full stack uh collaborative envelope

budgeting app with um a few tools with including cursor and using Gemini 2.0. 0

I'm sorry 2.5 Pro to do it and I want to do this to kind of give you a realistic uh view into what that looks like and if it's possible and I will say it is

possible um you need to have some coding knowledge of course and the more you have and the more you understand your project uh files the better um but yeah

uh this is going to be a long form video and there will be timestamps so you can jump around to the sections that are uh interesting to you or you can follow along completely. Um I'll have the repo

along completely. Um I'll have the repo up so that you can start at the same point that I'm starting at and use the same prompts that I'll be using more or

less. And yeah, so um let's just get

less. And yeah, so um let's just get right into it. Um like I said, the goal of this video is to be a realistic view of a complete walkthrough of vibe coding a fullfeatured fullstack web app. And I

found a pretty decent approach to vibe coding with cursor in Gemini 2.5 Pro, which I'd refer to more as this guide coding because we're creating really um

detailed plans, implementation plans, and we're going through them very carefully and building on top of simple uh vertically sliced full stack features

and building on top of them um over time in complexity. So we start simple and

in complexity. So we start simple and then we get more and more complex. Um,

we're going to do a collaborative envelope budgeting app because this is something that, um, a lot of people said that they would like to have. They don't

want to pay for. There's similar

solutions that are like 10 bucks a month. And you can build this yourself.

month. And you can build this yourself.

Um, you know, just run it locally or host it uh somewhere just for yourself and and your roommates or your partner and collaborate on your budget. So, it's

pretty cool um app to have kind of in your arsenal. And yeah, it's something

your arsenal. And yeah, it's something that's just complex enough that um wouldn't be easy to do um that I'm sorry, it's complex enough that like

when you're using these tools and using AI to actually make the app, it's impressive enough, but it's not too complex that it's going to take um get

really crazy and maybe um uh be harder to do than you might have expected. So

the basic approach that we're going to use is we're going to start with a strong basis. So we're going to start

strong basis. So we're going to start with a strong template and the template that I'm using here is um shad CN admin.

So these are UI components that are built and specifically for an admin dashboard. And this gives us a great

dashboard. And this gives us a great start for um building an budgeting app, right? So we have lots of numbers,

right? So we have lots of numbers, calculations, the monthly budget, the different envelopes, things like that.

So this is what the template looks like when you when you get it. And it's

simply UI. So front end stuff. There's

no backend. There's no functionality here. You can't do anything. This is

here. You can't do anything. This is

just dummy data. Um but it looks really nice. So great, we've got all these UI

nice. So great, we've got all these UI components that we can use. And I've put these into a Wasp project. And WASP is a full stack framework with batteries

included. And just by defining some

included. And just by defining some things in an um in a main config file like for example authentication, you get full stack authentication managed for you by Wasp uh without having to write a

ton of code. And this makes it really easy as well for the LLM to code these features for you and to create these features for you. So, I've got this Shad

CN admin template um in a Wasp project and this has really helped jumpstart and guide the coding process. So, yeah, um I spent a few days

process. So, yeah, um I spent a few days getting this process down before trying this now on stream and um it was working

surprisingly well. So um yeah, starting

surprisingly well. So um yeah, starting with the template um I've also created all the rules for AI files which previously if you've been using cursor

it was all packed into one cursor rules file um but now they've switched to this um these MDC files and um so I've got both here in the project. Uh you can choose which one you want to use.

They're going to deprecate the cursor rules file. So the um separate rules

rules file. So the um separate rules within MDC files is actually um the way you should go. Uh so yeah, like I've got these um uh files all set out that have

all the rules and they're pretty extensive. So this also a big help um

extensive. So this also a big help um having that down. Um so that's already done for us. And from here we're going to create and revise a product requirement doc which is like a really

nice description of how the app should uh be behave and and function. And then

from that we're going to generate the plan and we're going to use the vertical slice pattern like I said before which is we've got a full stack app. So we

have features that go across the entire stack from the client to the database layer and we're going to develop one of these full stack features at a time.

Start with simp um low on the complexity and scale up. And we're going to constantly ask LLM to test our assumptions. We're going to ask it to

assumptions. We're going to ask it to you know think about different solutions before choosing the best one and implementing it. And that's basically

implementing it. And that's basically it. So, um yeah, let's go ahead and uh

it. So, um yeah, let's go ahead and uh get started. Um I have some prompts that

get started. Um I have some prompts that I prepared here. So, I'm just going to copy copy this um initial prompt real quick. And

quick. And um I will read it off to you so that um you don't have to read it all. But let's

go first to set up a new chat. And like

I said, I'm using Gemini 2.5 Pro. I

found that this has been really great um for uh yeah vibe coding. Um Gemini seems to really get what what's going on and what needs to be done and doesn't um

always just agree with you, which I like.

So yeah, before we do that though, let's just jump through the project um real quick and I'll show you what we've already got. So we've got all these components, the shad CN admin

components in the components library along with some config and context for the app. Then we got these features

the app. Then we got these features here. So they correspond obviously to

here. So they correspond obviously to the features in the app which are dashboard tasks, apps and stuff like that. So when I see things like the

that. So when I see things like the tasks already, I already think like, okay, this will be great for transactions for putting in transactions

um that uh correspond to um uh yeah, expenses or income, right? That will be good for this budgeting app. So yeah,

you see we have a really good starting point here. That's about it. Um besides

point here. That's about it. Um besides

that, we have the main.wisp file, which is the central config file. I said um that yeah is where you it's a a a central point where you can describe

your app with um things like o your client and server config uh your roots and your backend um uh operations which

are like uh fetches and mutations. So by

defining them here and then importing the function that um uh it refers to you don't have to uh manage and configure

the entire server. Wasp will do that for you. Um the roots and the authorization

you. Um the roots and the authorization things like that authentication it will take care of all this stuff for you and even give you some um pre-built components and other things like that.

So it's really great for um speeding up the process and removing a lot of boiler plate. So, that's pretty much the

plate. So, that's pretty much the project in a nutshell. Um, so yeah, let's get coding. Um, I'm going to paste

the first prompt in. And um, I wish it showed it here. Is there a way we can get it to show? Maybe I can right click it.

H, so it doesn't show it. So, I'll read it from the note.

Um, so the goal of uh, sorry, here it is. I want to create a collaborative

is. I want to create a collaborative envelope budgeting app with the current template project I'm in which uses Wasp and Shad CNN UI components. It's an

admin dashboard. So, it'll know about WASP already because I have a whole cursor rule about what WASP is, the Wasp docs, how it works, stuff like that.

Also, project conventions, how I want things to basically be done, as well as troubleshooting, like if you run into these errors, this is what you should probably do. So it's going to have a

probably do. So it's going to have a good understanding of of how Wasp works and what the common issues might be be around it. So go back to the

around it. So go back to the prompt.

Um leveraging Wasp full stack features such such as off let's build this app based on the following specifications. Users have one budget

specifications. Users have one budget profile they use. Users can invite others to collaborate on the budget with them via their email. Transactions can

be individually entered manually or bulk implemented via CSV files from their bank. Bulk import shouldn't assume a

bank. Bulk import shouldn't assume a certain CSV file format but rather map the headers of the file to a set of predefined values within the app like

date, description, value type. And um

this is just like if you get a file a CSV from one bank, it might be way different than another. So we basically want certain information. We want the date, description, the value, and

whether it's an expense or an income, right? Um, and so we're going to map

right? Um, and so we're going to map whatever values from that CSV when we import it, we're going to map those to those values that we set in the app. Uh,

new features should be styled and created using the demo features in the source features uh, directory as examples. And we want to use this

examples. And we want to use this modified vertical slice implementation approach that's suitable for LLM assisted coding. I do this a lot. I

assisted coding. I do this a lot. I

often ask it like hey is this great for LLM assisted coding I don't know if it helpful or not but it seems to work for me with this in mind I want you to first evaluate the project template think

about few possible PRD approaches before landing on the best one so provide reasoning why this would be the best approach remember we're using Wasp the full stack framework with batteries

included that can do some of the heavy lift lifting for us and we don't need to create an enterprise level app it will be for personal use we want to use the vertical slice implementation approach.

So we can start with the basic implementations of features first and add on complexity from there. And one

thing I forgot to mention before we start, we want to actually start the app. And because this is a full stack

app. And because this is a full stack app with a postgrad database running locally, we um have to install Wasp, which you can you can get the install

script um from wasp.sh.

wasp.sh.

And I'll show it real quick.

we go to getting started. You'll see

there's a install script there. You're

going to paste that into your terminal and run it. You'll get Wasp uh um installed. And then you'll want to have

installed. And then you'll want to have Docker I have Docker Desktop installed and running. And then with that, I can

and running. And then with that, I can run Wasp DB start. And this starts a Postgress database that's connected to our app right away. And we leave that running. And we open a new terminal

running. And we open a new terminal window. And we're going to run wasp

window. And we're going to run wasp db migrate dev just to initialize the database. But I've already done that. So

database. But I've already done that. So

I'm going to run wasp start. Whoops.

Wasp tart. Wasp start. Um it says use nvm uh node version 20. So nvm use 20.

If you run into that, make sure you have nvm installed and you can switch between um node versions. So let's we're using node version 20 now. and I can run wasp

start. Okay, now it's building the

start. Okay, now it's building the SDK, compiling the app, and then from there, h it does look like I need to

um uh to migrate the database. So, I was wrong. So, let's do wasp db migrate dev.

wrong. So, let's do wasp db migrate dev.

Okay. And we've got the app running. And let's tell it here's I've

running. And let's tell it here's I've copy and pasted the prompt. It put it up there. So I'll just say please implement

there. So I'll just say please implement the PRD as [Music] described. And we're

described. And we're off. And you'll see it does a lot of

off. And you'll see it does a lot of thinking in the background. and it's

going to give um a lot of stuff that I can't read fast enough. But I'm just going to go ahead and accept a lot of the um changes that it makes. And we'll

just deal with problems as they arise.

Hopefully stuff's work works. We'll

check it out as we go. Uh you can see it's creating um a plan that will or a PRD that talks about

um let's see. Ah, so it has a proposed

see. Ah, so it has a proposed implementation plan, but it didn't write it to to the the disk. Um, and what I

want to do here first is create a AI folder. And I'm just going to put the

folder. And I'm just going to put the plan MD and empty PRDMD in there. And

I'm going to say now it's given me this uh these phases. Um, it's a proposed

phases. Um, it's a proposed implementation plan. Phase one, phase

implementation plan. Phase one, phase two, phase three. And it asks, shall we proceed with phase one? Sure. Let's

proceed with phase one. Write the PRD to the PRD. MD file.

one. Write the PRD to the PRD. MD file.

And I got that just by writing at and then searching PRD.MD. And let's see what it does for us. I'm going to switch to agent mode so that it uh makes changes for us. That's probably

why it didn't do it before. It might

have been in ask mode still. Cool. So now we see it applying

still. Cool. So now we see it applying changes. Cool. And they're over

changes. Cool. And they're over here. So core features implementation

here. So core features implementation guidelines. Let's see what it's doing

guidelines. Let's see what it's doing now. Okay. So on quick overview, it's

now. Okay. So on quick overview, it's not really that big. Um it gives us basically what we said before, but it breaks down its core features into um a

few different parts and a few implementation guidelines. I like

implementation guidelines. I like that. But now I'll say okay, now you've

that. But now I'll say okay, now you've created Oh, I think I actually have a prompt for this. So let's go back and I have a plan prompt. So I'm

going to give that. And it says, "From this PRD, create an actionable step-by-step plan that we can use as a guide for LLM assisted uh coding. Before

you create the plan, think about a few different plan styles that would be suitable for this project before selecting the best one. Give your

reasoning for why you think this uh we should use this plan style." So, let's paste that

style." So, let's paste that in. And let's see what it does.

in. And let's see what it does.

I forgot to mention that it should write it in um plan.md. Let's maybe it figures that out by itself. Planning style for this project

itself. Planning style for this project vertical slice imitation or a milestone based combined with user

stories. All right. So it's wants to

stories. All right. So it's wants to create user stories that we can go from. It's creating four phases. The plan provides a structured

phases. The plan provides a structured row map. Say write this plan to plan

map. Say write this plan to plan MD. And we want that so that we can, you

MD. And we want that so that we can, you know, implement one thing at a time. Um,

we can just go subtask by subtask and break everything up into chunks for the LLM. Okay.

LLM. Okay.

Great. So, we've got it all there. The

phase three, phase 4, CSV import is phase four.

Um, let's see what we got there. Budget

category, budget profile, entity. Um, I'm just going to ask it a

entity. Um, I'm just going to ask it a question real accept that and ask it a question real quick. Say in the

plan, do we have instructions for implementing envelopes? Remember, this is an envelope

envelopes? Remember, this is an envelope budgeting app. And if it doesn't, we'll ask it to

app. And if it doesn't, we'll ask it to update it accordingly because I'm not going to read all that revive coding.

says, "Yeah, the implementation does include for envelopes concept below primarily refers to them as budget categories." And then I'm going to say,

categories." And then I'm going to say, "Can you refactor the plan to include um specific

mention of envelopes for our envelope budgeting app?

also refactor it to use these little things which are to do check boxes.

Right.

So, oh, I forgot to put it. I'm going to stop. I'm going to I forgot to put it in

stop. I'm going to I forgot to put it in agent mode. Let's just go to agent mode

agent mode. Let's just go to agent mode so that it can um make changes on its own. All right, great. Now you see there

own. All right, great. Now you see there it's refactoring everything to use checkboxes so we can check those off as we go which is great. It's a lot cleaner

that way. Um let's see. Did I mention

that way. Um let's see. Did I mention envelopes and envelopes? Yeah. Budget

envelope I created.

Um okay. It's still putting envelopes in in parenthesis. So I'm going to say

in parenthesis. So I'm going to say explicitly change the

category model to be named envelope and update the entire plan

accordingly.

Oops.

Agent. Yes. I want to fully commit to the envelope terminology. Okay. So, it says now uses

terminology. Okay. So, it says now uses envelopes. Let's see if that's correct.

envelopes. Let's see if that's correct.

If I go up here, yeah, budget profile entity. Budget envelope entity. Great.

entity. Budget envelope entity. Great.

So, we're going to have envelope models in the database. Um, we're going to apply that to plan MD.

We're going to accept changes. Accept all.

changes. Accept all.

Perfect. All right.

And from there, I think we can start implementing. Right. So, let's just look

implementing. Right. So, let's just look at it real quick. Phase

one, we've got the goal is to establish user authentication, create the basic budget structure, and allow users to manage budget envelopes. So, step one.

Oh, why didn't we get the nice um to-do boxes there? That's

there? That's annoying. I thought we had

annoying. I thought we had that. There you go. This is what vibe

that. There you go. This is what vibe coding is all about. Complaining to the LLM refactor

plan MD to use. Check boxes, please.

or you go to jail. Okay.

jail. Okay.

Accept. Accept it all. Accept it all and let's go. So number one, off setup.

let's go. So number one, off setup.

Configure and verify wasp built-in off username and password. Ensure users can sign up, log in, and log out. Define as

necessary fields, email, hash, password, etc. Implicitly via W wasp config or explicitly in if needed. Okay, we know I know that wasp doesn't need hash

password and all that stuff. So I've um done that in here. It says agent requested which means the agent is doing anything related to off it'll look up these rules. So let's see if it can do

these rules. So let's see if it can do that um correctly. So I'll say great let's

implement step 1.1 from the plan.

Let's reference um the three database operations

reference off rules for your process implementing whatever just leave it like that. I don't know what I mean I

think. Great. So it's looking at that.

think. Great. So it's looking at that.

It's referencing rules and it's figuring out that it's going to use a different method from uh Wasp. Instead of username and password,

Wasp. Instead of username and password, it will use the email method. Let's see

if we can get it right. It's pretty

tricky to be honest. Um I was impressed with what it

honest. Um I was impressed with what it did last time. Okay, so it's changing

time. Okay, so it's changing the method to email, adding an email sender. Um, it's implementing

sender. Um, it's implementing some different off pages.

Cool. Which it's probably defining here, right? So, it's implementing the

right? So, it's implementing the uh off pages and routes in the file. Um,

so I'm just going to accept.

And let's see. We got some errors down there for a second, but it might uh Okay, one error found. Um, let me just copy and paste

found. Um, let me just copy and paste these to the chat. Say, fix these errors, please, or

chat. Say, fix these errors, please, or you go to jail. Okay, so it's looking for O

jail. Okay, so it's looking for O wrapper. Um, might

wrapper. Um, might not I don't think there is any O wrapper.

So, it's going to fix email verification. It says assuming an

verification. It says assuming an offrapper exists. Okay. So, I can see that it

exists. Okay. So, I can see that it actually had a better um better implementation from the beginning.

Um so, I'm actually just going to stop this. And this is because I I know that

this. And this is because I I know that Wasp gives us um O stuff out of the box.

Um and so yeah, this email verification form like it was right. It was getting that. Um and I think the issue here is

that. Um and I think the issue here is that I have this authentication thing set on agent requested. I'm just going to set it to always. I think that'll be a better approach.

Um as well as the advanced troubleshooting so that they're always passed in the context. So, let's just reject all and let's go back up to where we started where it

says where was it? Uh,

here. Fix these errors, please. And

let's just try it again. See if it gets it this time. And this is an instance where

time. And this is an instance where um I know that off gives uh Wasp gives

these uh off UI forms um right away. So,

it looks like, let's see what it exports from off UI. Um, verify email form. So, it's just

UI. Um, verify email form. So, it's just getting the the name wrong. There it

goes. It got it right. And it's trying to rely on this O wrapper, which doesn't exist. So, I don't know why it's hung up

exist. So, I don't know why it's hung up on that. And we're just going to accept

on that. And we're just going to accept it and um not use the O wrapper.

Um, in fact, there's this one has a decent wrapper. So, why don't we just

decent wrapper. So, why don't we just use that one? I think that would make more sense.

Um, ah, it's getting it now. There it

goes. So, I think just setting that. So,

that's a good thing to look out for.

Um, these rules when you use MDC files, you can see agent requested. So, like if the agent's looking for it, um, you can set it to always or you can set it to

manual. And uh last time I used the

manual. And uh last time I used the cursor rules file. This time um I'm using the MDC files. So I'm just going to leave most of them on always. So

they're always being passed into the chat context. And let's accept. Let's go

chat context. And let's accept. Let's go

see if we have any more errors in our uh terminal here. I'm hoping this will work. Looks

here. I'm hoping this will work. Looks

like it looks good. Yep, we got the right things being exported. We got

login and sign up coming from Wasp off.

Um, so yeah, that looks like a good start. It says recompilation

start. It says recompilation successful. Let's try it. If we go to

successful. Let's try it. If we go to Right now, nothing's being logged in.

Nothing's being uh authorized. So, if we go to login, cool. We go to sign up. Let's sign up. Where is it? Sign up.

up. Let's sign up. Where is it? Sign up.

Oop Sign up. Okay, let's let's try and sign up an account. So, we need an email. So, we're just using it's just um

email. So, we're just using it's just um uh development. So, we can use fake

uh development. So, we can use fake email sign up. Okay, we get a network error. Where's the network error

error. Where's the network error happening? Let me try again. Create a

happening? Let me try again. Create a

new account.

email.com fake password. Okay, I don't see anything

password. Okay, I don't see anything here. So, let's see what we see in the

here. So, let's see what we see in the console. And we can

console. And we can um What's this? Get out of here. One

password. React router. Create new

account.

Vinnie.com password one two three. Uh

connection refused. Why is connection refused? Is it not working? Is the thing

refused? Is it not working? Is the thing ah oh we have some is not let me try and run the I

think the database wasn't running let's see if we do it now ready to accept and if we do start okay so I did I canceled

the um the postcost database running locally and I restarted it um and let's see now if we can get things to

work at email.com password 1 2 3. Yay. So, we're

using a dummy email sender um instead of a real provider. So, like send grid or something like that or an SMTP host. So,

it's going to log the verification uh email to the um uh the console. So, I'm going to click

it. Email verified. You can now log in.

it. Email verified. You can now log in.

Let's see if that's true.

Um localhost login.

Vinnie.com. Cool. And it worked. And we

can um check that that worked by looking at the console for one. Or we can go to our main.wasp file. And I don't need the

our main.wasp file. And I don't need the um uh what do you call it? the

uh LLM to put in one line, but all we have to do is put in one line to make this route, this page um uh uh authorized. So you have to be

authorized. So you have to be authenticated to log in. So off required is true. We can do the same for any

is true. We can do the same for any other page. Let's just do it for that.

other page. Let's just do it for that.

So we are logged in. Cool. So I will ask it, can you please um mark that step as

complete? That's something I could

complete? That's something I could probably also do myself, but vibe code. We're vibe

code. We're vibe coding. Yeah, that that's kind of

coding. Yeah, that that's kind of stupid. Let's stop

stupid. Let's stop that. Okay, so great. We got off set up

that. Okay, so great. We got off set up pretty easily. Ready to move on to step one

easily. Ready to move on to step one two? Yes. Let's move on to step 1.2

two? Yes. Let's move on to step 1.2 which is budget profile uh entities or database models. Um was refers to them

database models. Um was refers to them as entities because they can be used these database models can be used throughout the entire app. So let's see

now. Thinking thinking thinking we're

now. Thinking thinking thinking we're going to create a budget entity in the schema.prisma. Prisma file link to the

schema.prisma. Prisma file link to the user. Establish logic perhaps in a user

user. Establish logic perhaps in a user creation hook or first logic action login action to ensure each user is associated with a budget.

Cool. Okay. So it's selfcorrected and it's applying changes to the budget. I'm

sorry to the schema.prisma file. adding

budgets and it's adding relations to be defined in later steps. I like that.

That's really cool. That's great. It knows what it's

cool. That's great. It knows what it's going to do in advance because we created the PRD and this plan. So,

that's really nice. Okay, now we need to run Wasp DB migrate dev. I hope it works in here. I don't know why I can't. Let

in here. I don't know why I can't. Let

me do pop out ter to terminal. Let me do nvm or let me do it here.

Um, I don't know why I have keep having to switch to that, but let's do Wasp DB migrate dev after switching to node 20. Okay. And it says, let me know when

20. Okay. And it says, let me know when you've updated Node.js and successfully run the migration. So, smartbot knows to

and we're going to call this budget entity and then wasp start and I say

okay I migrated that database buddy.

Um okie dokie. So, now it's doing

dokie. So, now it's doing stuff. There's our

stuff. There's our app. It looks like we crashed. Let's

app. It looks like we crashed. Let's

restart while we start. This buddy just keeps on coding.

start. This buddy just keeps on coding.

Um, cool. It's adding an off hook on user signup.

Um, did you mean on after signup hook?

So, let's try that on. So, we got an error here. It says uh has no exported

error here. It says uh has no exported member called um on user signup hook server hooks.

Uh okay. So let's just again let's pass it to the chat and say uh let's say accept all. Pass that bad boy to the

accept all. Pass that bad boy to the chat. Say

chat. Say fix. So it looks like it's referencing

fix. So it looks like it's referencing the wrong um type definition. It should match this one. So it should be

one. So it should be um on after signup or something like that.

I mean the error pretty much gives you the answer there right on after sign up. Um I think it's expecting different

up. Um I think it's expecting different arguments expected two but it got one. So it's consulting the wasp

one. So it's consulting the wasp documentation on on after signup hook which is pretty cool. I'm going to click auto search for next time, but it's going to look at the docs and try and

figure out what's going on here. So,

that's really sweet. Um, pretty amazing to be honest because that would be the point where I would have to go do that myself. So, it said got it. The search

myself. So, it said got it. The search

results confirm the signature of on after signup. And wow, look at

after signup. And wow, look at that. Fixed it for us. Pretty nice.

that. Fixed it for us. Pretty nice.

I'm going to say accept. Let's go back and run wasp start to start the app. Oh,

what do we have? We have an issue here in the file. Uh where did hooks

file. Uh where did hooks go? Hooks uh type error again. Let's

go? Hooks uh type error again. Let's

just pass the to the chat and say fix. Looks like

we have an issue with the field hooks.

Um, it'll probably do some searching probably on after sign up, but as it's suggesting, but let's see what it

does. Yeah, on after sign

does. Yeah, on after sign up. So, cool. There's a good instance of

up. So, cool. There's a good instance of where it's going to assume some of the things some of the definitions on its

own um without consulting the um uh the docs and then it runs into an error and then it consults the docs and it realizes okay you don't have to define

it via the um a hook object. So with

that, we should be able to run again.

And the reason it's doing that, I saw when it was creating, is that it's going to create a sign on after signup hook that will look if a budget profile has been created or not yet for the user. So

if it's the first time they're logging in, there won't be. And it'll probably um redirect them to

um to that uh budget profile um uh page to create one.

Um, so cool. Uh, let's see. Okay, where

were we at in the plan? What should be done next?

Um, okay, we finished the implementation. Um, the next step. So,

implementation. Um, the next step. So,

they finished the implementation for that. So, let's just go to our plan and

that. So, let's just go to our plan and we will check that off. And it says next is um budget envelope entity. Are we

ready to create the budget envelope entity in the schema prisma file? Um

yeah, let's do it. Cool. So after we create these

it. Cool. So after we create these database models, you'll see it's going to want to create the operations which are the backend functions um our server side functions for things like creating

an envelope, getting envelopes, stuff like that.

Um I wonder if there's any if it's user creator first login. Um if it'll just create a budget

login. Um if it'll just create a budget on we'll see probably create one budget.

So there will be a budget. The way I imagined it is like you have one budget that's like called, you know, my household budget or whatever. And then

um you have envelopes within that, right? So your food envelope, your fun

right? So your food envelope, your fun envelope, your blah blah blah, whatever you um allocate money to. Let's see if I can run the command in there. And that's

really annoying, but um there's probably a way to fix it, but I'm just going to roll with it here and run wasp db migrate dev from in here. Um, and it

even tells me what name to name the database migration add envelope model. I

will do that. Thank

you. Okay. And then I'll say okay migration is done though. And wasp start again. If anybody

though. And wasp start again. If anybody

knows how to fix that so that the cursor uh embedded terminal also uses node version 20, that would be great. Leave

it in the comments. Okay, cool. So,

migration is done.

Um, so it's saying, yeah, they confirm the data migration. Okay, so this is where we move on to the fun stuff.

That's just a couple database migrations. No big deal. So now we've

migrations. No big deal. So now we've got the budget envelope database model, but now it wants to implement this task with many other subtasks, which are the

create operations. So in the back end

create operations. So in the back end the backend functions like things like hitting the server to create an envelope, right? It's defining an async

envelope, right? It's defining an async function blah blah blah update. So it's

already started doing that and you'll see there's an operations folder. So

let's go to it's created a budget folder operations. So here are our backend

operations. So here are our backend functions and we're getting those um our server side functions without having to actually configure the entire server.

Wasp is doing that for us. We just have to define those operations in the main.

was file and then it's create um creating the the function here that um being defined. So we've got things like

being defined. So we've got things like create envelope, get envelopes, etc. And um yeah, an action and a query, right?

Create envelope and get all your envelopes. So it's done that. Um great.

envelopes. So it's done that. Um great.

The create envelope and get envelopes queries are now defined. This completes

step 1.4. Um I don't know if it completes all of it. Does it? Um let's

accept all and let's go to the plan and see plan. Um right we have create envelope

plan. Um right we have create envelope um get envelopes but we didn't do update

and delete. So I'm going to say it seems

and delete. So I'm going to say it seems like we still need to imple implement the

remaining remaining operations from 1.4. Please do so. Got to be nice to

1.4. Please do so. Got to be nice to your LLM. You know, you don't want the

your LLM. You know, you don't want the AIS to get mad at you and get payback when the singularity comes. Or so I've been told.

comes. Or so I've been told.

The funny thing is on stream or on video like a lot of times when it's doing um LM's generating stuff. Um I'll go and do something else. Go and do some other

something else. Go and do some other work, come back, see where it's at, test things out, keep going. That's pretty

amazing part is that we can offload a lot of stuff. I think it'll be only a matter of time before um the agents get good enough that you don't have to hold

their hand so long.

Um so let's see. Okay, so it says it's done those things. I'm going to accept all and just go take a look at the operations

folder. We are getting

folder. We are getting errors as any type because maybe it hasn't been defined yet or we have errors in our thing. What's going on? Um

uh something unexpected field off. Oh,

okay. So, I know what the issue is. It

says off on the budget page. It should

be off required, right? We could pass that in. Um here's the error. Uh where is

in. Um here's the error. Uh where is it? This is

it? This is off. Off

off. Off required. Where the hell is it?

required. Where the hell is it?

U budget page. Yeah, there's our our culprit. Surprised we're not getting a

culprit. Surprised we're not getting a um uh restart. I tried to restart the Wasp

uh restart. I tried to restart the Wasp language server. Well, we can pass that

language server. Well, we can pass that in there. I know what the issue is that

in there. I know what the issue is that we need to change it to required. O

required is true. But just for the sake of um demonstration purposes, let's add it to the chat and say fix. and it's going to find the culprit.

fix. and it's going to find the culprit.

And um it's kind of helpful to to know your your project and and know your apps cuz sometimes you can fix stuff faster than

the LLMs can. Humans aren't so dumb after

can. Humans aren't so dumb after all. Okay, so now we should be able to

all. Okay, so now we should be able to restart. And it's restarted on its own.

restart. And it's restarted on its own.

Nice.

Okay, where were we? I believe we were implementing the

we? I believe we were implementing the other Yep. Get envelopes, update

other Yep. Get envelopes, update envelope, and delete envelope actions on the server. So

the server. So great, these are you can see they are um validating if a user is logged in or not on the server, which is great. And I

think we can move to step 1.5 which is the budget UI. This is a basic budget

UI. Um I think we've resolved

UI. Um I think we've resolved those. Oh, there's a in budget page.

those. Oh, there's a in budget page.

What do we got? Okay, the components and budget page. Uhhuh. Did it already

budget page. Uhhuh. Did it already start?

Oh, it already started implementing those. Okay. So, did it do that

those. Okay. So, did it do that already? We have No, we don't have we

already? We have No, we don't have we have inlin errors here. Import shad cm components. Let's

here. Import shad cm components. Let's

say you know what? I think this is also, you know, I don't like that new feature.

I actually kind of preferred that having the cursor rules file all in uh one file and everything. So, let's just try that.

and everything. So, let's just try that.

I'm going to always pass all these rules into context every time because I see a front-end styling error. So, people

Yeah, select your your rule types in the MDC to be always. At least for this project, it seems to be the better option. So, I'm just going to go here

option. So, I'm just going to go here and I'm going to do the same thing and I'm going to say fix and chat.

Um, it looks like we've already do done handle create envelope. Do we have handle update

envelope. Do we have handle update envelope? Probably not. We just see

envelope? Probably not. We just see update. No. So, those are the next ones

update. No. So, those are the next ones we can handle in the plan. So, we're going to move on to 1.5

plan. So, we're going to move on to 1.5 next. 1.4 is done.

next. 1.4 is done.

And then we'll be able to see some interesting stuff in our actual app. For

now, a lot of it's just been database models and backend functions. Um yeah,

so it figured out that not to reference with aliases, but um relative paths.

Um that's just how I like to do it in the project file. Um I know Shad CN likes doing it with the aliases, but I'm a weirdo.

Okay, let's accept. And I'm going to say let's move on on to plan step 1.5.

Okay, so it's giving me two options. We

can implement the edit u delete UI now or we can move to phase two. So it

says we've actually already completed the main steps of 1.5, but um I like the idea of adding the

um edit and delete. So let let's do let's go with option one. So we have the edit and delete functionality of the envelopes.

And I want the um edit and delete op the edit button to open a modal. Um I think that'll just be nicer. So, I'm just going to say make

nicer. So, I'm just going to say make sure to open a modal dialogue

when click when the user clicks on edit and delete.

reference um how modals are built in the app under

the I can refer it to the components um directory directory. Okay,

directory. Okay, so let's tell it to do that and let's see what we get. go check out the budget

page. And the cool thing about Wasp is

page. And the cool thing about Wasp is the budget page. Um, you have to be authenticated to go there. And it's at available at budget. So, if our app

isn't throwing errors, then we can see it at /budget. And we'll also tell it to add it to the sidebar there. Okay. So,

there's add a new envelope. Not sure how much I like that. But the whole point of this vertical slice thing is do start simple and and you know get the basic um implementation down first and then

improve upon it o over time. So we'll

just stick with that. Um let's go check out what it's doing. Oh wow. Okay. Um it has a plan

doing. Oh wow. Okay. Um it has a plan for doing all that. Uh because I asked it to look at the confirm dialogue stuff which is which are the modals and it's just going ahead and and going to town.

Look at that.

Cool. Is it using the right stuff? How

does it look? Car title dialogue looks great. So let's

great. So let's accept. All right, it's recompiling.

accept. All right, it's recompiling.

There it says phase one is now fully complete. Besides the little bit of uh

complete. Besides the little bit of uh the few hiccups that we had on in the beginning there, it went pretty smooth.

So, we're going to go to add budget.

Let's just refresh. Let's say yeah, I think groceries is a good idea. So,

groceries. Say add

envelope. Oh, and we get an issue.

What's going on here? No budget found. Okay, so no

here? No budget found. Okay, so no budget has been created. So, that should be interesting. So, we need a budget

be interesting. So, we need a budget first. I know that your budget has to be

first. I know that your budget has to be um your envelopes have to be connected to a budget perhaps. Or maybe that's a bad implementation. Let's ask let's ask

bad implementation. Let's ask let's ask AI. Let's ask Gemini. Let's say okay,

AI. Let's ask Gemini. Let's say okay, I'm getting an error on the server that I've pasted into this chat.

Um, I initially asked you to create a budget

from which there are envelopes or within

which for each user so that other users can collaborate on that one budget.

together. Now I'm getting this no budget found error. Why is

error. Why is that? And is this a good way to

that? And is this a good way to implement this functionality? Okay, that was a lot,

functionality? Okay, that was a lot, but thanks to everyone who sticking with me here. I know this is quite long. We're

here. I know this is quite long. We're

almost at an hour. It looks like about an hour.

Okay. Uh when we create the envelope, the action runs. It's looking for find budget to find a budget first. The

existing user was logged in before we implemented the on after signup hook. Okay, that

makes sense. So, it is trying to create a budget, but we just didn't do it. So

um it's saying test the current flow by signing up a new user. Consider the

alternative approach which is don't automatically create a budget on sign up and add functionality for user to explicitly create a new budget.

Um I don't know. Let's just try let's just try doing the uh new user. And where are we? Over here.

user. And where are we? Over here.

Um, how can we log out? There's no log out thing. And we

out? There's no log out thing. And we

don't have it set up in the thing first.

So, let's have it create. Um, or we can Yeah, we want some log out functionality somewhere. So let's go back to agent

somewhere. So let's go back to agent mode and say okay I want to create a new

user but I realized there is no logout functionality implemented yet. Can you

put one in the nav user dropdown or yeah something like that.

So, you notice I kind of just like I talk to it like I'm like a dummy.

Um, but the LMS are nice and patient and they're smart enough to know what I want. Um, so it's going to use the

want. Um, so it's going to use the logout function from Wasp client off and it's going to put it in the profile

dropdown. Drop down menu item log out.

dropdown. Drop down menu item log out.

So, I don't know which one's the profile dropdown, but it did those edits. So, let's say accept. And let's go over

accept. And let's go over here and go back to home. Is that

profile? That's log out. Yeah. Yeah.

Cool. We logged out. Let's go to sign up. Man, that one's getting me. It's

up. Man, that one's getting me. It's

sign-up. And let's create dude@mail.com.

And let's look in our dummy email provider for the verification link. And

we get it. Awesome. And we want to go to localhost 3000/lo. And what was it?

3000/lo. And what was it?

Doemail.com. Awesome. Okay. And let's

see if we can create is it budget that the thing was a new envelope called groceries.

Yay. Edit allocated amount. Let's say we want $500 a month for groceries. Okay,

cool. Um I would like to see if it's like spent and stuff like that. So let's

just ask the LLM. Right, we've allocated 500 bucks, but uh I'm going to wait maybe during the transaction implementation phase, then we will update the um the budget um the

envelopes. So, so I'm going to I'm going

envelopes. So, so I'm going to I'm going to tell it that. I'm going to say, I just noticed that the envelope doesn't show

uh spent and remaining amounts, but I realize we haven't

implemented transactions yet. Can you

make sure that the plan will address thing this and other things like this when we

get to that point? And I'm going to reference the

point? And I'm going to reference the plan here at plan.md. And let's see what our nice

plan.md. And let's see what our nice friend says.

You've made a great observation. You're

absolutely right. The current budget page only shows the allocated amount from the envelope. So,

um it says phase 2 manual. uh uh uh uh to explicitly address this issue, I provise we add a new step. Okay, great.

Uh just to make uh the point, this is one of my things that I say like create and revise your PRD and plan like constantly test assumptions, constantly ask this is what you should be doing. Um

otherwise, you're going to run into issues later on. So, if you think something might not be uh right or is a little bit off or missing, you ask the LLM, get it to update your your your

plan or whatever code at the moment. You

don't have to follow the plan strictly.

You know, you can say, okay, like the logout functionality, for example, like let's add it right now. Um, you know, it's vibe coding. You should be vibing.

Uh, so yes, add that to the plan.

Um, I mean to be honest, this is pretty much how a uh implementation workflow would kind of look like if you were doing it on your own.

Um, you might realize it and you would just do it manually. Um, but now we're just getting, you know, AI to take care of a lot of the grunt work for us. So,

uh, let's see. It says

plan. Did it make the changes? Yeah.

Cool. So, we've got um that there. Um while we're at it, I'm going

there. Um while we're at it, I'm going to say with this recent addition to the plan in mind, can you go through our

plan and look for similar inconsistencies?

Think about our current implementation and

um yeah decide after ruminating about it buddy. We'll see what it gets. So I'm

buddy. We'll see what it gets. So I'm

just telling it look for similar stuff that we might not have thought about.

Um understand the goal review the recent change. Scan phase one. So this is cool.

change. Scan phase one. So this is cool.

This is something I did a lot in the previous um uh time. I something that seems to work pretty well because you know nobody's perfect. Not even the

LLM. It's

LLM. It's saying consistency check. The plan

appears consistent in addresses. One

minor action. We completed the work for 1.5. So we could update the boxes. Shall

1.5. So we could update the boxes. Shall

I update the boxes? I think we got that.

So, it's saying um yeah. Uh but we also allow editing if

yeah. Uh but we also allow editing if these are Yeah. So, the stretch goal allow editing and deleting envelopes. We

got that now, right? Can I delete it?

Oh, beautiful. Funny money. Let's see.

Add an envelope for funny money. Let's

make it. We want We don't want to spend too much funny money.

rent. Cool. I like

this. This makes me feel like, you know, responsible. Okay, with that, it looks

responsible. Okay, with that, it looks like we can proceed to phase two.

Awesome. All right, we're ready to move on to phase two. Uh just one thing I did real quick before was I asked um cursor or Gemini um how can I make node version

uh 20 the default for all my um terminal sessions and so it gave me the nvm alias default 20 command which I put in. So

now if I open a um new terminal window and I do node version I see node uh version 20. So that fixes the issue

version 20. So that fixes the issue where before we were trying to run a command it would give us the node version error. Um, so yeah, hopefully

version error. Um, so yeah, hopefully cursor agent can run commands in these little um embedded terminal windows that

it has now. So we've got to restart our database now. Well, didn't didn't use 20

database now. Well, didn't didn't use 20 here. Um, we've got to restart our

here. Um, we've got to restart our database and we've got to start our app.

And then we see on our plan phase two.1 is um well phase two is all about

two.1 is um well phase two is all about the manual transaction um entry and assignment to envelopes. So

we're going to start with the manual and then we can go to more um like bulk transaction imports and stuff like that.

So let's go ahead and say let's implement phase 2.1 which is just adding the transaction entity to our schema.prisma file. uh so that we can

schema.prisma file. uh so that we can start implementing create, read, update, delete operations or credit operations for transactions like create transaction, get all transactions,

update and delete transaction. So

cool, it's going doing its thing. Let's just go take a peek in

thing. Let's just go take a peek in schema.prisma, see what's going on.

schema.prisma, see what's going on.

Okay. So remember before it was commented out the transactions uh relation there. Um so now we're slowly

relation there. Um so now we're slowly working our way through. We've got a transaction enum. Um so we'll see that

transaction enum. Um so we'll see that here when we see the um transaction type is the transaction type enum. Awesome. Okay. Let's see if

type enum. Awesome. Okay. Let's see if it works now. Wasp db migrate dev. Awesome. or before we were getting

dev. Awesome. or before we were getting that node error. So if you run into that, just make sure to

um uh use nvm alias. Uh what do we want to name our

alias. Uh what do we want to name our transaction? This is yeah, we'll say add

transaction? This is yeah, we'll say add transaction model. Um yeah, just

transaction model. Um yeah, just remember to um use nvm alias 20. I believe it was

cool. So um database migration

cool. So um database migration successful. We've defined the

successful. We've defined the transaction entity. This completes step

transaction entity. This completes step 2.1. So let's go back to our plan. Looks

2.1. So let's go back to our plan. Looks

good. We're going to accept. I say let's do 2.2 now. And we should see in the source

now. And we should see in the source features transactions operations.ts file. So where are

operations.ts file. So where are transactions? Maybe it hasn't created

transactions? Maybe it hasn't created that yet. So it will probably create a

that yet. So it will probably create a new folder here under features hopefully. And um uh first it is

hopefully. And um uh first it is creating the defining the uh operations in the main.loss file.

Perfect. And then we should see that it creates a transactions folder. There we go with the operations.

folder. There we go with the operations.

So these are our backend server side functions for creating and it looks like create and get transactions. It's deferring the

get transactions. It's deferring the update and delete but I say let's go ahead and do it. Why not? Okay, let's

just say accept all and um I'll say let's implement the update

and delete functionality or um operations as well.

Okay, so we've got create transaction, we've got get transaction, and hopefully by this we should have update and delete. We can see it being uh added to

delete. We can see it being uh added to the main.loss file right

the main.loss file right there. Now they will add

there. Now they will add implementations. So we should be seeing

implementations. So we should be seeing that get added to our operations folder. Great.

Nice thing about um Wasp is that by uh defining these operations in the main.wasp file um it uh Wasp will create

main.wasp file um it uh Wasp will create the types for these um serverside functions. So we see create, get, delet

functions. So we see create, get, delet uh update and delete transaction and then we can define those um we can use those types there add the input and um

uh output types as well and then when we use those on the front end those um operations on the front end they are fully um uh end to end type safe. So

that's really nice and that also helps um guide the LLM. Okay, so it looks like it's done. Uh let's just say okay. So

it's done. Uh let's just say okay. So

now we've implemented all those and the next is the transaction form UI. So I'm

just going to say okay let's go ahead and do 2.3 but also make sure to implement the

edit and delete functionality on the UI via modals. Um

let's see how well it can uh deal with that request.

Okay. So, it says it's going to create a component in the transaction form.tsx um

file that it should create over here soon in transactions with a date picker um input and select type.

it will trigger create transaction on submit. So the only thing missing from

submit. So the only thing missing from the plan is the update and delete stuff.

Uh let's see if it gets that right. Okay. Created a transaction uh

right. Okay. Created a transaction uh modal.

Um, let's see if it can deal with these import errors. Uh, let's see. It doesn't seem

errors. Uh, let's see. It doesn't seem to be recognizing the import errors.

I'll wait a second and I'll just say, um, well, we've got some here. Let's

just accept all and let's, uh, fix in chat.

So it's assuming shad CN utils path. Um

I changed those I because I put them in my own um uh I set up the template a bit differently. Um but the nice thing is is

differently. Um but the nice thing is is once I just pass the error to chat say fix in chat um it's able to do that. So

that's great. So it's looking in lib utils but um I changed it to CN because that was all that was in there. So

hopefully it'll realize that or if not we can change it ourselves. Okay. So accept all and I

ourselves. Okay. So accept all and I think I name that CN. Yeah. So that's

looking good. And

good. And um let's see. Go to

the terminal and allow the app to recompile. And everything looks good. So

recompile. And everything looks good. So

let's see what happens here. We've got

that. It's probably at transactions or transaction. Let's try it out. Now let's

transaction. Let's try it out. Now let's

check the main.woss file. What route are we do we have now? Um where is transaction? Do we have a transaction

transaction? Do we have a transaction route? It looks like it did not create a

route? It looks like it did not create a transaction route. Search page budget page. Okay.

route. Search page budget page. Okay.

So, I'll just tell it I can't seem to access to find the URL for the transaction

route. How can I

route. How can I access it or do we still need to define that? Okay. So

that? Okay. So

um looks like it's added the transaction page here within the transaction regions. So let's go ahead and say

regions. So let's go ahead and say accept. And it created a route at

accept. And it created a route at transactions path.

So, we got an error. Um, internal error failed to

error. Um, internal error failed to resolve. Um, let's

resolve. Um, let's set pass that to the chat. So, transactions

chat. So, transactions page is probably how's it being exported? export

function transaction form. Hey, what's

that?

Yeah.

Okay. So, it's saying transactions list blah blah will go here. And I can just say um please import the

components. We got transaction form and

components. We got transaction form and transaction modal. Um

modal. Um transaction form

and into the transactions page.

Um I don't know if it needs transa the transaction modal but we'll just tell it if necessary. So please import the

necessary. So please import the components transaction form and transaction modal into the transactions

page. Okay. So, it's added them,

page. Okay. So, it's added them, but it doesn't um it says will be implemented next. So, let's go to the

implemented next. So, let's go to the plan and let's see. Maybe I'm getting ahead of myself. Uh transaction list UI.

Oh, okay. Yeah. So, I was assuming I got a little ahead of myself there.

Um let's tell it to implement 2.4 now.

So, I wanted it to do something that it had planned for 2.4 and I did not do that.

correctly. So, sorry, the LLM was following the plan correctly, but I was not. Let's see how it deals with

not. Let's see how it deals with that. So, that was pretty cool actually

that. So, that was pretty cool actually to see where I'm trying to force the LLM to go um past the plan. It knows we're

still on um uh what do you call it? On section 2, what was it? 2.3. And I was kind of

jumping the gun there.

Um, and it implemented part of the transaction page but left it blank because it was waiting for the the command to continue with 2.4. Um, so let's see what it's doing

2.4. Um, so let's see what it's doing there.

Um, it looks to me like it kind of re So, we had transaction form. Looks to me like it's kind of doing it again in the page. So, it's not using the transaction

page. So, it's not using the transaction form.

Um, okay. Let's just say accept. See

what we get.

Let me see if I'm correct in that it's not using the transaction form. Where is

the transaction form being used in the transaction modal? Oh, okay. Maybe it

transaction modal? Oh, okay. Maybe it

is.

Um, okay. Pretty sweet. So, we've got something nice here already. Let's do

add transaction. Awesome. Look at that.

Got date picker from the components we have in our um the Shadzian admin. Let's

give it a description. Let's say uh we went to we bought pizza was 28 say $28. So there's an

expense. Um I don't have an envelope for

expense. Um I don't have an envelope for that. So let's call it um we went we

that. So let's call it um we went we went to the bar and that's funny money.

Cool. And we've got nice expense badge.

It's in red. Awesome. We can edit it. Oh

no, it was $32. Amazing. Okay, so that seems to

$32. Amazing. Okay, so that seems to work well. Let's see if we can delete

work well. Let's see if we can delete one. Select an

one. Select an envelope. Okay, we want to delete that

envelope. Okay, we want to delete that one. Absolutely. Sure. Sure. Awesome.

one. Absolutely. Sure. Sure. Awesome.

So, all that stuff's working. Um, and I should have trusted the process there.

Um, because the LLM knew exactly what it was doing, was following the plan, and it did it really well. So, uh, let's move on to section 2.5. It says, "This

completes 2.4 for for providing the UI for listing, adding, editing, and deleting. Next step is 2.5 involves

deleting. Next step is 2.5 involves calculating and displaying envelope summaries on the budget page. So, okay,

let's do it. So, one thing I am noticing is that

it. So, one thing I am noticing is that we're not updating the sidebar in here and stuff yet, but that'll probably be something later. Let's check our plan.

something later. Let's check our plan.

So after this it's collaboration on budgets and envelopes um and then CSV import and mapping to envelopes. So let's just follow the plan

envelopes. So let's just follow the plan um and we can update all the the the sidebar and stuff later. All right. So cool. We're adding

later. All right. So cool. We're adding

the entity transaction entity to the main.wasp uh um get envelopes query. So

main.wasp uh um get envelopes query. So

what that means is that um WS takes care of automatic um caching and cach invalidation on the client and uh in

order for the the um get envelopes function to have access to those entities. You just have to let it know

entities. You just have to let it know that you want it to be able to act on those entities. And through that you get

those entities. And through that you get lots of cool stuff out of the box. Um so

that was in get envelopes. So, we're in the budget operations. Let's see where.

Yeah. So, it has updated um get all envelopes to include a summary. Says envelopes with summary.

a summary. Says envelopes with summary.

So, a calculated summary of what's going on. So, the envelope info, what's spent,

on. So, the envelope info, what's spent, and what's remaining. So, that's pretty cool. Let's accept all and let's go see

cool. Let's accept all and let's go see the budgets page now. Okay, we get an error. Maybe it's

now. Okay, we get an error. Maybe it's

not done. Okay, it hasn't done it's not done compiling. Recompiling. Now it's

done compiling. Recompiling. Now it's

finished. Still get an error. So, let's

look in the browser console. Um, response. So, no. Oh, no

console. Um, response. So, no. Oh, no

budgets. Maybe it's budget. That was my fault. Okay. So, um I don't see anything

fault. Okay. So, um I don't see anything on the UI yet. Let's go to the plan.

[Music] Um, oh, where'd my chat go? That was this one,

go? That was this one, right? Okay. Um, so it says, "I've added

right? Okay. Um, so it says, "I've added the transaction entities. Forget

envelopes and main bot. This should

resolve now that the query returns the calculated amount. The next step is to

calculated amount. The next step is to update the UI." Yes. So that's what we're missing. Yes.

we're missing. Yes.

Update. Cool. So we should see some stuff happening on the budget page.

So, it will display the spent and remaining amounts and a simple progress bar for visual uh bar visual for the spent amount relative to the allocated amount. I like that.

amount. I like that.

There's probably stuff we could save for the um the dashboard, but let's do it now. We can always move it

now. We can always move it later.

Okay.

Um so it's looking for a progress component. Do we have a loading

component. Do we have a loading component or something like that? Uh UI

instead of progress. Yeah, it probably doesn't have

progress. Yeah, it probably doesn't have a prog has a skeleton. Doesn't have a progress loader. So,

progress loader. So, um let's try resume. It said it had problem connecting. Stay with me.

connecting. Stay with me.

Okay. So, did it create a progress component or did it make its own progress component are properly commented out in budget page? Let's see that. Where's

budget page? Let's see that. Where's

progress? Let's look for it.

Um, okay. So, it says progress component is added. This completes step five 2.5

is added. This completes step five 2.5 minus the visual project bar which can be added later. Why don't we just do that now? So uh let's go ahead and

that now? So uh let's go ahead and implement the progress bar that component that is commented out in the

budget page right in at budget page.

Before we move on to plan uh phase three. Oh, so it's saying it assumes you

three. Oh, so it's saying it assumes you already added or will add the progress component to your SAS command. Um alo

there is one from shad CN UI. Yeah. So it's getting angry because

UI. Yeah. So it's getting angry because it's not there. Um I'm surprised it didn't

there. Um I'm surprised it didn't say let's accept. So it kept it commented out. Let's go ahead and and

commented out. Let's go ahead and and add it.

So, I know this is going to be a little bit tricky because of the um uh the way that I set up the template with the components and the path aliases

and stuff, but let's just go for it and we'll work out the errors and and we'll deal with it on the fly. So npx shotc latest ad progress please you chat uh okay so npn

shad cx latest add progress go for it invalid configuration

app. So, let me go back to Shad CN admin

app. So, let me go back to Shad CN admin and go to the Shad Shad CN admin GitHub. And let's look at their original

GitHub. And let's look at their original components, JSON. And it's got

JSON. And it's got aliases. Is it the aliases that's

aliases. Is it the aliases that's missing? because I removed

missing? because I removed that. Let's see. What do we got that's

that. Let's see. What do we got that's different? Yeah, I think

different? Yeah, I think so. Let's

so. Let's see. If I add that and I try it again,

see. If I add that and I try it again, what will it do? There it goes. Guess I shouldn't

do? There it goes. Guess I shouldn't have deleted that. I mean, we're not using the aliases. We're using relative paths, but um I believe we just got it

added in there. Where's the

progress?

Um, ah, funny. It added it up there. So,

let's try that again. I'm just going to mess around. I'm going to delete that

mess around. I'm going to delete that whole thing. And I'm going to

whole thing. And I'm going to say it gave us a suggestion that it's source,

right? So, I don't think UI is under I'm

right? So, I don't think UI is under I'm sorry. I don't think uh hooks hooks are

sorry. I don't think uh hooks hooks are there.

Lib I think I deleted utils and I put the stuff in lib. So

maybe just leave that there for now. Let

it let it do its thing. Let's add

progress. Where does it add it? Components UI. Yeah, there we go.

it? Components UI. Yeah, there we go.

Okay, that wasn't too hard. Sorry about

that. um is looking for of course for the wrong thing. I want it under CN. Okay. So, that's probably something

CN. Okay. So, that's probably something I wouldn't do next time. I wouldn't mess around with the the um uh with the aliases and stuff just to

make it easier to work with Shad CN. I

didn't think about that. I thought we had all the components we needed, but it's not a hard change, right? It's like

that was looking for the CN function in utils. I know it's in CN because I

utils. I know it's in CN because I changed it. You probably wouldn't have

changed it. You probably wouldn't have to have uh if you were doing your own project, you wouldn't have that issue.

Um but yeah, anyway, let's go then and say okay I imported the progress component. Now,

let's uncomment it out and use it. That should be in the budget page.

it. That should be in the budget page.

So, spent percentage did we? Uhhuh.

Okay. So, it's already got a calculate spent percentage um function right there. I wonder if

that it's not too expensive of a calculation. Could be memorized maybe. I

calculation. Could be memorized maybe. I

don't know too much that much about that. I mean, how often were we doing

that. I mean, how often were we doing that call? It's probably fine the way it

that call? It's probably fine the way it is. That's something we could ask um uh

is. That's something we could ask um uh Gemini about. Let's wait and see. Actually, I

about. Let's wait and see. Actually, I

will ask I'll ask about this um spent percentage calculation once we're done.

Okay. So, accept it. And I'm just going to go ahead and say um add to chat and say is this function worth

memoizing to say to increase performance in our app. I'm not sure this is that

app. I'm not sure this is that expensive of an operation on the client.

Think about the possible issues or um think about this scenario and

present a rationale of your decision. All right. Interesting. That

decision. All right. Interesting. That

looks like a very simple calculation. My

guess is it's going to probably say that's not worth memorizing, but who knows? Um, yeah, you're right to

knows? Um, yeah, you're right to consider performance, but in this specific case, spent percentage calculation using memo is likely not worth the added complexity. This

calculation is cheap. Memorization has

overhead. Focus on higher impact memorizations. And it's saying if this

memorizations. And it's saying if this page did have performance issue, i.e.

with thousands of envelopes. The

bottleneck neck would be DOM rendering, creating updating many card components. Um, list virtualization or

components. Um, list virtualization or memorizing the memorizing the card component itself would be far more impactful. That's really cool. Um, I

impactful. That's really cool. Um, I

didn't know that. So, it's generally best practice to avoid optimizing until you measure a real performance problem.

Cool. So, that's great to know. Um, so

let's see if that works. Uh, let's go to our um thing and amazing. We've got a cool little a little bar there. That's

awesome. So, let's go to transactions and um let's add we have one under funny

money. So, let's just add a bunch under

money. So, let's just add a bunch under funny money. Let's say we um we went to

funny money. Let's say we um we went to the theme park and we spent like $300 And then let's go back to

budgets. Oh, so we went past our budget

budgets. Oh, so we went past our budget because budget money was only was only 100 bucks. So let's make it

100 bucks. So let's make it 400. Oh, that's pretty cool. I like

400. Oh, that's pretty cool. I like

that. It looks clean. Nice. Um the only thing I'm noticing is that we're missing some of these like nice uh nav bars and stuff. And I mean that's like a

stuff. And I mean that's like a something we could probably optimize later, but I kind of want to go ahead and do that now. So,

um I'm going to tell it to do that and also to add um to the sidebar the budgets and

transactions page. Great. Something I

transactions page. Great. Something I

noticed that I'd like to implement before continuing is that the

uh budget is it budgets budget and is it transactions? Okay, the budget

transactions? Okay, the budget and transactions roots

aren't are missing two things.

One, the pages themselves do not have the header [Music]

slashnavbar navbar found on the tasks. Um, and what's it called?

tasks. Um, and what's it called?

Dashboard pages, for example.

and two um these roots are not accessible in the

sidebar. Can you make these changes

sidebar. Can you make these changes please?

Okay. So, hopefully it looks at these um pages here like tasks and it adds these nice sidebar um and stuff like that to our budgets and transactions and also adds them

here. Okay, it seems to have stalled.

here. Okay, it seems to have stalled.

So, I'll say okay, go ahead. So, it's found the app

ahead. So, it's found the app sidebar. So now it's going to add the

sidebar. So now it's going to add the links to the sidebar along with some nice um

icons.

Okay, so let's accept and go look. Okay, we've got budget and

look. Okay, we've got budget and transactions. Okay, it didn't do the add

transactions. Okay, it didn't do the add the navbar. It says these changes

the navbar. It says these changes should and ensure they appear within the application standard.

Okay, to see the sidebar update. Okay,

so it assumed that we would get the um the the header navbar. Um but we didn't.

So, I'm going to go back and say, um, that worked great for the

sidebar, but these routes still don't have the header/navbar that I'm seeing on the

tasks and users um, pages. Can you

um, pages. Can you investigate EG tasks um page and figure

out which components are being used for the

header/navbar and import them into the budget. And let's just add those the

budget. And let's just add those the budget page and uh what was it?

Transactions page, right? Cool. So, it's investigating the

right? Cool. So, it's investigating the test page like we asked. Um and it imports a header and a

asked. Um and it imports a header and a main component. It imports search,

main component. It imports search, theme, switch, profile, drop down. Um

all this stuff.

Awesome. So, that's budget page. So, we

should see the updates on um budget page soon. Let's go check it out. Nice. There we go.

out. Nice. There we go.

Perfect.

Transactions. Nice. So, we should see there it goes. Yeah. Cool.

I think there's still um some little headers there for uh tasks, some some uh inconsistencies in the in the UI there, but we can work that out later. I mean,

it looks pretty good for now. We have

this as a uh as an example. So, I like it. I really love this progress bar that

it. I really love this progress bar that I made. That's great. Um

I made. That's great. Um

cool. All right. Everything looks

good. Okay. Where were we? What's

next? I mean, I can check the plan, but we're vibe coding.

So, we calculated that. That looks

good. Um, and we modified get envelopes query, right? And we updated the budget

query, right? And we updated the budget page. Looks awesome.

page. Looks awesome.

So the first steps in phase 3.1 is to define the collaboration um model in schema Prisma.

Um all right uh let's see before we move to phase three when we start doing the collaboration and stuff um would it be cool to just create

the docs in um uh the AI folder um so that we have it and we can maybe reference it later. I don't know if it's necessary, but um can't hurt to do it.

So, before we move on to this, let's create the uh phase one and two um docs

for LLMs and human uh reference in

AI. Oops.

AI. Oops.

AI.

AI in a new docs directory.

Okay. So, first it's creating says yeah, this is a good idea good idea to document what we've built. And so just gives an

built. And so just gives an overview of the stuff that we created the budget model that we've got these actions how the

actions are defined simply and it's all one like all there in one document so it doesn't have to look through multiple pages which is

nice. So it has an good overview of

nice. So it has an good overview of what's going on like for example that the on after signup hook is creating the budget for them automatically when they

create a new user and this is necessary for the collaborative feature. So cool

we've got docs and it looks nice and we can pass those. They're real simple uh overviews of what we built so far. And

with that, let's move on to 3.1. Um yes,

move on to it asked me, do you want to start modifying step 3.1? So, let's go back to our plan. Cool. So, this is going our goal

plan. Cool. So, this is going our goal here is to enable users to invite others to view and or edit their budget. So,

this is great for collaborating with someone on a similar budget.

Um, and this is something that when I I pulled um people on on online and uh friends and co-workers what kind of app

they want and a budgeting app was um a common response. So let's run was dbm migrate dev to add the budget

collaborator um model changes.

Okay. So it's we're going to call it um how can I I was able to write in it before and

say pop out. Okay. So it's there. Um

what is it? I'll just say add budget collaborator model. Okay. Um,

model. Okay. Um,

cool. All right. The background next step will be to implement 3.2 two which is W wasp actions for inviting removing

um and other uh remove collaborator update collaborator things like that. So we got 3.1 done. Um it looks like we're going

3.1 done. Um it looks like we're going to do 3.2 in steps. So I'll say okay implement the invite [Music]

collaborator operation first.

This is where it could get tricky, could get hard because um you know this is also linked to uh how O works like if we have an invite token and stuff like

that. Um we need the signup page to

that. Um we need the signup page to accept the um invite token. Um and I'm not sure that has

token. Um and I'm not sure that has planned it here. So let's see. We're just going to

here. So let's see. We're just going to run with it.

Just going to check the schema.prisma to

see if m um ah we didn't accept the file or did we accept file?

Okay, invite collaborator action is defined. Let's look where would it do

defined. Let's look where would it do that in but collaboration. Nice. Cool.

Looks good.

can't invite yourself. Got to validate the budget

yourself. Got to validate the budget exists and the inviter is the owner.

Like it validate that the invite to user exists. Check if is already a

exists. Check if is already a collaborator.

Um so what it's doing is you have to be signed up first to get invited. Um

that's a more simple approach. I mean,

we could always make it so that you can invite someone by email and then um uh they can sign up and automatically be set up. Um but maybe we can do that

later. Right? The whole idea with this

later. Right? The whole idea with this vertical slice implementation is that we do things um simple things first across the entire stack and move to more

complex things. So uh invite invite

complex things. So uh invite invite collaborator action is defined. It

handles authentication, preventing self invites, validating the budget exists and the inviter owns it. Validating the

inviteee user exists. Uh, cool.

exists. Uh, cool.

Awesome. So, um, let's, uh, yes, let's do the remove collaborator action next. So, if you're the owner of the

next. So, if you're the owner of the budget and, um, yeah, you want to remove someone. Let's say

someone. Let's say your roommate used to be collaborating on the budget with you and they move out then you can remove

them. Okay, so it says it's good. Let's

them. Okay, so it says it's good. Let's

see. Good. Recompilation on file succeeded. Um what did we updated the

succeeded. Um what did we updated the operations file so that we can invite and remove collaborator. Awesome. Um, I

do not think we've got the UI going yet.

So, that will probably be um, yeah, add UI elements will be 3.4. So, we won't even look at that. We'll just keep accepting our way, vibing our way through stuff. So, let's next is update

through stuff. So, let's next is update collaborator ro. Go for it.

ro. Go for it.

So, I guess as the owner, what you'll be able to do is um the collaborator on your budget, you can give them maybe an owner role or something else or you can downgrade them to just a viewer or something like

that. Update the role of the budget

that. Update the role of the budget creator. What is the collaborator role?

creator. What is the collaborator role?

Enums collaborator role. It can be owner, editor or viewer.

role. It can be owner, editor or viewer.

Exactly. Cool. All right. Ready to

proceed for modifying operations for permissions checks? Yes.

permissions checks? Yes.

Proceed. Go back to our plan. So

modifying operations for permissions means we're updating all the relevant uh operations, queries, and actions. So

things like get envelopes create envelope create transaction will check context users permissions via budget collaborator for the target budget and

ensure that users can only affect budget envelopes they have access to. Pretty

cool. That has to go across quite a few um actions there. So

um or operations I should say cuz queries and actions and you can see it's adding budget to um budget collaborator to each of the entities on the main.wasp

file. Get

transactions.

Um, so it's doing the queries first and now it looks like it's going for the

actions. No, no, get envelopes and get

actions. No, no, get envelopes and get transactions. So, it's going for the

transactions. So, it's going for the queries first. Um, now it's starting

queries first. Um, now it's starting with the budget operations like create envelope, update envelope. We'll need a helper function to check the user's permission level for a given

budget. It's pretty amazing that it's

budget. It's pretty amazing that it's doing all this. I mean, none of this is extremely complex stuff, but um it's quite detailed and there's a lot of features going on here. And that it's

able to get all this is um and do it for me is like yeah, pretty amazing. If I were raw dogging this, I'd have a lot harder time

right now.

would take a lot longer, that's for sure. Okay, so the final step is to

sure. Okay, so the final step is to build the UI on the budget or dedicated settings page. Should we do it on the

settings page. Should we do it on the budget or a dedicated settings page? Let's ask it. But sounds good.

page? Let's ask it. But sounds good.

Before we move on, what do you think is the best approach here for

managing the budget and I'll just say what is for the best here the best approach

here for managing [Music] collaborators the budget it page or a

dedicated settings page. Think about

page. Think about your about the possible solutions

and provide rationale for the one you think is best.

It helps us kind of understand like why it's choosing that way. Um, I like asking it always to do that. Um, I could

probably pack that into a rules for AI um prompt like the global one. Oh

res resend that. Um, and then I wouldn't have to ask it every time, but you don't I don't need it every time. So, I'm not sure. Or maybe create a rule that I

sure. Or maybe create a rule that I could auto um that's probably a good idea.

Um let's try that while it's thinking.

So let's say oops here seven possible solutions

thinking and I'll say um think about a few possible scenarios or

scenarios or solutions to this problem.

Present the one you think is best suited to solve this

issue and provide rationale for why you think it's the best one. Did I name

that correctly? Should be MDC, right?

that correctly? Should be MDC, right?

And then I say manual and I can mention it every time so I don't have to keep typing it. Okay.

typing it. Okay.

So back to the question. It says I re recommend we proceed by adding the collaboration management UI elements to the budget page using modals and potentially collapsible se sections to

keep the layout clean. I like that idea.

Let's do it.

use the components we've got already in components UI components. All

components. All right.

So cool. So later I can say possible solutions thinking I can with the rule type being manual I can just say at let's see uh it's called seven possible.

So yeah, I can just add that rule and add it and then I don't always have to type the same thing there. But now we're back on the budget

there. But now we're back on the budget page and we're [Music] adding the collaboration UI. Ah, so we actually probably in

UI. Ah, so we actually probably in collaboration page um or users. So we're adding a find user by

users. So we're adding a find user by email. Hey, what is

email. Hey, what is this?

No off utils. That's not right.

Okay. So, here it said get email under Wasp off. That seems to be correct. But it's

off. That seems to be correct. But it's

asking extension.

So, it's saying um we don't store the email on the user right now. Although I believe we do, right?

now. Although I believe we do, right?

You can only go in with username. Where

is it? Um user. Hello user. Where are you?

it? Um user. Hello user. Where are you?

Ah, that's true. We don't because Wasp takes care of the off in the background.

So, let's see. Let's just let it go ahead. It's dealing with

ahead. It's dealing with errors.

Okay. So, it looks like that'll definitely be an error that it didn't solve. So, we'll just say fixing chat.

solve. So, we'll just say fixing chat.

The important note as noted in the code comments reliably getting the email for any arbitrary collaborate within a standard WASP operation is tricky because the standard user entityd doesn't store email. The current

implementation uses a dummy email for display purposes. A production ready

display purposes. A production ready solution might require storing email directly on the user model as discussed in the authentication

MDC's recommendations um and or creating a custom API route or displaying user ids or fetching um so

maybe we should just go ahead and store email directly on the user model which means we'll have to, you know, log in new users and stuff. So, it

seems to have stalled here as well. So,

I think I might stop it.

Um, and let's stop it. Let's restore it to here. What does it say?

here. What does it say?

Yeah, I don't know if it made any changes, but I'm going to say let's go ahead and store the email directly on

the user model as discussed in rule. We

can add that rule. I know that um rule four uh let's see

rule cursor rules. Hey, cursor rules number four.

Um, to do this will probably require that we reset the database, but I'm okay with

that. And this will probably fix the

that. And this will probably fix the issue that we're having there with um, finding the user email. So, what this is going to do hopefully is when the user

signs up, um because W was takes care of the O stuff for you in the background, it has like an O user, but um we can just store the email. There it goes.

We're going to create like a simple config function that will store the email on the user directly so that we can access it easier than having to um

constantly you know um uh go deeper into the Wasp off stuff to get the email.

H. It's still want It still is wanting to use the get email thing. So,

um I don't like this what it's doing.

So, I'm going to reject all and I'm going to stop that. I'm

going to restore it to here.

Um yeah, let's reject that. Editing 15

that. Editing 15 files. Um operations find user email.

files. Um operations find user email.

Reject still there. Find user by email. I'm pretty sure let's go check

email. I'm pretty sure let's go check out the Wasp docs ourselves.

that off. Forgetting the

off. Forgetting the user accessing user data. It's on

data. It's on identities. So user identities

identities. So user identities um off identity. So that's the off identity in the background uh that Wasp makes getting off data from the user

object. Let's just maybe give the whole

object. Let's just maybe give the whole thing to it here and say let's go ahead.

Um we've got the what is it called? Find

user. Find user by email.

operation, but let's just access the offidentity, right? Isn't that what it's

offidentity, right? Isn't that what it's called? O identity

called? O identity entity signed up with email. Okay, so

there it is.

Let's see the off identity properties as described

in in this example. Let's just copy that. Oops.

example. Let's just copy that. Oops.

copy this and then maybe it can figure it out. Let's see how it get

out. Let's see how it get goes. Okay, so I'm just pointing it like

goes. Okay, so I'm just pointing it like we see here.

Um we've got um yeah, it's trying to do crazy stuff because I know uh basically how it

should work. I can kind of stop it and

should work. I can kind of stop it and um tell it uh yeah here um let's look at the docs pass the URL pass the example that we're talking

about and let's see if we can figure it out. Um so it's going

out. Um so it's going to modify get um collaborators to return only the user

ID and then update budget page to reflect that. And then it's saying we can now

that. And then it's saying we can now proceed to implement the invite collaborator model modal using the find user by email query. But it doesn't look

like it updated the find user by email query. And so let's say okay first

query. And so let's say okay first update the find user by email query. All right. What's going on here?

query. All right. What's going on here?

Good point regarding um so it's saying to get the email associated with an arbitrary user we needed this find user by email query.

Um so can't find revised recommendation.

Let's simplify get budget collaborators for now. Instead of trying to fetch and

for now. Instead of trying to fetch and return emails, we'll modify it to return the ID and we'll update the budget to display the user ID for each collaborator instead of an email

address. This is secure and avoids the

address. This is secure and avoids the complexities of fetching sensitive off identity data for other users.

H but I I thought you can get the thing.

Um so when you find include user okay why can't we do that then I think this is what we need here.

So this looks like a good one. I'm going

to say um okay but I've seen in the wasp docs

that you can access the off identities information

by selecting it in a prisma query like this. Can we not use this method to get

this. Can we not use this method to get the email and display it email? Let's just say

it email? Let's just say that. And if we can then we'll tell it

that. And if we can then we'll tell it to update the other stuff.

clearly shows that was sets up the underlying Prisma relations in a way that allows you to traverse them using nested include or select statements. So

yes, we can use this method to fetch the uh here's how it could work. Modify get

budget collaborators and include the select provider name email uh result for each collaborator. The con

is the query is nested but um I don't care. Should we modify to use this? Yes.

care. Should we modify to use this? Yes.

And yes, we should also should

we update find user by email? Is this

being used anymore? If it could be used, should we

anymore? If it could be used, should we use it?

If so, please update accordingly. So, it's thought for 4

accordingly. So, it's thought for 4 seconds. Big thinker. Let's implement

seconds. Big thinker. Let's implement

fetching blah blah blah blah. Let's

update. Yes, the find. Okay, so it will update get budget collaborators and update find user by email. It's still

valuable. Now fits email find us needed for the invite process where you type an email address. Previous implementation

email address. Previous implementation had a llinter error. Okay, so it's updating the find

error. Okay, so it's updating the find user by email. Nice. So budget has been updated

email. Nice. So budget has been updated to display the collaborator's email address fetched via the nested include.

It falls back to showing the user ID if the email is somehow null. Let's

implement the invite collaborator modal using the find user by email query.

Awesome. All right. So, a little hiccup there. Takes reading through the docs a

there. Takes reading through the docs a little bit.

Um, but I think we'll get it. Okay. It says phase three is

it. Okay. It says phase three is complete. Let's accept all and let's see

complete. Let's accept all and let's see if it is if it works.

I don't think it is. We getting an error. React router cannot read

error. React router cannot read properties of undefined reading viewer at budget page. Send that

in. I get the following client uh client side error.

So that's probably an enum error, right?

It's the enums not being um yeah, so it was trying to import server side Prisma client on the front end.

So, we could probably put those types in a more central place and um make them compatible with uh um but that's something we can do later

to make it a little bit cleaner so we don't have types and enums all over the place. Um let's see. We have

place. Um let's see. We have

recompilation. Let's re refresh. Okay,

cool. So, now we have invite collaborators here. took a little while,

collaborators here. took a little while, but um we need to search. Ah, so it allows us to search for the user. So,

let's see. I think it was vinnie.com. User found. See, I don't

vinnie.com. User found. See, I don't like that it sends the uh user ID back. So, let's tell it not to do

back. So, let's tell it not to do that. But you can assign RO and all this

that. But you can assign RO and all this stuff. Viewer. Um, so we can say invite

stuff. Viewer. Um, so we can say invite user. Um, let me tell it to I don't want

user. Um, let me tell it to I don't want the find user by email and

um what's it called?

and invite collaborator um functionality to return and display the

users's user ID for security purposes. Can you remove

purposes. Can you remove that while you're at it?

Add a section to the plan that includes an extensive review of the code for

security vulnerabilities. And that's something I

vulnerabilities. And that's something I like to do is um you know constantly update the plan when I think run into something like that where I didn't consider it before. Um but it's

something that we should uh do later and um yeah have add to the plan. Cool.

plan. Cool.

So says still needs ID internally to confirm existence but we don't need to send that back to the user, right? Return only the email if user was

right? Return only the email if user was found. So I like that.

found. So I like that.

Now, it's going to update the budget page and adjust the found user type. It's either going to find the user

type. It's either going to find the user or not. And since we're only using the

not. And since we're only using the email method to log in, there's not an email in the in the uh database and they won't be there. Um, they don't exist,

right? Says having trouble applying

right? Says having trouble applying changes on the budget page. Why is that?

I don't see that. I think it's okay now. Okay, edit should now be correct.

now. Okay, edit should now be correct.

Now, let's add section to the plan for security review and refinement.

Nice. I've made the changes. Okay, let's

go ahead and accept. Let's see if this bad boy

accept. Let's see if this bad boy works. To test the invite collaboration

works. To test the invite collaboration stuff, I'm going to sign up a

user. Oh, found an error. Users error.

user. Oh, found an error. Users error.

Where is it? Oh, an extra thingy. Curly

brace. I'm going to sign up a user.

free. Um, this is interesting. I wonder

if the user already has a budget and you invite them to collaborate on yours, what happens? What

What does the plan say? It says we've completed all of

say? It says we've completed all of phase three. So, let's just try it out.

phase three. So, let's just try it out.

I am logged in with um I think it's dude at email. No, that one doesn't work. It's

email. No, that one doesn't work. It's

this one. Um let's try a new email. Let's go

one. Um let's try a new email. Let's go

sign up. And let's make let's just call it

up. And let's make let's just call it [Music] testermail.com. Password one two

testermail.com. Password one two three. Let's go to get the verification

three. Let's go to get the verification link. Okay.

link. Okay.

Um, let's go to login tester atmail.com. Okay, so we've got that

atmail.com. Okay, so we've got that user. They probably have no budget, no

user. They probably have no budget, no transaction history. And let's log out.

transaction history. And let's log out.

Let's log in with dude@gmail.com. Let's see. This dude has

dude@gmail.com. Let's see. This dude has budget and transaction information. I

want to remove that collaborator. I want

to invite testermail.com. Search user found. Let's

testermail.com. Search user found. Let's

make them an editor. Invite user. All

right. So, if we log out and log back in, I'll be impressed if that works. I

have a feeling that's not going to work. Let's go to budget. I have too

work. Let's go to budget. I have too many password popups. Oh it works.

And you can edit it. Aha.

it. Aha.

Updating envelope fails with let's see what happens here.

cannot read properties of undefined when check budget permissions at check budget

permissions when a invited collaborator

um tries to update the envelope of the shared budget. it, we

get this error. And let me try and add that

error. And let me try and add that rule possible solutions thinking which just to remind you says think about a few possible solutions to this problem.

Provide the one you think is best suited to solve this issue and provide a rationale why you think it's the best one. Mhm.

one. Mhm.

And I think there's fundamentally a problem with the collaboration logic. So

um let's see. So it says the budget collaborator

see. So it says the budget collaborator is undefined. So for an operation like

is undefined. So for an operation like update envelopes have access to the thing they must be explicitly listed in the entities definition.

Grant entity access most likely. Uhhuh.

Oh, so it could be much simpler than that.

Okay, let's see if that fixes it. Where

is this in? Um, budget

operations. Budget

operations should be update, right?

Update envelope.

Okay, maybe that was simpler than we thought. Let's try it

thought. Let's try it again. Wow. Okay, I'm quite impressed

again. Wow. Okay, I'm quite impressed that that works so simply.

Um, and that would have take me a lot longer to figure out on my own. Um,

cool. So, just to check, we can log out and we try with dude again who was the original um owner of the

budget. And yeah, there it is. It's

budget. And yeah, there it is. It's

updated correctly. So, tester. So, what

I want to try now is sign up. Let's just

try asdfmail.com.

asdfmail.com.

Close asdfmail.com.

asdfmail.com.

Okay. Okay, now it works.

Um, okay. Okay, so we got 200. Um, this

is the AFD user. Let me go back to dude@email.com and let's go to budget and we've got tester is there. What

about [Music] asdfmail.com user found? This one can be an editor as well. Invite

user. And then let's log out. Let's log

in with ASDF at email. Now, what does their budget look

email. Now, what does their budget look like? Ah, okay. Cool. So it can keeps

like? Ah, okay. Cool. So it can keeps their old um uh yeah their original envelopes and

adds a new ones. That's pretty cool.

That's very reassuring.

Um so yeah they can choose they can add on to their own or um you know add their own envelopes but they also can

collaborate on the um um collaborate on the shared ones or um they can edit their own

envelopes. Um and that would be

envelopes. Um and that would be something cool that we can share that maybe we show that these are shared envelopes right?

um we see the transactions um and that's something maybe we can add to the plan.

So um add to plan a an task to visually

um identify shared envelopes. I'll say shared

envelopes. I'll say shared collaborative envelopes on the UI so that users with shared budgets know

which envelopes are being shared by other users. Also

users. Also show info like whether No, that's that's probably

enough. Okay, cool. Where were we? That

enough. Okay, cool. Where were we? That

was a quite a little detour there. I

think we are done with 3.3. Yeah. So, it's just saying to do it

3.3. Yeah. So, it's just saying to do it now. Why don't we just do it now

now. Why don't we just do it now then?

Cool. Okay. I accept that and say let's implement those visual distinctions and let's add the cursor rule which

is think about different possible scenarios and pick the best one and give rationale for why you think it's the

best. So it's going to modify probably

best. So it's going to modify probably the UI needs to know for each envelope displayed whether the currently logged in user is the owner of the envelope that it belongs to. Analysis of the

current data. The problem the envelopes data

data. The problem the envelopes data fetched by get envelopes does not currently contain who owns the budget. We can't directly

budget. We can't directly compare because envelope budget is included possible modify client side. So

what does it say? It says option one modify get envelopes is the most robust way. So there it goes. It's going to

way. So there it goes. It's going to modify get envelopes to include the budget uh user ID. Then it will compare to see

who is the the user IDs to see who is the owner. That makes

the owner. That makes sense.

Cool. Let's accept all and go check it out. Cool. There you go. That's really

out. Cool. There you go. That's really

nice. So, now we see that it's a shared one. Um, because they aren't the owner.

one. Um, because they aren't the owner.

They're the owner of this one, ASF. So,

they see that one. And just to make sure that we don't have some crazy stuff going on, if I log in with uh dude, who is the owner of those initial two envelopes,

[Music] um then I shouldn't see anything and I shouldn't see the asdf one. Awesome. And

we see the tester there. Cool. And that

looks pretty good.

Um seems to work pretty well. Let me

just log out and let's try to create a new user to make sure nothing crazy is going on. And we'll call this um new

going on. And we'll call this um new user hello@gmail.com sign up. Verify the

up. Verify the link. Go to

link. Go to log.

Hello.com. Okay. Okay. No envelopes

created. Nothing. Awesome. Maybe we

should rename that to Hello.

Cool. Transactions. No transactions

yet. Hey, I was able to add a transaction before. Now I don't see the

transaction before. Now I don't see the add transaction button. So, let's go ahead and fix that before we move on.

Why don't I see add transaction

functionality in the transaction page, right? Um I've heard about before where

right? Um I've heard about before where people say that um it'll just kind of delete stuff and change stuff without you asking. And

you asking. And um that's one of the downsides of vibing. I mean the plus side is that we

vibing. I mean the plus side is that we have a pretty nice looking functional um app pretty quickly. I mean what is it

taking a couple hours?

So with a few more hours you can do quite a lot handle add transaction. What did it

do? Modal button

do? Modal button exists. I don't see it. Am I

exists. I don't see it. Am I

crazy? Where's the add transaction button? You full of

button? You full of crap. Let me go to the transactions

crap. Let me go to the transactions page. Add transaction plus circle

page. Add transaction plus circle transaction modal.

Okay. But where's the where's the Okay, there's an add transaction. There is an add

transaction button within the transaction modal but not on the main page slash form.

No wonder I swear we had that before. The modal which contains has its

before. The modal which contains has its own submit button at the bottom. There

should also be an adaction itself. This

is the button that's intended to open the modal.

So it says uh could you please double check the top right area of the transaction page next to the title? The

add transaction button with the icon should be visible there. Clicking that

button should open the modal.

What? This is the button rendered on the main page. I don't see

main page. I don't see it. Where

it. Where are Oh there it is. Why is it obscured?

Uh-huh. It is there, but it's obscured by the header navbar. Is there

navbar. Is there a padding or margin styling issue? We have something like that with

issue? We have something like that with the budget. Oh, yeah. We have the same

the budget. Oh, yeah. We have the same thing for the budget. It's blocked the the um Look at that. Yeah, my budget

envelopes. Haha, funny. I'll make sure

envelopes. Haha, funny. I'll make sure we fix that. The header fix component likely

that. The header fix component likely takes uses fixed or sticky.

Let's see. Budget. We're on transactions page, right? It's saying something about

page, right? It's saying something about a fixed property. Um, if I get rid of

property. Um, if I get rid of it, that's all it is. Okay. So, cool.

Well, it set me in the right direction.

Um, surprised uh was fixed. That's all

it takes to fix it. Cool. Then we get a little dingy

it. Cool. Then we get a little dingy dingy dingy. I like the way the

dingy dingy. I like the way the tasks the styling on the tasks looks nicer, but we can fix that later. Think

of got to cool. Okay. Anyway, now we have the add transaction. And we can add transaction expense. It was in hello.

transaction expense. It was in hello.

And we see it in our budget spent. Oh,

we didn't add any budget too. Cool. Okay, great. Um, where were

too. Cool. Okay, great. Um, where were [Music] we? Cool. So, we've got the visual

we? Cool. So, we've got the visual indicators for shared um envelopes within a budget. And next, the phase four is um CSV import and mapping to

envelopes. So, the goal is to allow

envelopes. So, the goal is to allow users to upload a transaction data via CSV file and map imported transactions to the correct

envelope. Cool. Before we do that, let's

envelope. Cool. Before we do that, let's have it create the doc. So let's say before we move on, let's create a

um doc for phase three in docs in AI

docster. Okay, at this point to this is

docster. Okay, at this point to this is probably the point where I would um start a new chat.

Um because now we have the the context of the docs and stuff like that. Um so

we don't need all this chat context to be in there. Um and it's kind of getting slow. So I would assume that this is a

slow. So I would assume that this is a point a good point to um move on to a uh yeah see it's saying there start new chats for better results. So, um, it's

even letting us know that that's what we should do. And now it's saying we're ready to

do. And now it's saying we're ready to move on. Um, where did it do it?

move on. Um, where did it do it?

Collaboration.

Cool. Summarizing chat

context. So, I'll let it finish doing that before I accept, even though it looks like everything's good to go.

And it's taking a long time. I'm getting impatient here. Cool.

time. I'm getting impatient here. Cool.

Um, yeah, it's planning next moves. Blah

blah blah blah blah.

Okay, we're ready to start phase four. Saving

four. Saving action. Okay, so it wants to do that.

action. Okay, so it wants to do that.

Um, I want to slow down because I want to move to a new chat.

Um, so let's say let's go first to the plan. Does it in the plan it says it

plan. Does it in the plan it says it wants to use pop-up parse, I guess?

Yeah. So, I'm going to um stop it here.

I'm going to accept all changes and I'm going to stop it.

Um, so we've accepted the collaboration, right?

Cool. And I'm going to do a new chat and get rid of that. Keep the plan in there. Okay. So, they seem to be done

there. Okay. So, they seem to be done with 3.4. We did 3.5. Forgot to mark

with 3.4. We did 3.5. Forgot to mark these off. All right. Cool.

these off. All right. Cool.

Um I am going to do get add all get commit m phase

three collaborate collab collaborate get push origin or what branch are we

on get push what was the remote get push origin

video. All right, cool. Didn't take a

video. All right, cool. Didn't take a little breather here. It's been an hour uh almost 2 hours of uh vibing and

before we move on to phase four. Okay, so I kind of decided that um

four. Okay, so I kind of decided that um I'm going to put off phase 4 um not do it for the video because it's already gotten pretty long. And uh what I'd prefer to do is kind of clean up this

dashboard and actually get it to show us some um stats here. So let me log in with my other user um that has more going on

and right because they have yeah like this stuff and collaborators and stuff. So we want some of these stats to be shown on the dashboard here. So, what I'm going to do

dashboard here. So, what I'm going to do is um I'm going to say instead of moving

on to plan phase 4, let's add some useful graphs

to the dash let's say dashboard page of the app.

think about some possible graphs or um visuals to show here based on our

envelope and our envelopes transactions and collaborations functionality.

Give me a few suggestions of what you think will

be the best things to display here after thinking about your answer. Okay.

answer. Okay.

So, after it gives me some possible suggestions, um what I'm going to do is I'm going to tell it to use these components here and the charts that it's got in there as um

as a guide and um base it off that. So, it's saying expense

that. So, it's saying expense um income versus expense for the current period. A simple bar chart with a

period. A simple bar chart with a summary uh pair of summary or a pair of summary cards comparing total income total expenses for the current month.

Spending breakdown by envelope and envelope status progress. Let's

progress. Let's do let's do the income versus expense overview because we have the envelope status and progress on the budgets page.

Let's do income expense overview and spending breakdown by envelope. Um let's do the first

envelope. Um let's do the first two. Use the let's see what we got in

two. Use the let's see what we got in there. We've got um on the dashboard

there. We've got um on the dashboard page we have some components with an overview and that's a bar chart using

recharts.

Um use the overview component as a guide [Music]

to help develop uh use the overview component as a guide. Yeah, just this should be enough because it already set up here,

you know, we have to choose whether we do recharts, chart.js, blah blah blah.

And because the overview is already using um recharts, then that should help.

And so let's see what it does. I saw before that it's going to

does. I saw before that it's going to create some new um operations. So it's going to make a get

operations. So it's going to make a get accessible budgets query. Cool.

query. Cool.

Um, and it's going to define dashboard aggregation queries, which is the those are like dashboard totals and get spending by envelope. I like it. And then it's going

envelope. I like it. And then it's going to create some front-end components, which are bar charts and a pie chart.

And should be pretty good once we have that stuff in order.

seeing an update the dashboard page. Um,

we'll go ahead and we'll try and just deploy this app. Um, for deployment, we'll probably have to um add a real email sender. We can't use

the dummy email sender that we've been using in development. Um, so it might take a little while, but uh should be worth it. Okay.

it. Okay.

Um, now I'm not sure if it applied these um these changes or not. That's just

odd. Says the setup and it I'm just going to say go ahead and implement that. Implement those

that. Implement those changes. Funny that I didn't do it

changes. Funny that I didn't do it there. Um, which I

there. Um, which I find surprising. I mean, it created all the

surprising. I mean, it created all the things and I don't feel like going through and yeah, manually clicking apply to all

of them. So, let's have it work it

of them. So, let's have it work it itself.

deleting the old overview. So, it made a envelope spending breakdown and an income expense overview. Oh, I need to accept the

overview. Oh, I need to accept the delete file um thingy.

Cool. I see some import errors.

We have recharts installed so we don't need to do that. These I know are false and I figured that out right away. We do

have an error here which is budget and I don't I think it went ahead and deleted which file is that? That is update collaborator

role. So, I'm not sure why it changed

role. So, I'm not sure why it changed that, but I'm going to put that back. I don't think um revert this

back. I don't think um revert this change. So, I think that was what's was

change. So, I think that was what's was causing the issue there. And let's see.

there. And let's see.

Um SDK fail, build fail. Okay, so we're getting a lot of

fail. Okay, so we're getting a lot of errors now. Um where are we getting them from?

now. Um where are we getting them from?

from the index. Mhm.

index. Mhm.

Okay. One of them is this one's that. We

can just tab through those. Let's go

down here. Budget

here. Budget ids type string is not assible to type number. Okay. Okay, so that means this

number. Okay. Okay, so that means this one those we tab through those type string is not assignable to type number.

So this should be string right h. So I guess the get spending by

h. So I guess the get spending by envelope expects a number array.

So let's ask it what the best way to deal with this is fix and chat. I know we can

chat. I know we can cast strings as numbers. Let's see. Um seems budget ID

numbers. Let's see. Um seems budget ID field is likely a string. Perhaps a U ID. We could look that

ID. We could look that up. Is budget

up. Is budget ID. Where are

ID. Where are budgets? Yes, this is a UYU

budgets? Yes, this is a UYU ID. So, it's going to change that to

ID. So, it's going to change that to string and that to string.

Okay, so it just is expecting to take a number, but because budget ID was a UYU ID, which is a long string of um

um characters and numbers. That should fix the issue. Now

numbers. That should fix the issue. Now

let's see what happens when it builds and recompiles. Some more

recompiles. Some more errors. Mhm. Okay. Not null. And it says

errors. Mhm. Okay. Not null. And it says null is not assignable to type string. Let's fix in

string. Let's fix in chat. I've actually never seen this

chat. I've actually never seen this before. this not null um definition here

before. this not null um definition here in a Prisma group by [Music]

sum where envelope ID okay but it doesn't solve this issue envelope ID is string So huh undefined. Okay.

undefined. Okay.

apply. What do we got? Request error loading budget info

got? Request error loading budget info request failed with 404 HTC loss error 404

object. Okay. At failure key.

object. Okay. At failure key.

So we get this error on the client. After those changes, I

client. After those changes, I unfortunately get this error on the client. Probably not finding a

client. Probably not finding a um budget ID or something like that. So

let's see how it deals with this.

is the function path get accessible details. It's asking me questions. So

details. It's asking me questions. So

get accessible budgets here is collaboration operations. Get accessible budgets.

operations. Get accessible budgets.

Yeah. budgets owned by user or budgets where the user is a collaborator.

Okay. Could you please confirm you have restarted the server and check the server logs for any errors when 404 happens? Restart like they

happens? Restart like they ask. Ah, interesting. Okay, so we've got

ask. Ah, interesting. Okay, so we've got um income, no income versus expense. So,

let's go check and if we add an income, let's say some income [Music] um we'll add

a,000 say income for that whatever.

Nice. So, we added a,000 bucks. So,

we've got income verse expense for the current month. Pretty good. And we've

current month. Pretty good. And we've

got money spent, funny money. Do we not have any envelopes? Yes. So, no money was spent on rent. So, if I go to transactions and I add a transaction and I say uh

rent that was 600 rent at transaction. So, my budget I see I spent

transaction. So, my budget I see I spent all my money on rent. I went over on my funny money and my dashboard should

reflect that that so majority of my spending is on rent. The rest is on funding money and I've got uh this income versus expense for the current

month. They're pretty

month. They're pretty close. Um right. So maybe I could do

close. Um right. So maybe I could do something with the rest of this where for example we use some of these cards here.

Um, I kind of like these indicators there. Um, but I think, you know what,

there. Um, but I think, you know what, this is pretty good for for for now.

This kind of um shows that we're able to do it. Let's

just go ahead and um repurpose those cards and get rid of recent sales. So,

nice. It works now. Um, but on dashboard page, I want to repurpose some of those

cards with general info such as total income, total spent, and total

remaining or something like that. remove

recent sales too. So we'll remove the recent sales and I will fix up some of these.

Right. Okay. So a lot of the um we have functions already, we have operations already that get that data for us. So it's easy to pass to those um

for us. So it's easy to pass to those um uh cards there. I mean we could go deeper and actually make it a little nicer, but I mean I think that's pretty cool. That looks pretty nice what it

cool. That looks pretty nice what it just did there. Um made it very simple for us. Then of course you can jump to

for us. Then of course you can jump to your budget where you see your collaborators and you see your transactions.

Um, I like it. Quick view of what you have remaining this month.

And yeah, really nice. Um, vibe

coded. I'm going to leave the other stuff in place for now. I mean, none of this perfect. Um, we can keep using this

this perfect. Um, we can keep using this process uh to refine everything. Um, I

think that's good enough for the uh purposes of this video. So, I'm going to

um make a new chat and I'm going to say um I'd like to deploy this app now

using let's do the docs wasps CLI deployment

methods. Um, can you lay out a

methods. Um, can you lay out a deployment plan in the AI

folder? Um, because yeah, AI is making

folder? Um, because yeah, AI is making it. Um, and title it

it. Um, and title it deployment plan.md where we go

plan.md where we go through where we outline all the deployment steps necessary.

So Wasp has some cool deployment features um and like you can deploy using a um

single command with um uh the Wasp CLI and right now you can do that with fly.io. So, we'll probably have to go

fly.io. So, we'll probably have to go set up a fly account and stuff like that. Um hopefully the plan will tell us

that. Um hopefully the plan will tell us that. So, it's just going through the

that. So, it's just going through the docs and it's going to tell us what to do.

Um, so where did it make the deployment?

Here's the deployment plan. Let's check

it out. Accept

file. So you need an account with Fly.io. Requires a credit card. Um, I

Fly.io. Requires a credit card. Um, I

know that they don't um charge you if you're under $5. So you install the Fly Ctl CLI. We've already I already have

Ctl CLI. We've already I already have done that. Um, this gives you the link

done that. Um, this gives you the link to how you can do it. You log in with it. And then we need to follow these

it. And then we need to follow these steps. So while CLI simplifies

steps. So while CLI simplifies deployment to a single command.

[Music] Um so we need to choose app region run deployment command blah blah blah blah.

So we will do that. Um but I know before we can deploy we need to move off the dummy email provider and move to a real one.

Um so let's go ahead and do that now. So

here we're using dummy email provider in production and that was just logging like all the emails um to the console. Um but we want to use a real

console. Um but we want to use a real one like send grid or something. Okay.

So um in the was docs for the email sender that we've been using been using the dummy email sender which is just a a placeholder in um development that logs

all the emails that would be sent by a real email sender to the console. So, I

just quickly went ahead off uh camera and I got the um Send Grid uh I logged into my Send Grid account and got the API keys and put them

into.server with under the send grid API

into.server with under the send grid API key um environment variable and yeah, you can do the same and um uh yeah, this

is env.server.example. You'll want

is env.server.example. You'll want

av.server file. put your Send Grid API key in um and change the email sender to provider send grid default from and be

your um email that you use um for that uh send grid account. Um so you'll see the same thing in here from field. Um so

let's uh um let's try it out. Uh I've

got to restart the um oh import main.

What's going on? Import main from um I'm missing something here. Oh, I got two. Uh no, that should

here. Oh, I got two. Uh no, that should be right. Where I was going. Import main

be right. Where I was going. Import main

root component client server unexpected token root component. Oh, okay. I don't know what

component. Oh, okay. I don't know what was going on there. uh maybe missing a curly bracket or something. Okay,

so start the app again and just to see if this um API key is working, I'm going to try and register a new

user. So, we're logged in with probably

user. So, we're logged in with probably dude or whatever. go to sign up and we're going to do um

guymail.com. Um or let me actually use

guymail.com. Um or let me actually use my real email address. Budget created for new user.

address. Budget created for new user.

Okay, let me go to my email address um off camera. Cool. And there's my real email address. And it says, "Yeah,

email address. And it says, "Yeah, you've got an email." So, I'm going to verify it.

Um, again, off camera here, go to my email address.

and it gave me a link that I'm going to click verify email. Cool. So, I went to my Gmail

email. Cool. So, I went to my Gmail account, clicked on it, and it verified.

So, now I should be able to log in with that uh real actual email address. So,

we know that it is [Music] working. Cool. And here of course um we

working. Cool. And here of course um we have no spending data for the moment because we have no budget and stuff like that. But cool. Yeah, that worked. Um so

that. But cool. Yeah, that worked. Um so

that was a prerequisite to be able to actually deploy the app. Um because um Oh, there's my API key. I'm going to

have to get rid of that.

Um because um yeah, with the dummy email provider, you can't deploy to production. So, we

had this deployment plan that we made.

Um and I'm going to go back to the docs and I'll just say um how can I check if I'm logged in with the fly

uh ctl? It says here you have to ini

uh ctl? It says here you have to ini install the flyct ctl and log in. So let's just uh run that command. Cool. So it shows I'm logged

command. Cool. So it shows I'm logged in. I've already done that before. And

in. I've already done that before. And

it's fly off. Who am I? Um so now I'll just ask it what's the next um uh prepare the next command for me

according to the um deployment plan.

So, I'm just going to have it, you know, create the um uh unique name blah blah blah the region. So, uh it's

saying what base name would you like to use for your application? Um I like this one. Yeah, envelope budgeting app. Um

one. Yeah, envelope budgeting app. Um

yeah, say I like the name and let's go with Miami. So you

need a name and a region to deploy the app in. Um so it's running a command.

app in. Um so it's running a command.

It's going to check fly. So it's got my personal and it's got shared. Um which

organization would you like? I'll say

personal. Okay. So it's prepared the command wasp deploy fly launch the name of the app uh in Miami and to the personal org. If you don't have

personal org. If you don't have different organizations, it'll just you don't need that um tag. But that's the great thing about having it put out this uh plan and then having it make the

commands for you. So, let's run it. Now, of course, you would have to,

it. Now, of course, you would have to, like it says here, you'll have to, you know, go to fly.io and create account if you don't already have one.

Um, but as you can see here, it's building the app. This might take a while.

Press any key to continue.

Continue. Okay. So, we popped out the terminal.

Um, and then it's running here. Okay. It says my app was deployed

here. Okay. It says my app was deployed finally. So, let's open up the link and

finally. So, let's open up the link and see what we get.

And how's it going? See a loading spinner

going? See a loading spinner here. Log in to probably to sign up. We

here. Log in to probably to sign up. We

need I know we need to add the environment variable. So,

environment variable. So, uh no match signs up.

sign up for free thingy.

So, let's go ahead. We've got the We see the client there. It's doing a loading spinner probably because it's not able to find the um send grid API key. Um, so

let's ask uh the agent according to the Wasp docs, how do I add a an environment

variable via the CLI. So yeah, I'm going to go access

CLI. So yeah, I'm going to go access that envir environment variable on camera, but of course I'm going to delete this later. So you goons don't

have access to it. Okay. So here we go. Um let's just

it. Okay. So here we go. Um let's just say can I change that? No. Let's put it

Well, it's there. So let's just copy that. Let's put it here. And it's going

that. Let's put it here. And it's going to be Oh So paste it again and get

the send good API key. Paste that in there. Okay. Um let's go back to our

there. Okay. Um let's go back to our app. Where was the URL again?

app. Where was the URL again?

Here. Let's see what our issue is. Okay,

cool. That I think it's getting the the API key now. So, we'll go to sign up and put in my real email address again.

Okay. And then it sent an email. I'm

going to go off camera and check my email here. And I've got

here. And I've got a email. Okay. So, email has

a email. Okay. So, email has been verified as you can see here. So,

I'm going to go to login and I'm going to put in my email.

And we are logged in, baby. All right.

So, let's create a budget. Fun

uh household stuff. Awesome. We have a deployed

stuff. Awesome. We have a deployed um semi-finished um collaborative budgeting app. Let's

see if we can add some transactions. Nice. I'll just say

transactions. Nice. I'll just say coffee. And I like coffee, so I'll spend

coffee. And I like coffee, so I'll spend 100 on that. Cool. All right. And

that. Cool. All right. And

um everything seems to be working pretty well, I would say. Save changes. Cool. And go to our

say. Save changes. Cool. And go to our dashboard. And we see our income

dashboard. And we see our income expenses. Things are looking good. total

expenses. Things are looking good. total

income remaining this month. Um Oh, yes, because I didn't put any income in. So,

it took a while. I mean, it's not like everything is done for you. You kind of need to know what you're doing, but you can definitely vibe code your way and

get a lot done um a lot faster um and than you could in the past. create some

complex apps.

Um, and yeah, this workflow I think definitely um is one I will be sticking to. Um, I

even noticed that adding like stuff like this or maybe adding like this solutions possible solutions thinking idea. Um but

having these like set of cursor rules that you can either automatically um or manually um inject into the context is really helpful. Um having a

detailed PRD and plan that you can go through is super helpful. Um starting on top of a really nice component library is very helpful. using a uh full stack

um framework with batteries included gets you um you know a lot further than usually would. So that's it in a

usually would. So that's it in a nutshell. Um I know this is long, but I

nutshell. Um I know this is long, but I hope it provided some um use somewhere within this video. You

found something useful or uh you've learned something. Uh let me know in the

learned something. Uh let me know in the comments um anything that I might have missed. um stuff that you think is

missed. um stuff that you think is improves this workflow or or things I'm overlooking. Um yeah, these tools keep

overlooking. Um yeah, these tools keep improving, keep getting better. So, this

video might even be obsolete in a few months. Who knows? But anyway, um that's

months. Who knows? But anyway, um that's it for now. Signing off. Enjoy the vibe coding.