Hometown Heroes

Harrison County Historical Museum War Memorial
(AKA “papadex”)

Community war memorial database, complete with admin section, built using Meteor JS.

Background

I had already worked with Musework LLC on the Varner-Hogg project when they approached me about making an online war memorial database for the Harrison County Historical Museum. I had dabbled some with Meteor JS, one of the app development frameworks that the cool kids are using, and this seemed like a good fit since database connectivity is baked into it.

Musework has already been working with the Harrison County museum to create an exhibit detailing the county's history. This new piece will be a touchscreen kiosk where guests can see pictures and read stories about members of the community who have served in the military. They will also be able to create new entries for loved ones who have not yet been included.

Fresh from enjoying the documentary features chronicling the creation of Double Fine Adventure's “Broken Age” which had the codename “reds”, I wanted our project to have a fun codename that we'd use in our correspondence. We didn't know what the final name would be, but we knew people would want to add entries about their dad's involvement in this or that conflict to our rolodex-style database, so Angela coined the term “papadex!”

Angela, Musework's CEO, had some pretty clear ideas about what screens the users should see and how they should work, so I took those ideas and made wireframes of the proposed app.

Two Versions

From the get-go, things were interesting because we wanted two versions of this app, once which would appear on the touchscreen kiosk within the museum, and one which users could access at home on their computers. The kiosk would not have a mouse or keyboard present, just the touchscreen, so any data entry would have to happen via an onscreen keyboard, but this onscreen keyboard would be unnecessary and undesirable for viewers using their computers (or phones or tablets) at home. Also, certain features such as photo upload should be available at home but not at the kiosk.

Layout

One other obvious difference is that I am developing the app using the very touchscreen which will be on display within the museum, and we can adjust the layout very precisely to look just right on this 1920 x 1080 screen. But I'm also making the app responsive so that when folks view it at home at different screen sizes, it will still function and look good at any resolution. That takes a lot of work!

Design

With Angela's help, I figured out the basic layout (e.g. what kind of info should go where on a person's profile page, how will the search results be displayed when browsing by service, etc.) and then started building the templates that would display the various “screens.” Once the app had all the parts completed and functional, I turned it over to Megan Harvey, who does fabulous visual design work for Musework, and she made it all look beautiful. I'm still working (as of Dec. 2016) on applying the “skin” that Megan has created to all parts of the app.

Features

The following features are present:

  • Search by name (first and/or last)
  • Search by service (which conflict, or during peacetime)
  • Create new profile
  • View individual profile
  • Add memory (text or photo) from within an individual profile
  • Photo gallery
  • Admin section

Admin section

By design, the app does not feature a user account system. We wanted folks to be able to simply add information to this database without necessarily giving personal info or creating yet another online account. The app does use a user account system, however, to restrict admin access to a few specified individuals. I'm using the yogiben:admin package for meteor to create this section, and it has certainly made most things easier, but there has been some collateral damage (due to its dependence upon a different version of Twitter Bootstrap than the one I'm using) that will make me hesitate to use it again.

Current Prototype (Dec. 2016)

As is typical of responsive designs, the CSS is set up to adjust font sizes and layout at certain width thresholds. The white text up at the top (“@largedesktop”, “@tablet” etc.) lets me know what range the display is currently using. If you resize your browser window, you'll see that text change (as well as the layout).

I'm including a link to our current, live, prototype but please keep in mind that big chunks of it are not yet adjusted to the new skin and might be temporarily broken. Plus, other parts are not set to respond well at different screen sizes and you'll probably see dual scrollbars in places. I've deployed this version at modulus.net so that we can start the iterative process of adjusting the design and layout.

The current profiles and photos and such are all randomly and artificially created. We don't have any real profiles up yet, which is why the text is gibberish and the photos are not what you might expect!

Hometown Heroes (prototype)

Skills used: JavaScript Meteor(JS)

This page last modified: June 03, 2019