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 the previous session, we reached a dead end in our debugging. In this video, we start fresh with a clean slate—and right as we began, Replit released Agent v2. You’ll watch us launch a brand‑new project, activate Agent v2’s advanced code‑generation and immediately put its capabilities to work. From there, we build our to‑do list app from the ground up: scaffolding core CRUD operations, adding sorting and filtering, and fine‑tuning the user interface. Throughout the session, we highlight how Replit Agent v2 speeds up development—and why AI‑driven builds can deliver different outcomes each time.
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
OK, so we pasted in our PRD
0:00
and we've said I’ve
attached my PRD for the task manager app.
0:03
I'm just going to clarify
that's for reference.
0:07
But please start by making the create
a new task screen.
0:12
So we've clearly defined a parameter
of something to build.
0:16
We're not going into too much detail
0:19
and hopefully we're not overwhelming
the system.
0:21
Let's start and see what happens.
0:23
and it's just responding
saying it's going to look over everything
0:36
and formulate a plan
and come back with a proposal.
0:39
Okay, and we're just going to build
0:47
the initial prototype as always. Yep.
0:48
Okay and this is the new Visual preview
0:59
So it's coding
1:06
And I'm thinking
once we start getting some components
1:08
Yep it's just starting
building it in front of us
1:10
And I'll actually just
1:17
Make that a little bigger
1:18
so very interesting
1:27
in the previous iteration of Replit AI
1:28
or the AI agent rather V1
1:31
you would get the code generated
and once the code was finished generated
1:34
you could hit preview or web view
and see what was built
1:39
but now you actually get to see
it being created
1:43
in real time
1:47
oh man it also looks
1:51
it's already doing its start and end dates
that was something
1:53
that we had to add in a few iterations in
1:57
yeah this looks way better
2:01
it looks it's you know
it was way more thorough all right
2:05
now I'm gonna go ahead and take a second
to get my invite leak
2:08
all right I'm in
2:15
Excellent, excellent.
2:17
Okay, it's still doing its
2:21
thing here as far as coding.
2:23
I'm not going to click on anything
2:35
quite yet because I don't know what works
and what doesn't.
2:39
But I will say I'm very impressed
not only with the ideal
2:43
of the functionality that it's showing,
but also just the UI.
2:49
This was much better than what we got
originally.
2:54
100%.
2:58
It's cleaner.
3:02
The UI is spaced
3:06
in a more intuitive way
3:09
than you would for a task manager.
3:11
if that makes sense. No, 100%.
3:15
I completely agree.
3:17
It just everything
seems it's more digestible.
3:18
It feels it's taking the best of all
these other task managers that it's
3:23
probably referencing its own database
and kind of making it
3:28
a simplified version of it.
3:32
Oh, it went even further
3:37
because this is the task dashboard,
3:41
I just wanted to create a new
task function.
3:43
Is it ready?
3:49
Yeah, we have it.
3:51
I still see
3:54
some minor errors, but it's amazing.
3:55
The start date.
3:59
Oh, I see what it's doing.
4:01
That's actually really good for UI
or for user experience.
4:03
What it's trying to do is tell you
what needs to go here, the start date,
4:07
and then when you click on it,
you can actually type it in,
4:12
and so you don't forget what needs to go
there.
4:15
It's moving that label above,
4:17
which is a good interaction,
micro interaction to have,
4:21
but it's just
4:25
in the way.
4:27
But that's all okay.
4:29
I'm just doing demo, demo,
4:32
demo, personal, custom
category, create task.
4:35
Oh, I can select stuff.
4:40
Okay, so let's say fix my disk.
4:43
Can I add the task?
4:50
Let's see.
4:52
It doesn't show up.
4:54
It's still not connected to the database
because we didn't specify it.
4:55
Yep, we didn't ask for it yet.
5:00
Okay, so this is a good start.
5:02
This is a good start.
5:05
So now let's just go back.
5:06
And let's see, set up the to-do list.
5:11
Yep, yep, yep.
5:14
Awesome. Everything looks good.
5:15
So just last time
Christian invited to the project
5:17
He can see what the project generating
and he can also see the previews
5:20
but he can also you know
type in and prompt
5:25
the The agent as well So Christian
why don you go ahead and prompt
5:29
the agent to create a task for you
so we can view our tasks
5:33
All right.
5:39
So right now I am typing.
Can you create a task for you?
5:40
that links newly created task to the
5:42
dashboard and
5:49
is updated in real time
5:53
to reflect the new edition
5:56
of the task.
6:00
That's perfect.
6:04
And I can see
6:08
everything on my end
that you just created that new prompt.
6:09
It's going to update
6:25
our dashboard
to properly connect with the tasks.
6:26
So that's good.
6:30
It's also adding the ability to delete
6:32
tasks as well, it says.
6:35
So that's good.
6:38
Oh The dashboard got a major overhaul
6:43
Oh and it added what I What we both
6:49
Typed in for tasks That's really good
6:52
Wow in just six days
6:59
It changed that much That's amazing
And that's
7:01
What we were saying in the previous video
So, you know,
7:06
sometimes you just got to take a step
back,
7:08
you know,
leave the program alone, come back.
7:11
And who knows?
7:14
Performance can be,
you know, drastically different.
7:14
And now it's saying it's going
7:19
to create the task component
to improve code organization.
7:21
So it's just refactoring our code,
basically.
7:25
But, of course, you want to let it finish
because refactoring
7:31
the code can change the functionality
or break your project.
7:33
so now when you're seeing refactoring
7:38
what does that mean
for people who are listening
7:39
refactoring is just optimizing the code
7:43
so it's looking for any code
that might break our website or app
7:46
but it's also looking for any unused code
because the more characters
7:51
and the more code that you have
the heavier the file the heavier
7:54
the file the slower your load time
7:58
so refactoring is just a good way
to optimize your code
8:01
and also make it more manageable
and more organized.
8:06
It's taking some of the
8:10
features and turning them into components
and having them linked together
8:12
instead of just one big mesh of code
8:16
for all the different components
and all the different features.
8:19
It's kind of it's partitioning the code
8:23
into smaller pieces
to make it easier to read.
8:25
Yes, absolutely.
8:29
easier to read
8:31
easier to update and then of course
8:32
you know more optimized to run smoother
8:35
so okay it says we should be good to go
and then you'll try
8:39
creating a task
8:42
let's do it
8:46
okay so I'm going to create a new task
8:47
I'm going to do the same
8:52
excellent I'm going to call my task plan
8:53
a party
8:57
It's personal
9:05
And I will create that task
9:09
Alright it worked for me
did you add your task
9:14
I'm adding now Okay excellent
9:20
Oh wow it didn't Have to refresh
9:22
or anything The moment you Stopped up
It popped up.
9:25
Oh, man.
9:29
Yes. The moment you hit enter, it just,
9:31
we were there.
9:34
Matter of fact,
9:37
I was going to say,
if you could see it on your end,
9:39
but it'd just be the same thing as mine.
9:41
So, okay.
9:43
All right. So let's see.
9:46
Yes, we can create.
9:48
We can see all tasks displayed.
9:49
We can mark complete,
9:51
but that's not changing. Oh, it does.
9:54
It took a while for me.
9:56
It took a second for me as well.
9:58
Yep, it does take a second,
but it does work.
10:00
And if I, yep, I can read.
10:05
Yep, that's
what I was going to check as well.
10:09
Okay,
10:13
it deleted on my end,
but it said it failed to delete.
10:13
Oh, I think it's
because we both clicked it. Oh,
10:17
that makes sense.
10:21
That would do it.
10:22
All right.
10:24
So I think one thing
that we should probably check is editing.
10:26
So I'm not going to touch anything
right now.
10:30
I want you to click on edit
and see what happens.
10:32
All right. I'm going to click on edit.
10:33
OK, 404 page not found.
10:39
Did you forget to add the router?
10:42
OK so again
we start making these separate components
10:44
when the AI does this in refactory
those components have to be routed
10:48
So it knows to use those and on what pages
So there's a possibility.
10:52
It didn't do that.
10:58
Which makes sense
because we did not prompt it
11:00
to do that.
11:03
When I try to edit a feature
or edit a task,
11:08
I get an error.
11:12
and I'm just paste it right in
11:16
okay and that error
11:32
seems to be exactly what the issue was
the router wasn't connected
11:34
we have a route to the router
so it's doing that right now
11:39
it's modifying the endpoint
so I handle this update.
11:44
This is pretty cool.
11:47
And again, you don't have to understand
what all these means
11:53
API or patch endpoint.
11:57
It's doing all this on the backend itself.
12:01
So just let the AI do its thing.
12:03
And if there's ever a situation
where you want to know a little more,
12:05
just feel free to ask.
12:08
100% if I were building this
for the first time again
12:13
I would be going to chat GPT or a club
hey what does LSP error
12:19
in the mem storage mean
12:23
which is just a great way
12:28
to become a little more technical
if you consider yourself non-technical
12:29
and to just better understand
what's going on
12:33
all right
12:39
so it says to create a new task
it's finished
12:39
so we'll create a new task
and we'll keep using the plan
12:45
a birthday party theme
12:49
We'll stay
12:53
up till Saturday
13:01
Personal task and create the task
13:07
All right
13:11
So just to make sure
13:14
Okay, that still works
But does the edit work?
13:17
Edit does work Okay,
another birthday party
13:23
By tomorrow
13:27
Yep It worked
13:36
Wow One thing
13:38
I just want to quickly go in and fix
13:41
Is the dates.
13:44
So should we take a screenshot and then
tell them , hey, look at the dates.
13:49
The text is overlapping.
13:53
Can you make this more readable?
13:55
Absolutely.
13:59
That's a great idea.
13:59
Okay.
14:04
So I threw in a screenshot
and I'm just going to say
14:05
these
14:10
text labels for our date
14:11
picker are overlapping,
14:14
please fix this issue.
14:18
And I'm going to add
as shown in the screenshot
14:22
I provided.
14:27
all right
14:43
says it notices the issue
14:55
and it can fix it so by adjusting
the create task and edit task
14:57
so it's
going to do it now and see that's great
15:03
because it noticed in both components
it would have to fix it
15:05
because if we fixed it on the create task
and we went to edit the task,
15:09
that error could still be there.
15:13
So it's really nice that it noticed that.
15:14
It's doing a lot of work here
15:36
as far as changes.
15:38
And again,
15:47
all the red is everything that it did
built previously.
15:48
And in the fix, it's going to take out
the green is
15:51
what it's going to add.
15:54
Mm All right
16:02
it restarting the application
16:25
Took a screenshot.
16:29
It doesn't seem to be overlapping
in the screenshot.
16:30
So let's go ahead and
16:35
make this full screen.
16:37
We'll create a new task.
16:40
Plan a birthday party.
16:47
Personal.
16:54
And it's there.
17:00
We're back.
17:01
All right.
17:02
And if we go to edit this task.
17:03
Yep. It keeps the date looking exactly
17:07
as it should.
17:09
I think this is pretty cool.
17:21
I mean, what took us, what, 30, 45 minutes
last time
17:24
has been consolidated to,
17:30
I would say, 15 minutes of actual work.
17:32
Yeah.
17:35
Yeah,
I would definitely say because, again,
17:36
last time
we were just trying to get those main CRUD
17:38
operations going, you know, create,
read, update, and delete.
17:42
And we have all those.
17:46
We can create a task.
17:47
Task number two.
17:50
Oh, let's get some dates.
17:55
See, and that even has a date restriction.
17:56
So the date is required.
17:58
I cannot create a task
without picking a date.
18:00
category you pick a category
18:05
oh great deal great observation
18:09
oh I think that's a
18:14
minor issue is category
doesn't have asterisk next to it
18:16
to make it mandatory yeah and then we can
either make it not mandatory
18:19
in a future update or you know
just have an asterisk so it is required
18:24
but yeah so we created the task
we can read the task right here,
18:29
we can update the task, Asim-3.
18:33
It updates,
18:42
and we can delete it.
18:45
Yep, works perfectly.
18:49
Now, of course, we can continue to go on
and create a categories page
18:50
that shows our categories
18:54
and even gives the user
the ability to add more categories.
18:56
and then we can add that analytics page
with the graph and everything.
18:59
But, you know, you kind of seen
that built out in the previous build.
19:04
So I will leave that up to you
and let you kind of go at your own pace
19:08
to see what you come up with.
19:11
But I think this was a great,
great observation and a great
19:13
learning experience
19:20
to show people
what's possible with AI and show that
19:21
even a tool that you may be used
to can still give you some trouble
19:25
and then it can update
and be better than ever.
19:28
Yeah, and I think
19:34
because we ran into the first issue
19:35
in the previous video, it kind of shows
you the rapid growth of these AI tools.
19:38
And we were visibly frustrated with how
Repl.it wasn't producing what we wanted.
19:42
And now I think within four prompts,
19:48
I think, we were able to finish a very,
19:53
very single feature task
19:59
creation slash management tool.
20:01
if you were to polish this up even more
you would probably start adding
20:05
author authentication and logins
and then start
20:09
probably visualizing the data analytics
that you might want to see
20:14
but i think for now
dan said this is a perfect
20:19
place for you to
20:23
stop and really just sit here and say,
wow, you actually just did create
20:24
a full working app.
20:30
And that's something to be proud of.
20:33
Absolutely.
20:35
And just as Christian said, four prompts.
20:36
It went back and checked.
It was four prompts.
20:38
We built this.
20:40
And, you know, again, that's no time.
20:41
So be proud that you can do something
this.
20:45
Be curious. Explore.
20:50
Try different things.
20:53
and don't be afraid
if you run into issues.
20:54
Just, you know, try again,
create a new project.
20:56
There's several ways.
21:00
And then continue
to remember what we did in this project.
21:01
We gave it a PRD.
21:04
We told it to start small.
21:06
We text input some of the prompts,
but we also gave screenshots.
21:08
We showed it
21:13
visually what was wrong
21:15
and everything helped inform this project
we built.
21:17
and the same can be true for you.
21:21
So go out there and build something
amazing with Replit.
21:24
But that's not all.
21:28
In the next video, we're going to show you
how to deploy your project live to
21:29
the web. We'll see you there.
21:32
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