Skip to content

Introduction

We have covered a lot of theory, but we have finally made it to our first “real” application build.

A lot of people (myself included) create todo application tutorials when explaining some new technology or framework, the reason for this is usually because a todo application covers most of the basic things you would want to do in an application, for example:

  • General structure & setup
  • User interface
  • Creating, reading, updating and deleting data
  • Accepting user input

These are all obviously important concepts that need to be covered (and we already did create a very simplified version of a todo app), but I really wanted to avoid building a standard todo application for our first proper application build. I wanted to do something that was just a little bit more complex and interesting — to start getting exposed to some of the more tricky situations you run into in real-world situations. The result is pretty similar and covers the same bases as a todo application would, but I think it’s a little more fun to build and cranks up the complexity just a little bit.

About Quick Lists

The idea for Quick Lists came from a personal need of mine from when I was working remotely and traveling around Australia in a caravan (I think people in other parts of the world would refer to this as a “trailer” or “camper trailer” or “motor home”). It’s certainly a great experience, but essentially lugging your entire house around the country (and it’s a big country) every week or so comes with some complications.

One particularly complicated thing is packing up and hitching the caravan to the car, as well as unhitching the caravan and setting it up. I won’t bore you with the details, but there are at least 20 or so different things that need to be done and checked each time. Some are inconsequential, but some are really important like making sure the chains are attached securely to the car, that the gas is off, and that the brakes and indicators are working.

I decided to create an app where you could create “pre-flight” checklists. The checklists would contain a bunch of items that you could check off as being done — a repeatable todo list application in a sense.

As I mentioned, this application covers similar concepts to what a traditional todo application would. Specifically, the main concepts we will cover are:

  • Complex Lists
  • Data Types / Interfaces
  • Forms and User Input
  • Simple Navigation
  • Passing Data Between Pages
  • Creating, Reading, Updating and Deleting Data
  • Data Storage and Retrieval
  • Theme and Styling

Here’s a quick rundown of the exact features of the application:

  • The user can create any number of checklists
  • The user can add any number of individual items to any checklist
  • An item in a checklist can be marked as complete or incomplete
  • The user can edit or delete any checklist or items in a checklist
  • The user can “reset” the completion state of an entire checklist with one action
  • All data will be remembered upon returning to the application (including the completion state of checklist items)

Ready?

Now that you know what you’re in for, let’s get to building it!