Simple List

Overview

Context

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.

Milestones

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

Design of ui complete

Technical architecture complete

App created

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

Screens

The user interface is composed of two screens: list, and addnewitem.
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.

Interactions

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.

Animations

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.

Store events

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.

Routing

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.