Real client, real operations
The application had to support an active business, existing domain and day-to-day contact workflows rather than a portfolio-only environment.
Case Study · Production Client Project
Manolo Contabilidade
How an accounting firm's website became a production web application that combines institutional content, SEO, intent-based lead capture, guided pre-service and operational safeguards for a real client.
Next.js 14production web application
7intent-specific lead contexts
3preferred return channels
JSONLserver-side lead persistence
01 / Client context
Client context
The project modernized the public digital presence of a Brazilian accounting firm. The goal was not only to refresh the interface, but to create a website that could explain services clearly, support local discovery, capture qualified demand and fit the operational reality of the client's hosting environment.
02 / From brochure to working system
From brochure to working system
A service website becomes more valuable when it reduces friction before the first human conversation. The engineering challenge was to connect content, user intent and lead capture without making accounting guidance look automated or replacing professional judgment.
03 / Constraints that shaped the solution
Constraints that shaped the solution
Sensitive lead data
Contact and business information required server-side validation and controlled persistence instead of being treated as disposable form payloads.
Hosting limitations
The deployment model had to work with a constrained Node.js hosting environment where builds were more reliable when prepared locally.
Human accountability
The digital assistant could triage and organize context, but definitive accounting guidance remained explicitly with qualified professionals.
04 / A conversion path built around intent
A conversion path built around intent
Instead of sending every visitor to the same generic contact form, the site adapts the first interaction to why that person is there.
Home
General visitors can answer a short set of questions before continuing to WhatsApp.
Change accountant
The pre-service flow asks about the current situation and the reason for evaluating a transition.
Services
The flow captures the type of accounting support and the company's current need.
Open a company
The experience gathers initial context such as activity, location, partners and expected start.
Technology
Visitors can ask specifically about digital processes, information security and service technology.
Contact
A general contact path still exists for requests that do not fit a specialized entry point.
05 / Lead architecture
Lead architecture
The lead flow separates user experience, validation, persistence and communication so a temporary failure in one channel does not have to erase the request.
Intent-aware UI
Reusable components collect context according to the page and generate a structured handoff to WhatsApp.
Assistant Manolo
A decision-tree experience guides visitors through company opening, accountant change, tax planning, regularization, income tax and consulting contexts.
Contact API
A shared Node.js route receives both the traditional form and assistant payloads through one server-side entry point.
Validation
Payloads are normalized and checked before persistence, including required contact data and the selected service context.
Persistence & protocol
The lead is written server-side and receives a year-based sequential protocol before external messaging is attempted.
Email & WhatsApp handoff
The office receives the structured request by email, the visitor receives confirmation, and a prepared WhatsApp conversation can continue the flow.
06 / RESILIENCE
Failure-aware lead capture
The lead is persisted before SMTP delivery is attempted. If email sending fails, the request can still remain recorded, a protocol can still exist, and the API can report that messaging failed without pretending the entire capture failed. This small ordering decision protects business intent from an external dependency.
07 / SEO and content architecture
SEO and content architecture
The project treats discoverability as part of the application rather than as a final marketing patch.
Metadata
Pages use reusable metadata generation with canonical URLs, descriptions, Open Graph and Twitter information.
Structured data
The root layout publishes Organization, LocalBusiness and AccountingService schema for the firm's public identity.
Purpose-built routes
Services, company opening, accountant transition, technology, contact and blog content each have their own navigable context.
Content layer
A blog with dynamic article routes extends the site beyond institutional pages and creates room for useful accounting content.
08 / DEPLOYMENT
Engineering for the hosting environment
Production constraints influenced the delivery workflow. Builds are prepared outside the hosting panel, the Next.js output is packaged for deployment, and a custom Node.js server provides a predictable startup path. A health endpoint, process-level error logging and an optional PM2 configuration add operational visibility without changing the client-facing experience.
09 / QUALITY
Production validation and an explicit gap
The project includes build and lint commands, server-side input validation, a health endpoint and a detailed post-deploy checklist covering navigation, responsive behavior, images, contact flows, the assistant and server logs. The repository does not currently contain an automated test suite, which is a clear next engineering improvement: component, API and end-to-end tests would reduce reliance on manual regression checks.
10 / What this project proves
What this project proves
The value of the project is not a single visual feature. It is the combination of product thinking, business context and production engineering.
Real client environment
The application serves a real accounting business with public users, operational contact flows and deployment constraints.
Pre-service before handoff
The site captures context before the conversation reaches the accounting team, reducing the blank-page effect of a generic contact form.
Capture before messaging
Lead persistence is separated from email delivery so an SMTP problem does not automatically discard the request.
Technical SEO foundation
Canonical metadata, social previews, structured data and content routes make discoverability part of the implementation.
11 / LESSONS
What this project reinforced
- Client software is shaped by operational constraints as much as by framework choices.
- A useful assistant should organize context and hand off to professionals, not manufacture certainty in a regulated domain.
- Persistence should happen before fragile external integrations when losing the business event would be worse than delaying a notification.
- A deployment process is part of the system design when the hosting environment cannot be treated as an infinite cloud abstraction.
- The next quality step is clear: automate regression coverage around the contact API, lead flows and critical navigation.
Engineering stack
Next.js 14React 18TypeScriptTailwind CSSNode.jsNodemailerJSONLSEOcPanel / PassengerPM2
Confidentiality note: the source repository is private. This case describes architecture and engineering decisions without exposing credentials, private customer data, internal server paths or sensitive operational details.