Build a Notes App with Alpine.js
Playing
01. Introduction and demo

Episodes

0%
Your progress
  • Total: 55m
  • Played: 0m
  • Remaining: 55m
Join or sign in to track your progress

Transcript

00:00
In this series we're building out a fully working Notes app with AlpineJS and we're heavily leaning on Alpine's store functionality just to keep everything nice and tidy. If you've not worked with Alpine's store before and you want to learn more,
00:14
we have a series on that as well so you can catch up on that so you can grab the basics before we dive into this practical project. So let's take a look at how this works. When we first land on the Notes app we get an untitled note created for us instantly, so we've got something to start typing. So I'm going to go ahead and say this is a note
00:34
and you'll notice a couple of things here. The first thing is the title is kept up to date, that's thanks to the functionality of Alpine's store and also the date which this was last edited. So two minutes ago this note was created, now I've just started to edit it, the time has been updated. Now we can also update the body as well which is represented
00:55
here and that's truncated after a while. So if we go ahead and just keep typing you can see that eventually that's going to go ahead and just end there so we don't end up with the entire body of the note. Now with this we can go ahead and create a new note as well of course. What that's going to do is create a new untitled note for us, put it into this kind of editor view or we can click on
01:16
this and switch between them and we can just start typing a new note in here again with the body. And again we can switch between these notes that we've created, so everything is nice and convenient. Now what you'll also notice is that we're using a getter here to order these notes, so we'll look at that in the series as well of course. So if for example I update this note down
01:36
here, you can see that I just typed, this is pushed to the top so the latest note that you have edited will always be at the top of the list. Now everything that we're doing here is not hitting an API just yet, this is being stored in local storage. You could convert this over to hit an API but as you can see when I refresh the page we end up with the same notes on the page as well.
01:58
And of course we've also got state management so keeping up to date with how many notes there are is also really really easy as well. So what happens when we delete a note? Well the first thing is we get a little confirmation dialog in the browser, of course that could be better, but we hit okay, that's going to go ahead and delete that note for us and we can delete pretty
02:17
much all of our notes down to the last note. And when we do delete our last note what that's going to do is just create an empty untitled note for us to start typing, so we always end up with a note inside of here. So a pretty standard note editor but it's lots of fun to build and along the way we're going to learn about Alpine stores.

Episode summary

Welcome to the series! In this introduction episode, we kick things off by showing you exactly what you’ll be building: a fully functional Notes app using AlpineJS. The entire project leans heavily on Alpine’s store functionality, which helps us keep things organized and manageable as our app grows.

If stores are new to you, don’t worry—we mention a separate series you can check out for the basics before diving in. But in this demo, you’ll see how the finished app works: when you load the app, you instantly get an untitled note ready to go. Start typing, and you’ll notice the title updates in real-time, and there’s a timestamp showing when your note was last edited. The body of the note gets truncated in the preview, so long notes don’t clutter up the interface.

You can create new notes, switch between them, and thanks to a handy getter, the notes list automatically keeps your most recently updated notes at the top. All the data stays in local storage for now, so your notes persist even if you refresh the page, though you could swap out for an API later. There’s even a confirmation dialog when you delete a note, and the app ensures there’s always at least one note to work with.

Throughout the rest of the series, we’ll break down how to build all these features (and more) with Alpine stores, so you’ll get a really practical look at state management in action!

Episode discussion

No comments, yet. Be the first!