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

  • Note: SPA frameworks usually don't like font libraries very much because those libraries often changes DOM elements by themselves. We'll leverage custom elements to eliminate this problem while we will be integrating Font Awesome.

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.