But we're going to start off by just pushing a new note to the stack. We don't have any kind of storage in place at the moment. We're going to be using local storage for that later. But let's look at doing that and then just dumping our list of notes out on the page.

Now we don't even have Alpine pulled in at the moment. So I'm going to go ahead and grab version 3 just here. Let's go up to the top of the page and we'll just put that in the header. So now we have Alpine pulled in.

Now, of course, at the bottom of the page, just after our wrap-up for our entire design, we can go ahead and create a script tag out just here. And let's go ahead and start to listen for Alpine initializing. Remember, if you've watched the series on state management,

we need to go ahead and add an event listener to our document, which is Alpine, and init. So we need to wait for Alpine to initialize. And then this closure that we run, we will now have access to Alpine, which we can then use to define out a store.

So if we do this outside of this event listener, it's not going to work. So we wait for Alpine and then we define a store. This store is just going to be called notes. And it's just going to be an object inside of here.

So we are going to start out with some data, which is just going to be our state. So let's go ahead and just add in an array inside of here to start with. Now, when we initialize this store, which can be done with the init method, similar to normal Alpine components, this is where we want to go ahead and create a new node.

So just to get started with, just to make sure we're on the right track, let's just go ahead and say create node inside of here. If we come back over, close this off, give this a refresh, make sure we open our console here.

Sure enough, we see create node dumped out. So this is where we can start the process of creating a new node. Now, we're not going to do this all in here because, of course, creating a new node doesn't just happen on initialization.

It happens when we click the new node button. So let's go ahead and call a create node method out in here. And then let's just go ahead and define that. So create node.

And of course, this is just a standard function. And we can do something inside of here to actually create a new node. So let's, before we do that, go right up to the top of our wrapper and just dump out what we see inside of our state.

So I'm going to go ahead and make this span a Alpine component. And we're going to go ahead and use X text. In fact, it'd probably be better to set up an init method in here. So let's do that now, just so we can kind of keep an eye on what we're doing.

Let's pull this down. And let's go and inside of this object, say init, and let's console log in here on this store and notes and data, just so we can see what's in there.

If we give that a refresh, we just end up with an empty object in here or an empty array. And that's pretty much it. But now let's create a new node on the initialization of this.

So let's think about the kind of data that we're actually going to need for a node. We'll kind of map it out here first. So a node's going to have a unique ID. That's really, really important.

We'll figure out how to generate that in a second. The other pieces of really important information, of course, are a title and a body. So let's go ahead and just say ABCDEF.

And let's go over and just give this a refresh. So sure enough now, the array inside of here has that item that we have just set initially in here. But we don't want to do that directly in here.

That's going to come from our local storage for nodes that have already been saved. So let's think about how to generate an ID. We're going to do this in a really, really simple way and just use DateNow. Not the best solution.

There are lots of different ways that we could do that. A UUID would be better, or if you're storing this in a database, of course, using the primary key you get back from your database. But let's just roll with using DateNow, which will just be the current timestamp.

So now let's say this data. And, of course, what we want to do is add it to the list of already included data. So let's go and just define out an entire array that we're going to replace with this data. Inside of here is going to be the new node, just inside of this object.

And then what we're going to do is spread in the existing nodes. If that doesn't make sense, we'll take a look at that in a second. But let's add that ID in here. And let's add the title in, which is going to be an empty string,

and the body in, which is going to be an empty string as well. So effectively what we're doing, generating an ID, constructing a new array with the existing nodes inside of data, plus an additional node with the ID, the title, and the empty body. So let's go over now and just give that a refresh.

And we should end up with an ID of the current timestamp, title, and empty body. So that's working really, really nicely. So that's pretty much all we're going to do inside of there for now. And we now have our first node created.

Now, of course, a really, really important thing to figure out here is we don't want to create a node if there are already nodes in the stack. So I'm just going to add a node here because we're going to use a getter to grab the length a little bit later. So don't create node if nodes exist, basically. And we could do that really simply in here to start with, actually, just by checking the data that we've already got.

So we could say this data length. So if we have a length in data, don't do anything. Otherwise, go ahead and create a node. Now, the reason I've set it up like this is because inside of here,

what we're going to have to do is set the current node to the first item in that nodes array, which might not make sense at the moment. So essentially, if we do have nodes, set the latest node inside of the current node, which we can then edit. Otherwise, just create a new node.

So let's kind of leave it like this for now, just so we've got that node in there. And, of course, what that's going to do, because we start out with no nodes, is give us an initial empty node. But we'll leave it like that, and we'll come back to that in a second, because that is not going to make too much sense at the moment.