← All work
Project 09·Admin dashboard · Figma to code

Database Tasker System

Admin dashboard built from a Figma design

Next.jsTypeScriptTailwindRechartsSupabaseZodNode.jsVercelTasker Dashboard
Database Tasker System interface
RoleTasker Dashboard
StatusLive
StackNext.js, TypeScript, Tailwind, Recharts, Supabase, Zod, Node.js, Vercel

01The problem

Teams tracking projects, accounts, taskers and timesheets needed one dashboard instead of separate sheets.

02The approach

Converted a Figma design into a Next.js dashboard, component by component, with charts for the numbers that matter.

03What I built

  1. Dashboard with Recharts charts
  2. Metric cards for Projects, Active Accounts, Active Taskers and Hours Today, with a Day, Week, Month and Year range
  3. Projects, accounts, taskers and timesheet pages
  4. Data entry that is saved and flows into the dashboard
  5. Supabase storage and schema validation with Zod
  6. Figma design converted to code
  7. Deployed on Vercel

04What changed

  • Data entered in the app stays saved and updates the dashboard figures
  • Teams see projects, accounts, taskers and hours in one place instead of separate sheets
  • Figures can be viewed by day, week, month or year
  • The interface follows the Figma design closely