Professional · Maxbot
Rebuilding a SaaS platform with Next.js
New Product and Sales capabilities on top of a legacy rebuild.
- Role
- Full Stack Developer · Frontend Focus
- Period
- Aug 2025 — Present
- Company
- Maxbot
- Status
- Product & Sales
- React
- Next.js
- TypeScript
- React Query
- Zustand
- React Hook Form
- Zod
- Tailwind CSS
- shadcn/ui
- REST APIs
- WebSocket
01 / Overview
I work on Maxbot V5, the Next.js rebuild of an existing multichannel customer service SaaS platform.
A large part of my work involves rebuilding interfaces that already existed in the legacy system while improving their structure and maintainability.
I also work on new Product and Sales capabilities that were not available in the previous version, including product management, sales registration, quotes, payment settlement and product and media import flows.
02 / Context
Working between legacy and new.
V5 is being built on a modern frontend stack while the existing product and backend continue to evolve.
That puts the work between two realities: preserving business rules and workflows users already depend on while also introducing new Product and Sales capabilities that did not exist before.
03 / Challenge
What made it hard.
Rebuilding a screen is easy to underestimate. The layout is usually the smallest part.
The real work is understanding existing rules, integrating with the API, handling states and validation, and rebuilding the interface in a component structure that can also support new Product and Sales flows.
04 / Role
My role.
My main responsibility is the frontend: implementing interfaces, structuring reusable components, managing client and server state, and integrating the application with REST APIs and WebSocket.
I work closely with the backend developer when defining contracts, adjusting flows and connecting new features to the API.
05 / Work
What I actually built.
Product module
Product registration and listing, including forms and flows connected to product and media imports.
Sales module
Sales registration and management, quotes and payment settlement — flows that were not available in the previous version.
Imports
Product and media import flows, including validation, feedback and error states for bulk operations.
Data-heavy UI
Reusable tables, filters, pagination, forms and upload patterns shared across Product and Sales.
Shared application foundations
Authentication, internationalization, notifications and reusable components shared across modules instead of being implemented independently on every screen.
API integration
Integrating REST APIs and WebSocket features while working closely with backend development, especially when new flows require adjustments on both sides.
Frontend
Maxbot V5
React / Next.js
React Query
Remote data
Zustand
UI state
REST APIs
Backend services
Product
- Product list
- Product forms
- Product import
- Media import
Sales
- Quotes
- Sales
- Payments
- Forms
A conceptual view of the frontend I work on — not the official product architecture.
06 / Engineering
Decisions I would still make.
Preserve the rule, improve the implementation
When a legacy flow already represents a valid business rule, the goal is not to redesign the domain. I keep the rule and improve how the new interface represents and implements it.
Reuse patterns, not entire pages
Product and Sales share tables, forms, validation and upload behaviors. Creating reusable primitives for those patterns makes new screens faster to build without forcing unrelated pages into the same abstraction.
Server state and UI state solve different problems
React Query handles remote data and cache. Zustand is used for UI state that needs to be shared. Keeping those responsibilities separate makes synchronization and cache invalidation easier to reason about.
07 / Stack
- React
- Next.js
- TypeScript
- React Query
- Zustand
- React Hook Form
- Zod
- Tailwind CSS
- shadcn/ui
- REST APIs
- WebSocket
08 / Impact
What changed.
V5 is still in development, so I do not attach performance or adoption metrics to this work yet.
The concrete result so far is a new Product and Sales surface built in Next.js, including product management, sales, quotes, payment settlement and import flows that were not available in the previous version.
09 / Learned
What this work taught me.
Understanding the domain comes before improving the interface
Rebuilding an existing product forces you to understand the domain before improving the interface. A cleaner UI means little if important business rules are lost during the migration.
Shared patterns matter more as a product grows
When Product and Sales share tables, forms, validation and import behaviors, reusable primitives make the application easier to evolve.