Skip to main content

Issue Tracker App

Issue Tracker App sample photo

Issue Tracker App is a content management system (CMS) that allows companies to organize and prioritize the completion of tasks throughout the organization. I created this web app because some companies are still using pen and paper for their field workers while using a complex CMS for their office workers. This is a simplified and inexpensive version that will allow more companies to have the power of a CMS.

A company executive can create an account for the company. Once they've added their company, they can invite other users who will have different permissions such as creating/editing issues, commenting on issues, and even inviting other users and editing their permissions.

I originally wrote this app using the Laravel PHP web framework. I decided to rewrite it using the Ruby on Rails framework for the following reasons:

  1. To learn from my mistakes and develop a better workflow/process
  2. I learned the Ruby on Rails framework and I enjoy working with it
  3. I wanted an opportunity to use the Materialize CSS framework

  4. Last updated: June 14, 2017


Skills used:
UX design
Cucumber BDD
Purpose The purpose of this site is to create a simple and inexpensive CMS for companies to organize and prioritize the completion of tasks throughout the organization.
  1. Gain 2 new companies/month with an average of 50 users/company
  1. Promote the site in my social network
  2. Promote the site to community centers and property managers
  3. Give free demonstrations to managers

User Personas

NOTE: The following User Personas are based on interviews that were done in an informal matter. To protect the identity of the individuals, stock images were used to represent them.

Image of Sean the Shop Keeper Some days feel like Ground Hog day with the same problems
Sean the Shop Keeper

I would love to know:
  • What is causing certain issues
  • How often issues occur
  • How much the issues costs
Image of Owen the Operations Manager I often need to double check my staff's work
Owen the Operations Manager

I need to see:
  • Who is doing what
  • When things are getting done
  • Which locations have the most work
Image of Paula the Property Manager I like to keep a close eye on expenses
Paula the Property Manager

I need to track:
  • What work has been done
  • How much the work costs
  • How often this work occurs
  1. Buildium — A property management software designed by property managers
  2. Maximo — The world's leading enterprise asset management solution
  3. Property Vista — The technology you need to better understand your business and the tools needed to make changes.
  4. Greenhouse PM — Easy to use online property management application
Main User Stories
  1. As a logged in user
    1. I want to add an issue to a company so I can view it later
    2. I want to filter issues in a company based on criteria so I can find specific ones
    3. I want to search for issues so I can find the one I’m looking for
    4. I want to see key details about employees so I can understand who they are in the company
  2. As an admin
    1. I want to add users to the company so they can view and add issues
    2. I want to edit user roles so I can control what they can access
    3. I want to deactivate employees so they can’t access company resources

I like to build each feature as if it was going to be the last. This way, at any point during the development process, I can put the code on a live server with sample data and get user feedback (also known as Continuous Delivery). The following list should be developed in order of importance:
  1.   Legal pages
    1.   Terms of Services
    2.   Privacy Policy
  2.   Companies
    1.   A logged in user can add companies
      1.   User sign up
      2.   User login
      3.   User password reset
    2.   Whoever creates a company automatically becomes a company executive. Executives can edit/delete a company.
  3.   Issues
    1.   All issues belong to a company
    2.   A logged in user can add issues
    3.   Whoever creates an issue can edit/delete it.
    4.   Admins can can edit/delete any issue in the company.
    5.   Users can view all issues in the same company.
  4.   Help page has a contact form
  5. Users
    1.   Logged in users can view all users in the company
    2.   Admins can invite other users (not yet implemented due to email error that is now resolved)
    3.   Admins can edit other users' permissions
  6.   Home page
    1.   Hero image
    2.   Sections showing screenshots of the app
    3.   Brief descriptions for each screenshot
    4.   Call-to-Action (Free Sign up)
  7.   Autocomplete search (explained in Changes Made section)
  8.   Commenting
    1.   A logged in user can comment on an issue in a company they belong to
    2.   A logged in user can edit/delete comments they created
    3.   An admin user can delete comments on an issue within the company
    4.   A logged in user can view comments on an issue
  9.   Location/Department/Job Title (removed to meet deadline)
    1.   Admins can create/edit/delete any of the above
    2.   A company can have many of each of the above
    3.   An issue can belong to one or many of each of the above
    4.   A user can belong to one or many of each of the above
  10.   Activities
    1.   An activity is created when a user creates/edits an issue or edits another user's permissions
    2.   A sample of the most recent company activities are displayed on the home page
    3.   Admins can view a list of company activities (removed to meet deadline)
Behavior Driven Development Behavior Driven Development (BDD) is the act of writing feature specifications as a test, then writing code to make the test pass. Click here for a brief intro to BDD. I often prefer to type some of the key feature specifications in advance using Cucumber's user story style. I write them in a separate file just to help keep me focused on the most important features for the users. An example of a user story would be:

As a user
I need to create an issue
So I can keep a record of all company issues
Timeline From April to May 2017 (2 months). At this point, version 1 will be released and ready for public testing.


Skills used:
UI sketching
Mobile design
Responsive design
Materialize CSS
Information Architecture
Database Architecture
Database Architecture
Content Creation
  • Home page
    • Screenshots (separate set for smaller devices)
      • Note editor
      • Terms/Definition pairs
      • Note review
      • Quiz results
      • Sharing with community
      • A mobile view (on desktop only)
    • A description for each screenshot


Skills used:
Ruby on Rails
Cucumber BDD

Behavior Driven Development (BDD)

I worked by following the scope outlined above. This way the most important features were developed and tested first. I continuously ran automated tests using Guard, Cucumber-Rails, and RSpec Rails. This helps shorten the feedback loop between writing the test and writing the code to pass the test.

I use GitHub Flow for the following reasons:

  1. It's simple
  2. I'm a one man team (at the moment)
  3. I added a "staging" branch to test the apps in an environment similar to production


The Review process involves the following steps:

  1.   Spell-checking
  2.   Browser/device testing
  3.   Push to staging server
  4.   Link testing
  5.   Form testing
  6.   User feedback

Changes Made

You can always change your plan, but only if you have one.
— Randy Pausch

It is great to have a plan, but it doesn't always go according to plan. Here are some of the change I made throughout the process:

  1. Added the ability to filter issues and users by certain attributes.
  2. I had trouble with Elastic Search requiring more RAM on the production server. Users can substitute with the issue filtering panel until searching on the site becomes more in demand.
  3. Added "Guest" user role. This user can only view issues and make comments on them.

Lessons Learned

Ultimately there is no such thing as failure. There are lessons learned in different ways.
— Twyla Tharp

  1. The importance of planning
  2. Keep it simple first, iterate second
  3. Find feature alternatives when one feature might take too long to implement