Skip to content

JHONATAN OLIVEIRA®

PORTFOLIO / 2026

FRONTEND / PRODUCT / DESIGN

Engineering, direction and digital craft in one continuous system.

ISSUE / 01

Project archive

02 / Case study

Web Platform / 2026

STRATA - Operate like a company.

STRATA is a commercial operation platform focused on managing proposals, decisions, and revenue.

STRATA - Operate like a company.
J / O — Web Platform

Case index

01 — 04

Discipline
Web Platform
Year
2026
Status
Completed
Visual records
09

Technologies

Next.jsTypeScriptTailwindCSSSentryPostHogGSAPMotionPrisma ORMSupabasePostgresNext AuthUptimeRobotResendVercel

STRATA — Operate like a company.

STRATA was born from a simple observation: most digital professionals work with technical excellence, but with improvised operation.

Proposals scattered in loose documents.
Manual follow-ups.
No predictability of conversion.
No structured metrics.

STRATA resolves this.

Not as a PDF generator.
But as an operational platform for commercial proposal management, decisions, and revenue.

The goal is clear: to allow freelancers, agencies, and digital professionals to operate with structure — as if they were a multinational organization.

Problem

Selling digital services requires clarity, organization, and follow-up.

In practice, most of the market still relies on fragile processes:

  • unstandardized proposals

  • lack of traceability

  • lack of data on customer behavior

  • excessive dependence on manual control

This limits growth.

Without a structured operation, there is no sustainable scalability.

Solution

STRATA centralizes commercial flow in a single system.

  • structured proposal creation

  • direct sending to the client

  • real-time metric tracking

  • organization by status and sales cycle

  • complete interaction history

The proposal stops being just a document.

It becomes part of a system.

Architecture and technical decisions

The construction of STRATA followed a simple principle: predictability over improvisation.

Stack

  • Next.js 16 (App Router)

  • React 19

  • TypeScript (strict mode)

  • Prisma ORM

  • PostgreSQL

  • Tailwind CSS + shadcn/ui

  • Vercel

But stack is not a differentiator.

The differentiator is in the decisions.

Server-first

Whenever possible, I prioritized Server Components and Server Actions.

  • less JavaScript on the client

  • smaller attack surface

  • better state control

  • better structural performance

Security and control

  • Authentication with NextAuth + Prisma Adapter

  • structural validation with Zod

  • typed environment variables

  • configured headers (HSTS)

  • sensitive logic isolated on the server

Security was not added afterwards.
It was considered from the base.

Observability

  • Sentry for error tracking

  • Uptime Robot with automatic hooks

  • PostHog for behavioral analysis

Not waiting for the user to report a failure is part of the architecture.

Design as operation

The interface was designed with a focus on flow and clarity.

Without distractions.
Without excessive elements.
Without unnecessary friction.

The proposal is the protagonist.
The system is the invisible infrastructure that supports it.

Result

STRATA is not just a tool.

It is the materialization of a vision:

Technical decision as responsibility.
Architecture as commitment.
Operation as competitive advantage.

Product does not grow with isolated aesthetics.
Grows with structure.

04 / Visual evidence

09 ITEMS

The work, in context.

Screens, motion and supporting artifacts that show how the system behaves beyond a static cover.

Selected work / archive

END / CASE

One case is only one chapter.

Return to the archive to see other interfaces, products and experiments built with the same attention to product, visual direction and frontend engineering.

View all projects