Let's design app's pages.

Included pictures below are basically ugly mockups with some missing component states where some parts are just copy & pasted from Bulma's docs. However it should be enough to guide us during implementation.



  • URL: /
  • It will be used only as a crossroad. There could be simple button "Go to Time Tracker" as a CTA / shortcut.
  • No item in the main menu is active.
  • If the user isn't logged in, show buttons "Sign up" and "Log in".
  • If the user is logged in, show buttons "[user_name]" and "Log out". The former navigates to the page Settings and the latter one redirects to the identity provider.
  • Bulma logo will be replaced.
  • should be a link.
  • Themes / colors may be changed later.

Design Home

Login / Registration

User Management

  • It will be also handled by our identity provider. Auth0 User Management

  • Docs:

  • Note: I didn't find a way how to delete user's data automatically when the user is deleted through Auth0 user dashboard (by a trigger, rule, webhook, ..). You'll probably need to delete it manually. (Am I wrong? Write me!)

Clients & Projects

  • URL: /clients_and_projects
  • User can add, remove and rename his clients and projects.
  • All removing operations should be confirmed by a simple modal dialog box. We'll use ugly browser native one for the sake of simplicity.
  • Client and project names are in-place editable.
  • A trash icon would be probably more appropriate than a standard Bulma's delete button with the "X" icon.

Design Clients & Projects

Time Tracker

  • URL: /time_tracker
  • User can create new Time Entries through "Start/Stop" button.
  • When the Time Entry is active, its background is highlighted and its "end" time is updated each second to match the current time.

Design Time Tracker

Time Blocks

  • URL: /time_blocks
  • User can add and modify Time Blocks.
  • All statistics are automatically recomputed and read-only.

Design Time Blocks


  • URL: /settings
  • It'll communicate only with our identity provider. (An exception could be deleting an account.)
  • We don't need it at all if our IDP offers its own user settings.

Design Settings

Architecture and UI are designed, the next step is the frontend Model.