Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a To-Do List App with Replit Agent!
You have completed Build a To-Do List App with Replit Agent!
Preview
In this video, we tackle the errors from our last session head‑on by diving into debugging with Replit Agent. You’ll watch as we identify problems, experiment with fixes, and press forward without skipping a beat. As we work through each issue, we continue building out our to‑do list app—implementing core CRUD operations to create, read, update, and delete tasks, then layering on more advanced features to enhance its functionality. Because AI‑driven responses can vary, your experience may look different from ours, giving you a real‑world view of iterative debugging and development with Replit’s AI and collaboration tools.
This is part of the AI for Everyone: Build Power Apps Without Coding track. Check out the track to see the rest of our No-Code content. Stay tuned—new content is continually being added, so be sure to check back regularly for updates!
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hey everyone, Dan here. Christian here.
0:00
And we're back to continue
this build in Replit.
0:03
As we stopped last time,
we realized we got this
0:07
to-do list app
slash task manager to create a task.
0:11
And we have our CRUD actions
set up to where we can create a task.
0:15
We can read the task, update
and delete the task.
0:19
However,
when we deleted the task last time,
0:22
it did not disappear from our front end.
0:25
We're thinking
it may have disappeared from the backend,
0:27
but we're going to have to talk to Replit
and kind of confirm that. Yep.
0:31
And if you don't know what we're talking
about frontend and backend,
0:34
frontend is what you're seeing now
on the preview.
0:38
Backend is the database where it makes
sure the changes are actually recorded.
0:41
So as Dan was saying, the frontend
didn't change, but the backend did.
0:48
Absolutely. So I'm going to
0:52
bring
0:56
back our Replit agent on the side here.
0:57
And notice we have the assistant open.
1:00
So, again,
we have the assistant and the agent.
1:02
The assistant's for smaller tasks
1:05
and for providing you with code
that you're going to implement yourself.
1:07
The agent is for doing heavy
lifting and implementing code itself.
1:10
So I'm going to exit out the assistant,
1:15
and I'm actually going
to start a new chat for the agent.
1:17
and I'm just going to tell Replit
1:22
the last feature didn't work so well.
1:25
We wanted it to be able
to delete an action
1:28
or delete a task
when we hit the delete button.
1:30
It says it deleted it,
but on the front end it's still there.
1:34
I'm not sure if the back end updated
1:36
correctly or not and deleted the action,
but the front end did not update at all.
1:38
Please check the connection.
1:43
Please check
both the database in the front end
1:45
to ensure that when we add a task
and delete a task,
1:48
those actions are shown
on our front end to all the users.
1:51
And one great thing about
2:00
doing the speech-to-text
2:01
method is you can kind of just ramble
2:05
and provide a whole lot of context.
2:09
and my experience is kind of better
to give Repl.it
2:12
more context than not enough.
2:15
And it says it, let me see here.
2:19
It says it analyzed the task
deletion issue and found that
2:22
while the back end works, the front end
cache isn't being properly invalidated.
2:28
I'll create a plan, fix it.
2:33
Yep, we're not going to add
any of these other
2:35
tasks.
2:39
Just keep it simple,
keep it focused, one task at a time.
2:40
Keep it simple, silly.
2:45
Absolutely.
2:47
K-I-S-S.
2:49
Now, sometimes the suggestions
are great suggestions,
2:51
and you may want to jot them down
before you approve the plan.
2:56
There are some times
when I'm doing this by myself
3:01
where I'm , oh,
these are great suggestions.
3:03
I'm going to write it down a different doc
and then revisit it once it's time
3:05
to add those features.
3:09
And then sometimes
3:13
if you know you're having the agent work
on a smaller feature
3:14
or something, you know,
it's had a lot of success that previously
3:19
you may feel more comfortable to check off
some of those extra tasks as features,
3:22
but just don't feel obligated to.
3:27
OK, everyone, let's see what it did.
3:29
It said, could you try creating a new task
and then deleting it?
3:33
So it should delete now.
3:36
We'll add a new
3:39
task.
3:41
But we'll say fix any bugs is our task.
3:43
Bug squasher will be our description.
3:49
And we'll say this is a work task.
3:53
Create our task.
3:54
All right.
3:57
All right.
4:02
All right.
4:02
We have our second
task down here in our task list.
4:02
And let's try to delete it.
4:06
Boom.
4:13
There it works.
4:13
Did it?
4:15
Well, it
4:16
said it did, but it actually didn't.
4:17
Let's try it. Click on it.
4:21
I don't that. Actual edit.
4:23
And let's see if we can delete.
Nope. Can't update.
4:24
We can only update.
4:27
Can't delete.
4:28
Interesting.
4:29
So, how about I send the message?
4:33
Go for it.
4:37
The deletion did not happen again
in the front end.
4:39
Can you make sure it is updating on
4:45
both the front and back end?
4:52
And just an idea, tell it to take its time
and to think about it.
4:57
Take your time
and think through this request.
5:01
Thank you.
5:07
Now, you don't have to be polite.
5:09
It's just a habit that Dan and I kind of
developed to say please and thank you.
5:11
Absolutely.
5:15
to be nice to the bots,
you know, just in case.
5:17
You never know, right?
5:21
Absolutely.
5:24
All right.
5:27
So it says again, can we try deleting
a task and verify if it disappears?
5:28
So let's head down to the bottom.
5:32
We see both of our tasks.
5:36
Let's go ahead and delete this
most recent task.
5:37
It worked.
5:43
Oh, no.
5:44
It came right back.
5:45
Try again. Let's see.
5:47
I'm going to delete it.
5:49
And if you watch very closely, it's
going to go away.
5:50
And it comes right back.
5:54
Okay.
5:57
Okay, so let me try Let's
5:57
also scroll back up and see
because it says,
5:59
does the task count update correctly
if we go all the way up?
6:01
Oh, okay.
6:04
See, I didn't even mention that Task
count Nope, it did not update
6:05
Well, we have two tests at the moment.
6:10
Let me add a third Remember, it says the
backend was operating correctly, right?
6:13
Yeah Interesting Test task
6:20
three
6:24
So what you're seeing here is us
kind of walking through what is working
6:25
and what isn't to kind of help us write
the next kind of fix.
6:30
It's , hey, it's not working again.
6:35
The updates are not working, et cetera.
6:37
Okay.
6:41
So if you notice down here,
we have three tasks.
6:41
And up here at the top under task summary,
we have three
6:45
tasks in progress and three total tasks.
6:48
So it actually updated that to work
because last time
6:51
it was just using the default data.
6:56
But I want to see.
6:59
We have one in progress.
7:01
Okay, okay.
7:05
I'm not going to get ahead of myself here,
7:07
but I notice some features
that are missing.
7:09
, for example, the status is in progress.
7:14
Oh, okay, if I click on in
progress, it says completed
7:18
I was going to
7:24
say we had no way to change that
And we had no
7:25
way to say that we finished a task
7:29
But it turns out we do Alright,
so I'm going to put two of these tasks
7:31
as completed And let's check the dashboard
at the top Yep, completed two tasks
7:35
One task in progress and three
total tasks So that's actually working
7:40
but ironically
we didn't really ask for it to fix that.
7:45
So I'm going to go back
7:50
and I'm going to just tell Replit
7:51
the task summary displays correctly.
7:54
It shows the correct amount of tasks.
7:57
However, when we delete the task,
it does disappear,
7:59
but it immediately refreshes and comes
right back.
8:03
It doesn't stay gone.
8:06
all right let try deleting the task again
8:18
let see if Replit was able
to help us accomplish this task this time
8:21
Okay, kept our statuses from last time.
8:28
That's good.
8:30
That kind of shows that the database
8:31
is recording our actions.
8:34
We did it.
8:41
Oh, let's go back up and see if update.
8:42
Okay, so we shipped two tests.
8:45
There we go. Excellent.
8:49
It did think very deeply about that.
8:52
It did, but it did got the job
8:55
done in the end.
8:57
All right, so let's add more.
9:01
Let's add two more tasks, test three and
four, and let's delete them and see if it
9:03
continues to update.
9:08
I think I have one called number three,
9:15
so I'm going to say task number four.
9:17
Task number five.
9:21
But of course, we only have four tasks
because we deleted one.
9:22
Okay, our summary has been updated.
9:27
I'm wondering if the
9:30
line graph also updates.
9:33
What is today, Wednesday?
9:37
I don't think so.
9:39
We can check in on that.
9:43
We'll fix that later.
9:45
We have all of our new tasks down here.
9:49
Okay, hold on.
9:52
Okay, it completes,
9:58
but it shifts it after you hit complete.
10:02
Mm-hmm.
10:09
sometimes
10:09
I'm guessing
if it's click on the other ones on top
10:13
let's see
10:15
yeah wait okay
10:18
so it's doing some kind of sorting here
10:28
I was either going to say
we could give it the prompt
10:31
to just leave everything alone,
keep the items in place,
10:34
or we could have the ability to sort
10:39
right here, sort the column.
10:42
And it could be sorted
10:46
by in progress to completed
or completed to in progress,
10:48
depending on how we have the toggle
set up or filter set up.
10:51
What do you think?
10:56
Let's
10:56
do the sorting.
10:58
Okay.
11:00
But let's see if it deletes.
11:00
Let's delete all the tasks.
11:03
Okay.
11:04
Yep, will do.
11:05
Yep, looks it's deleting.
11:11
Looks we're still getting the alerts.
11:15
Let's go up.
11:20
All right, it's updating.
11:24
Cool.
11:25
All right, so we're going to try to add.
11:27
a status filter.
11:32
Okay, Replit.
11:46
When I click on the status of a task,
whether it's completed or in progress,
11:47
it changes the status, of course,
which is fine.
11:53
It's good functionality.
11:56
However, based on the status,
11:58
whether it says in progress or completed,
12:02
it moves in the order.
12:06
It moves the task in the order
that the list is provided.
12:09
So in that case,
12:13
can we keep
12:15
all of the tasks
in the same spot where they are,
12:18
But however, give us a filter at the top
12:21
of the
12:27
column by the status label
that would allow us
12:28
to click on this filter
and let us filter by completed,
12:32
by in progress or by all.
12:38
Thank you.
12:41
Okay, so it says it's
12:51
built out our feature.
12:52
So let's first,
I'm going to bring this over.
12:56
I'm going to create a new task.
12:59
Bake a cake.
13:02
Okay, our summary is updated.
13:07
The task is up.
13:12
We have a filter.
13:13
Oh, let's add, let's just add a few dummy.
13:16
Tax. Yep.
13:22
Let's see. Oh.
13:24
Okay, awesome.
13:52
Also, side note, that last task,
I didn't even
13:54
click enter or click create task.
13:57
I just hit enter on the keyboard.
14:00
It knew what that meant,
and it logged our task.
14:02
So that's pretty cool.
14:04
And just to go back up,
we have five total tasks, as we should.
14:06
And we have
14:12
one, two, three, four, five tasks down
here.
14:13
Let's say haircut is completed.
14:17
yard sale is completed,
14:22
and bake a cake is completed.
14:24
Now, it's still doing the default
14:27
sorting by category or by status,
14:31
so it's still doing that,
but that's not a terrible issue.
14:35
Now, let's see how the filter works. Yep.
14:38
It works.
14:46
Perfect.
14:49
Awesome.
14:55
Okay, so
14:57
what features would you to see next? Hmm.
14:59
Let's actually go to our PRE
15:04
and see what features we need to consider.
15:08
That's a great idea.
15:12
Then we'll go to Attached Assets,
15:23
Product Requirement Doc,
15:27
and then Perfect.
15:33
Okay,
15:39
so we have Features and Requirements,
User Dashboard, Service of Central Hub
15:39
to View and Interact with their Tasks,
Task Summary. Yep.
15:44
We have the graph, gamification stats.
15:49
We have the stats.
15:51
They don't work yet,
but they're in responsive design.
15:52
It is responsive.
15:55
It's not completely fixed, but
15:57
the responsive implementation is in there.
16:00
Adding new tasks.
16:04
Requirements, form
16:08
field for title,
description, start date. Yep.
16:09
We can categorize tasks. Yep.
16:13
scheduling with start and due dates.
16:20
Do we have that?
16:23
Start?
16:28
We don't. We don't, yep.
16:29
That something we can add
So we do need start and due dates
16:33
and then we put user
auth in the beginning so
16:36
that should be good
16:39
Gamification, streaks and rewards,
16:43
progress visualization.
16:47
Okay, cool.
16:49
So basically we need to get the due dates
and the start dates implemented,
16:51
and we'll just copy that.
16:56
and then the gamification
and the progress visualization graph.
17:00
We have those, but they don't function,
so we can work on that next.
17:06
Mm-hmm.
17:10
And I'm just going to paste in that prompt
or that feature list
17:12
that we needed, Point
a little arrow up And say
17:19
Can we work on building this
17:25
And as you'll notice I
17:36
go back to kind of fix my spelling errors
That's just me being me
17:37
But when you're working In the heat
of the moment
17:42
You're going to misspell
some things I do all the time
17:45
It gets it, it understands what you want
and it will continue to produce.
17:48
You don't have to stop every single time.
17:51
Mm-hmm.
17:57
Do not get hung up on typos.
17:57
It will understand that the logic is
there.
18:00
Don't let that stop you.
18:03
Absolutely, 100%.
18:07
And it's saying
18:11
it's noticed that we have start dates
and due date fields already
18:12
associated with tasks,
so that's probably on our database.
18:16
so now it's going to implement
that feature on the front end
18:20
so it's going to update
our UI or our user interface.
18:22
Should be just about done.
18:29
Okay, it took a screenshot.
18:32
That just shows that upon
restarting the app, everything is running.
18:33
There's no errors on startup.
18:37
Okay, I've added date pickers to create
edit tasks
18:40
and visual indicators for overdue tasks.
18:44
Hmm, okay, interesting,
we didn't ask for that But
18:48
definitely could be useful,
it wants us to verify first
18:51
That we can set a start date
and a due date And two,
18:54
that overdue dash turn red Alright,
18:59
so first let's just make sure we have Yep,
we have all our completed
19:03
tasks down here
19:07
Oh, we have a column for dates
19:12
So that just might mean we have something
19:15
Let's say plan a birthday party
19:19
We'll do a personal
19:26
We'll say we're starting today
19:28
Okay, we found our next error,
19:30
unfortunately The pop-up comes out
it's sort of
19:39
we can go through month to month
but we cannot actually select the date hmm
19:45
we'll have to go back and
19:53
tell it we're having an issue
19:54
okay would you me to handle this Christian
or yeah okay
20:01
let's let you handle this feature
and then we'll continue from that
20:05
yeah I'll work on the next one
cool sounds great
20:10
All right. So.
20:13
We can pick a task or we can create a task
20:17
and we can select a start date
and a due date.
20:21
However, when we click the button
to select our start date,
20:24
we get a calendar pop out,
which is exactly what we want.
20:27
And it allows us
to sort through the months
20:30
and it highlights
the day we're going to pick.
20:32
But it does not let us select that day.
20:35
Clicking on it does absolutely nothing.
20:37
So please help us
enable the ability to select a date
20:40
and have that attach itself to the task.
20:45
Thank you.
20:48
So it says the issue is likely in
20:52
how we're handling the form state
and date selection in both components.
20:53
Looking at the code,
20:58
we need to, let's go back up here.
21:00
We need to properly handle the form state
updates when dates are selected,
21:03
ensure that the calendar component
is properly handling the on select event
21:07
and make sure the form values
are being updated correctly.
21:11
So number two is definitely our issue.
21:16
It's not handling the on select event.
21:19
All right.
21:22
So let's bring it over.
21:24
All right.
21:30
Plan a birthday party.
21:31
and we'll say the party
21:41
is on the 14th of March.
21:42
Notice some UI errors.
21:46
It's not terrible.
21:48
They fix when you make it bigger.
21:49
That could just be
21:51
an issue with how we asked
21:54
for the responsive columns,
but we can just change that.
21:55
Oh, no.
22:02
I clicked on create the task
22:04
and it crashed the app
I've never seen that before no never it
22:06
even asked the agent to debug I'm
going to just try running it again
22:12
to see if it'll bring back our app
22:16
and if we run into the issue again
22:21
okay we're back
22:24
plan a party
22:27
hit it again.
22:37
So I'm going to hit
this ask agent to debug.
22:38
And normally we'll get
22:42
an error in text.
22:45
It'll just normally red and different.
22:48
And if you remember,
we've actually encountered
22:51
some of these errors early in the build
and we screenshotted them,
22:53
we copied and pasted them,
and we used them.
22:57
This time,
it seems that the error was so large
22:59
that it completely crashed
our entire environment.
23:03
And if I had to guess,
I think a part of what's changed
23:06
or what's being updated on the Repl.it end
is how it creates and handles
23:10
the creation of new features
and debugging.
23:16
Because in my past experience,
it provides this information
23:19
on what it's working on,
but it's never been this detailed.
23:24
I feel it's going in greater detail
to kind of explain to the user
23:28
what it's doing, what it's working on,
23:32
and kind of the reason
why behind it, which it's good to have.
23:35
All right, and we're back
23:41
here, so let's try to
23:42
plan a birthday party.
23:45
We'll try adding this task one more time.
23:48
March 14th.
23:56
Crashed again.
24:01
Hmm. Wonder why.
24:06
That's never happened multiple times.
24:07
We tried to debug it.
24:12
Okay, let me see.
24:13
I'll go back to running it.
24:20
but I kind of have an idea.
24:23
I'm going to open the assistant.
24:29
And I'm just going to say
24:36
we're running into a few issues,
24:39
mainly after adding the dates
to a new task, and I click on the button
24:41
to create a new task,
the entire app crashes.
24:46
I never had it crash on this level
24:50
So can you please
24:53
check over the code look for any errors
24:56
and see if there anything
that we need to debug or work on.
25:00
Thank you.
25:04
And again,
25:11
we could
totally have had the agent do that,
25:11
but A,
25:15
that's going to use more of our credits.
25:17
It's going to be the higher price credit,
so it's going to be $0.25,
25:20
whereas this question is just $0.05.
25:24
And I'm hoping that
25:28
it can kind of objectively review
and provide us
25:30
with some feedback
and ideas on what the issue could be.
25:34
Okay, interesting.
25:42
It's reviewed a few files,
but it thinks it's found the issue
25:45
and it's actually executed it for us.
25:49
And Assistant
25:55
automatically restarted the app.
25:56
That's pretty incredible.
26:00
This is definitely a new update
because Assistant
26:02
rarely implemented things.
26:05
It just provided feedback.
26:08
But it definitely couldn't
restart the app and all that.
26:10
And you can change that in your settings,
it says.
26:13
But it's getting more functionality,
which is really cool.
26:15
And if you'll notice this plus 25
and this negative five,
26:18
that means the assistant went in
26:22
and on this component, the task form
component, it updated and provided
26:24
25 new lines of code and took out
five lines of the existing code.
26:30
So hopefully that was the error.
26:35
Let's try it out.
26:36
All right.
26:46
Fingers crossed.
26:47
Fingers crossed.
26:50
Crashed again.
26:57
See, normally.
27:00
Let me see here.
27:05
This just updates. Yeah.
27:06
Let me try and run it again.
27:09
the problem with it crashing on this level
27:11
is that it gets rid of the entire agent,
the workflow, everything up here.
27:16
It gets rid of this nav bar,
so it gets rid of our dev tools.
27:21
I'm almost for certain whatever issues
we're encountering are probably going
27:25
to be somewhere
in the error section of the dev tools,
27:29
but we can't access it.
27:33
Now, do you think we need to roll back?
27:36
it's a great suggestion
27:40
let's see let's see
27:43
what our last functioning update was
27:46
oh we actually have to
27:49
do a new
27:53
I think it was right
28:00
when we added the date functionality
28:02
my chat is still here I
28:10
wonder if I can just click roll back here
yeah we both should be able to
28:12
I think I might have the old chat
but feel free
28:19
you can go ahead and roll this back
just to show people that we can both
28:25
kind of do this
alright I am going to click on roll
28:30
back to adding date
functionality to tasks.
28:33
Okay, excellent.
28:38
All right, clicking.
28:39
It says rollback completed on my end.
28:49
I just got it here.
28:52
Okay,
I should be able to get the web view.
28:55
Okay, it's loading.
28:57
All right, we're back.
29:05
And let's see.
29:08
We have the dates.
29:10
I think down here, let's try
29:13
plan a birthday party.
29:16
Oh, okay.
29:26
So I put it right back to where we can't
select the dates, but we have the dates.
29:27
So that's good. Now,
29:33
we have
two strategies here, in my opinion.
29:38
Strategy one would kind of be
to ask it to implement
29:41
that on-state
event to where it can handle
29:46
us clicking the date,
and it updates our app accordingly.
29:50
But, of course,
29:55
as everyone noticed, we just tried that
and we kept kind of running into errors.
29:55
so we could definitely do that again
especially the fact that we rolled back
30:00
it could just have different luck
I say we try it one time
30:05
but if that doesn't work
I think we might opt for option two
30:09
and that would be to
30:15
take a screenshot of what we built
30:17
and bring that into a completely new chat
30:21
or a completely new project
and we say, we will copy and paste our PRD
30:23
and here's
30:29
our project requirements
doc, here's our screenshot,
30:30
can you build this app for us again?
30:35
And that way,
30:38
it should build all the functionality
30:41
and get us back to this current point
but in a fresh build
30:44
that might respond
and act a little better.
30:47
Yeah, I think it would be good
30:52
for us to try the date functionality
one more time?
30:54
Absolutely.
30:58
And then if it doesn't work,
we'll go to option two.
30:59
Okay.
31:03
This time
31:07
I would you
to make sure that when I select a date,
31:08
it records that date
and allows it to be added to the task.
31:12
Right now I can highlight a date
but I can't select it
31:15
and choose it.
31:19
and quite frankly, even if
31:25
it catches an error again,
as long as the error doesn't
31:29
crash the entire application
and we can access our dev tools,
31:32
we'll be moving in the right direction
31:37
because even if Repl.it itself
is getting caught
31:39
in this feedback loop,
we can take those dev errors,
31:42
copy those, and bring
31:47
those to ChatGPT or Claude
31:48
and see if that can give us
some information to bring this agent.
31:51
Okay.
31:57
I noticed it said it's
31:58
going to fix the on select handlers,
which was the issue last time,
32:00
but I also seen it was going to update two
or three other components as well.
32:04
Hopefully it updates correctly.
32:10
Fingers crossed.
32:14
All right.
32:18
We're back.
32:19
Let's see.
32:24
I just know if this doesn't work,
32:29
we're never going to get that party
planned.
32:30
You know, I guess we'll just have to do it
the old-fashioned way.
32:33
All right, it's selecting everything.
32:38
Here we go, moment of truth.
32:41
, party's not happening.
32:43
alright so
32:48
I think this is a good spot
to take a break and pause in
32:52
when we come back we're going to again
32:56
take a screenshot of what we built
we're going to get our PRD
33:00
and our prompt together so we can
bring all this into a new spin of Replit
33:04
and just try starting from scratch
and hopefully we'll get better results
33:08
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up