Carbon Monitoring SaaS
A B2B carbon monitoring SaaS built in a 5-member team. I worked across UI/UX and frontend engineering: role-based workflows for Admin, Master, and User, a 4-step onboarding flow, and the REST API integrations that power them.
- Role
- Software Engineer / Frontend Engineer
- Year
- 2026
- Fields
- Frontend / UI / UX
- Stack
- React
- TypeScript
- Vite
- REST API
- React Router
- React Hook Form
- Zod
- Zustand
Professional work — details kept general.
What shipped
Role-based dashboards
Admin, Master, and User each get workflows shaped to their responsibilities, behind protected routes.
4-step onboarding
Company & personal information, methodology & equipment, confirmation, completion — a guided path instead of one intimidating form.
Validated business forms
Complex fields are checked against Zod schemas at the edge of the UI, so bad data never reaches the API.
REST API integration
Dashboards and workflows are wired to the API layer with typed request handling.
What changed
- Role-based workflows shipped for Admin, Master, and User.
- The 4-step onboarding flow takes a company from registration to first use.
- Complex methodology and equipment forms validate before submission.
- Delivered as a 5-member engineering team.
Process details
One product, three kinds of user
Admins, Masters, and Users each see the same product differently — different dashboards, different permissions, different next steps. The interface had to keep all three coherent without becoming three separate apps.
The deeper difficulty sat in the business forms. Companies onboard through a 4-step flow — company and personal information, methodology and equipment, confirmation, completion — where every field feeds downstream calculations. Weak validation here would poison the data the whole product depends on.
Roles, a guided onboarding, and forms that refuse bad data
Workflows
Role-based routing and protected views
Each role lands in its own workspace. Protected routes and role-aware navigation keep the Admin, Master, and User flows separate while sharing one design system.
Onboarding
A 4-step path from signup to first use
Company and personal information, methodology and equipment, confirmation, completion. Each step explains what it needs and why, so a complex registration never feels like a wall of forms.
Engineering
Validation and state that survive complexity
React Hook Form paired with Zod schemas validates business rules before anything reaches the API, while Zustand keeps cross-step state predictable.