To-Do Tracker Website Overview

Contact Manager

one page css

Click here to use the app.

How it Works

User credentials and contact data are stored in YAML files and converted into ruby. The contact data is represented by a nested hash, four levels deep. The RACK_ENV variable isolates testing and development (and potentially, production) environments to preserve data integrity. File#expand_path determines the file path accordingly. When contacts or categories are altered or deleted, the data is stored in a session object and an undo button appears. Success/error messages and commentary are also stored in the session.


  • Account registration is required before using the app.
  • A JavaScript file allows users to toggle a "show password" checkbox during account registration. Passwords are encrypted with the BCrypt RubyGem before storage.
  • Input validation rejects duplicate usernames, categories, and contact info. The user may leave either the phone number or email address blank for a contact, but not both. No other blank values are permitted. Regular expressions verify that data is formatted properly.
  • Tables, grids, and a flexbox help to position content.
  • While a fluid page design is in the works, media selectors specify a single breakpoint currently.


  • Originally, I validated phone numbers with the RegExp /\A(\+\d{1,6})?\(?(\d{3})?[\)\.-]?\d{3}[\.-]?\d{4}\z/. This still allowed the user to enter a phone number with any combination of ( ) - and . to seperate digit segments. For example (###-###-#### and ###-###.#### were still valid. To solve this, I switched to the longer RegExp /\A(\+\d{1,6})?(\(\d{3}\)|\d{3}[-\.]?)?\d{3}[-\.]?\d{4}\z/ and performed additional checks within the validating method.
  • It was quite confusing determining how to override specific errors in mutually exclusive scenarios (empty phone vs. email) while continuing to flag all other errors. Specifically, it was tough to do so without a very long conditional statement.

Source Code: Github

To-Do Tracker Website Overview