M

Loading languages...
Web Platform

InTasks

Author

Mateus Marins Pina

Date Published

InTasks on a laptop

What is InTasks?

InTasks is the system an agency runs its week on: clients, projects, tasks, hours, contracts and invoices in one place.

I designed and built it alone. It runs in production at a paying agency, with two dozen clients managed inside it.


InTasks — project board

The problem

Agencies usually stitch this together from four tools: a task board, a time tracker, a spreadsheet for contracts and an invoicing service. Every month someone reconciles them by hand, and hours get lost between the board and the invoice.

The approach

One data model from task to invoice. Time is logged on the task, the task belongs to a project, the project to a client — and the contract on that client generates the invoice on its billing day and emails it.


What's inside

  • Tasks with subtasks, dependencies, attachments and comments, in table or board view
  • Time tracking against estimates
  • Recurring contracts with billing day and monthly competences
  • Invoices with instalments, payment tracking and client notification
  • A financial area: payables, recurring expenses, cost centres and cash forecast
  • Brand identity per client — colours, logos, tagline
  • Mattermost notifications and an integration API

InTasks — task with subtasks and dependencies

InTasks — invoice

Design

It's a tool people keep open eight hours a day, so the interface stays out of the way: one accent colour, a tight type scale, and states you can read at a glance — overdue, today, this week. Dense where the work is dense, quiet everywhere else.


InTasks — projects list

InTasks — client brand identity

Screens show demonstration data. Client information stays private.


Technologies and tools used in this project

Next.js logo

Next.js

TypeScript logo

TypeScript

React Logo SVG

React

Node.js logo

Node.js

Prisma logo

Prisma

Figma Logo SVG

Figma

Next.js logo

Next.js

TypeScript logo

TypeScript

React Logo SVG

React

Node.js logo

Node.js

Prisma logo

Prisma

Figma Logo SVG

Figma

Next.js logo

Next.js

TypeScript logo

TypeScript

React Logo SVG

React

Node.js logo

Node.js

Prisma logo

Prisma

Figma Logo SVG

Figma