← All work
Project 09·Admin dashboard · Figma to code
Database Tasker System
Admin dashboard built from a Figma design
Next.jsTypeScriptTailwindRechartsSupabaseZodNode.jsVercelTasker Dashboard

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
- Dashboard with Recharts charts
- Metric cards for Projects, Active Accounts, Active Taskers and Hours Today, with a Day, Week, Month and Year range
- Projects, accounts, taskers and timesheet pages
- Data entry that is saved and flows into the dashboard
- Supabase storage and schema validation with Zod
- Figma design converted to code
- 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