App 3: Time Tracker

NOTE: It's WIP! Routing, Auth0 authentication and GraphQL queries/mutations + Slash GraphQL backend + most views are done (at the time of writing). Authorization, mutations and SCSS compilation are todos. But It should already give you an idea how to design, architect and write a relatively large app.

Live Demo | Repository

  • Email address:
  • Password: Password1


Let's write something more useful - a real Time Tracker with user accounts and full backend integration! Step-by-step from motivations and design to backend and deploy.

You'll learn:

  • To architect a relatively large app (frontend + backend).
  • To write Seed modules/components.
  • Advanced routing, link building and how to change a base path.
  • To work with global state / context.
  • Call Javascript functions from the Rust world.
  • When to use Seed's notify/subscribe mechanism.
  • Fire & handle Fetch and GraphQL requests.
  • About JSON Web Tokens.
  • How to integrate SASS, Bulma and Font Awesome.
  • To define Slash GraphQL backend.
  • Setup and integrate Auth0.


I work as a freelance Rust developer to pay my rent while I'm working on Seed. I send an invoice per x hours of work to my clients.

And I want:

  • To know when I should send a new invoice - i.e . when the next time block of x hours will be reached.
  • Mark previous time blocks as paid or unpaid.
  • Link a time block to the associated invoice. I use(d) services like toggl or Clockify but the features mention above have been often missing and I don't need the most of built-in features.

I think this example will be easily customizable to meet your requirements. And the most of us use or at least know a time tracker so we won't need to explain some unfamiliar and complex logic and terminology.

The example should also demonstrate how to implement basic auth logic - registration & login.

Tip: We should always identify what are the problems we want to resolve before we even start to think about our new app.

We have a rough idea what we want to build. Let's add more details in the next chapter.