History Week 2017 — Angular App

History Week is an annual festival of historical events coordinated and run by the History Council of NSW. The History Council is a small not-for-profit organisation that works very hard to promote all sorts of history in NSW, from partnering with major cultural institutions like the State Library of NSW, to working with community organisations to promote history and give historians a way to communicate their work to the general public.

The TL;DR

I made a simple website that lists History Week Events using the newly released Bootstrap 4 Beta (i’ve been waiting for this to drop for ages!), Angular (v4) w/ the CLI, and Font Awesome, using AngularFire2 with Firebase as the backend.

The application takes a csv file exported from Google Sheets, parses the data and creates an event list.

This app is worth looking at if you want to see how to create a simple data driven website using Angular and Firebase.

See the website, or clone the repo on Github.


Making Lists

Everything on the internet is a list. Facebook and Twitter feeds, Google search results, even news sites now have their fair share of dot-pointed content.

The most important thing about a list is that you can scan through and get to what you want as quickly as possible. Each list item in this website is a Bootstrap Card component with a header and body, that has essential details for an event.

Workflow: from Spreadsheet to Database

The History Council staff had prepared a spreadsheet of all the events which I exported as a CSV and wrote a component which parsed the data and pushed each event to Firebase.

The most intricate part of this was dealing with values which contained commas — there were some other issues with formatting date and time values, as well as general consistency in the dataset for addresses and blurbs, but overall: writing a component which parsed the spreadsheet and pushed it to the database was much more efficient than creating a form for the staff to enter data manually. The only rule I enforced was no “” characters.

We used the following process so the staff could update the event details quickly and easily:

  1. Staff make changes or additions to the spreadsheet.
  2. CSV sent to me by email.
  3. Developer uses component to parse data (literally takes < 0.1 of a second)
  4. Data is live on the website.

Writing the component to parse the data was initially a bit of work for me to figure out the issue of handling commas within the values— but it was worth the time because it is a feature that can be added without much trouble to turn this into an application that can be continuously updated by the client themselves.

Filtering

There wasn’t anything remarkable about the sorting and filtering in this application. History Week events take place in many different regions across NSW, and a drop down was the simplest way to filter the events by region.

There were also requirements to show featured events, sort by date, and toggle sort direction.

I wrapped all this functionality into a single pipe.

Google Analytics

It’s critically important for an organisation like the History Council NSW to get numbers on usage and what events people were clicking on.

I followed a tutorial from Surfdew Software explaining how to integrate the Google Analytics (GA) library into Angular to push button click, filter change and sort events to GA. This was remarkably easy to do following the tutorial — but I’m hoping Google will release the GA library modularised in TypeScript soon.

Visual Design

I had the History Week 2017 banner to work from which set the colour palette. The rest of the visual design elements are from Bootstrap, with the exception of a few custom button background colours and hovers to match the colour palette.

The colour palette: #28512, #149F9C, #873C6D, #694477

I used the the Bootstrap responsive typography mix-ins and found these worked well to handle text size for mobile devices after a bit of tweaking.

Font Awesome is an excellent library for adding some visual interest. Even though I only used two icons fa-star and fa-map-pin these finish off the visual design nicely. The people behind Font Awesome are about to push out an update and have individual licences for $40. Definitely going to acquire one of these for future projects.


Would Be Nice: could make this better?

I had limited time to work on this and it was essential that the core function of an events list was fast, reliable, and that the visual design was right.

Adding authentication to the project was beyond the brief, but it would allow the following:

  • a simple back-end where an authenticated user can user an updated CSV file to update the data
  • a way for users to save their own list of events and view these across multiple devices

I think the simplicity of the design is a strong feature of this website, although it would be great if there was a “week view” that functioned as a filter. If this were to be made a more generic system, a calendar view to selected events by, week, month or day could be hidden in a slide out element beneath the filter/sort area.