Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
204 lines (125 sloc) 7.3 KB

Simple List

Developer: Justin Taylor


A ridiculously simple, zen todo list app that uses badges to indicate item priority.


This project is necessary to further my understanding of software design processes. It gives me an opportunity to continue learning and to gain experience in developing programming projects. This specific project was chosen to improve my knowledge of Vue.js and improve my understanding of software design documents. Ultimately, the goal is to make myself and my skillset appealing to potential employers, so that I can gain employment in the industry.

Goals (and non-goals)

Must have

  • Test driven development;
  • Well documented development process, including the design document
  • Utilizes a popular front end framework
  • Front end only, the app doesn't need a server.

Should have

  • The ability to work on both mobile and desktop as a PWA

Could have

  • Publishable to Google Play store

Won't have

  • Any form of server/backend. Strictly browser storage.


A breakdown of the project into a list of measurable and timed checkpoints.

  1. Design of ui complete
  2. Technical architecture complete
  3. App created
  4. App published to app store

Current solution

Currently, I use a pen and paper, with Google Keep.

Proposed solution

Technology used

Ok, so it's going to be built with:

  • Jest for unit testing
  • Vue.js with single file components
  • Vue Router for the minor amount of routing needed
  • Webpack for bundling
  • Github for version control, and for hosting the final app.

User Interface


The user interface is composed of two screens: list, and add new item.
The list screen is composed of three sections:

  • The heading, composed of the day and below that the date

  • The to be done list, composed of tasks that have yet to be done

    • Inline with the heading of this section is an icon button with an add icon. This opens the add new item screen.
  • The completed list, composed of tasks that have been checked off

    • Inline with the heading of this section is a clear list icon. This clears the completed items list.

The add new item screen is composed of:

  • A heading reading "Add new item", and

  • The input controls:

    • A text input with the placeholder text "New item"
    • A dropdown box with the following urgency options: today, tomorrow, eventually
    • A button with the text "Add item", and a relevant icon

The Item component

The item component is composed of a rectangular badge containing the urgency of the task, and a brief text description of the task.

Urgency badge

The user is able to assign an urgency to the tasks at time of creation. There are three levels:

  • Today

    • This urgency does not change if the task remains in the list over several days.
  • Tomorrow

    • All of the Tomorrow tasks will be reallocated with Today badges when the day after their creation occurs
  • Eventually

    • Like Today , these do not change based on time elapsed.


The user taps/clicks the item to check or uncheck it. Checked items are automatically moved to the Completed section, and unchecked items back to the To be done section.
A checked item has the text element of it struck through. The badge remains unchanged.


The check/uncheck interaction is animated, with the strike through line appearing to run from the centre of the text outwards over the course of 0.25s or so (time persuant to testing).
Moving the item from one section to the other is smooth, and animated, not performed instantly. The timing is fast enough to not distract/delay the user in his usage of the app. The actual animation will be fade out/fade in.

App architecture

There are several discrete elements in the app architecture: The data store, event bus, routing, PWA functions, and the vue components themselves.

Data Store

The data store listens for events dispatched by the event bus, and updates the store accordingly. The Vue root element watches for changes to the store, and rerenders components as necessary. Any change to the store also results in a sync function being called. This function saves the store to local storage for persistence. Two storage keys are used:

  • listDate: contains the stringified date the list was last accessed. This is updated only after any tomorrow badges are updated.
  • listItems: contains a stringified JSON object containing the list items.

Contents of the store

The store contains the following items.

  • List items. Each item is an object that contains:

    • badge type (1,2,3),
    • item id (timestamp generated at creation).
    • item text
    • completed (true, false)
  • List date. Used for the header day/date. It's also how the app knows whether or not to change the badges on the tomorrow items to today (If current date is > list date, then change)

Store events

The data store has event listeners for the following events.

  • item-tapped - Inverts a specified item's checked status. Takes an item id.
  • clear-completed - Clears the store of item objects whose checked status was set to true. Takes no parameters
  • add-new-item - Takes urgency and description and adds a complete list item to the store

Store methods

The store methods categorised by the lifecycle hooks they run under

  • beforeCreated

    • Load data - This function checks for data in local storage, and returns an object containing the found data, or empty placeholders.
    • Update badges - Takes an object containing two keys, one a list date, the other a list of items. It returns a list of items whose badges have been updated (changing tomorrow badges into today badges).
    • Set date - Sets the day and date key in the store to the current date.
  • created

    • Save data - This function saves the contents of the store to local storage. It uses two keys for storing the data.

Event Bus

A second root Vue instance named EventBus is used to dispatch events resulting from user interactions. Event listeners for these events are stored in the root Vue app instance, along with the methods that interact with the app's datastore.
When an event listener is triggered, it modifies the store and the Vue instance rerenders any affected components. Events can be dispatched with or without additional data.


There are two routes in this app: /list and /add-new-item. The router detects changes in the route, and mounts the correct component to a root #app div.

Vue Components

The component structures for this app are as follows.

  • List

    • Heading
      • Day
      • Date
    • To be done
      • Title
      • Add new button
      • List Items
        • Badge
        • Text description
    • Completed
      • Title
      • Clear list button
      • List Items
        • Badge
        • Struckthrough text description
  • Add New Item

    • Heading
    • New item form
      • Text input
      • Urgency dropdown
      • Add button
      • Cancel button

PWA functions

Scope and timeline

The breakdown of how and when you plan on executing each part of the project.

You can’t perform that action at this time.