Anderson LimaSoftware Engineer & Architect
4 de octubre de 2026
2 min de lectura
100 visualizaciones
Você tem business logic espalhada em React components. Amanhã quer migrar para Vue. Precisa reescrever tudo.
Clean Architecture separa domain logic do framework.
// ❌ Business logic acoplada ao React
function CheckoutPage() {
const [cart, setCart] = useState([]);
const [total, setTotal] = useState(0);
const addItem = (item) => {
setCart([...cart, item]);
setTotal(total + item.price + (item.price * 0.1)); // Tax logic em component!
};
// ... 200 linhas de business logic
}
UI Layer (React)
↓
Application Layer (Use Cases)
↓
Domain Layer (Entities, Business Rules)
↓
Infrastructure (API, Storage)
// domain/Cart.ts (sem React!)
export class CartItem {
constructor(
public id: string,
public name: string,
public price: number
) {}
}
export class Cart {
private items: CartItem[] = [];
addItem(item: CartItem) {
this.items.push(item);
}
getTotal(): number {
const subtotal = this.items.reduce((sum, item) => sum + item.price, 0);
return subtotal + (subtotal * 0.1); // Business logic aqui, não no React!
}
getItems(): CartItem[] {
return [...this.items];
}
}
// application/AddItemToCart.ts
export class AddItemToCartUseCase {
constructor(
private cartRepo: CartRepository,
private productRepo: ProductRepository
) {}
async execute(productId: string): Promise<void> {
const product = await this.productRepo.findById(productId);
const cart = await this.cartRepo.get();
cart.addItem(new CartItem(product.id, product.name, product.price));
await this.cartRepo.save(cart);
}
}
// ui/CheckoutPage.tsx
function CheckoutPage() {
const { cart, addItem } = useCart(); // Custom hook encapsula use case
return (
<div>
{cart.getItems().map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<div>Total: ${cart.getTotal()}</div>
</div>
);
}
// hooks/useCart.ts
function useCart() {
const [cart, setCart] = useState(new Cart());
const addItem = async (productId: string) => {
const useCase = new AddItemToCartUseCase(cartRepo, productRepo);
await useCase.execute(productId);
const updatedCart = await cartRepo.get();
setCart(updatedCart);
};
return { cart, addItem };
}
Clean Architecture desacopla UI de business logic. React vira detail facilmente substituível.
Se você tem cálculos de negócio dentro de useState, você precisa de Clean Architecture.
Productos gratuitos y de pago para convertir ideas en una base que puedas lanzar.
13 productos disponibles
nextjs · boilerplate
Boilerplate de API em Python com FastAPI, organizado em Clean Architecture (router, service, repository e adapters por módulo). Inclui autenticação JWT com hashing bcrypt, MongoDB, testes com pytest e cobertura, Dockerfile e docker-compose para subir localmente, e documentação Swagger/OpenAPI automática. Repositório de origem privado; snapshot técnico verificado antes da publicação.
Ver producto
react · boilerplate
Base React Native para apps iOS y Android con Expo, Clean Architecture, MVVM, Firebase y módulos nativos. Referencia técnica de VaiDeFut, con distribución pública en Google Play y un flujo de publicación para iOS documentado.
Ver producto
nextjs · boilerplate
Kit gratuito y open source para comenzar con agentes de código en Claude Code, Codex, Gemini, Copilot y OpenCode. El repositorio público confirma una licencia MIT.
Ver producto
nextjs · boilerplate
Base AI-first white-label para lanzar productos SaaS con Next.js, chat, RAG, memoria, tenants y documentación. El snapshot verificado documenta Supabase, no MongoDB; la limitación está explícita. MongoDB, Redis y RabbitMQ requieren una integración/configuración compatible.
Ver producto
nextjs · boilerplate
Edición avanzada de una base white-label y multi-tenant AI-first para acelerar productos con Next.js, chat, RAG, memoria y documentación. El snapshot verificado no demuestra una capa Ultra distinta; la limitación y los cambios de provider, cache y colas quedan transparentes.
Ver producto
nextjs · boilerplate
Base white-label y multi-tenant para convertir una idea en un SaaS AI-first con Next.js, chat, RAG, memoria y seguridad documentada. El snapshot verificado usa Supabase; el nombre identifica el repositorio de origen. Los límites de provider, cache y colas son explícitos; Redis y RabbitMQ son integraciones configurables.
Ver producto
react · portfolio
Una contribución única para apoyar contenido técnico gratuito, investigación y la continuidad de proyectos relevantes publicados por Anderson Lima. Tú eliges el valor; no es una suscripción.
Ver producto
react · boilerplate
Starter React gratuito para crear una suite de pruebas confiable desde el primer commit con Vitest, Testing Library, Playwright, Vite, TypeScript, Zustand, React Query, MirageJS y PWA. El repositorio no declara una licencia SPDX; revisa sus términos antes del uso comercial.
Ver producto
react · portfolio
Monorepo público en React, TypeScript y Vite para explorar una biblioteca de componentes con lenguaje visual inspirado en interfaces nativas. El README actual es breve y no declara una licencia SPDX; trátalo como preview gratuito.
Ver producto
nextjs · saas
Boilerplate SaaS AI-first con Next.js, Supabase, Stripe y provider routing para avanzar desde el primer prompt hasta un despliegue real más rápido. Los cambios de IA, datos, email, cache y colas son explícitos; Redis y RabbitMQ son integraciones configurables.
Ver producto
react · saas
Starter React + TypeScript para SaaS multi-tenant con Firebase, Atomic Design, temas, PWA, pantallas de producto, MirageJS y chat Gemini extensible a otros providers. Valida requisitos de producción, costes e integraciones antes de publicar.
Ver producto
react · boilerplate
Starter React público con TypeScript, Zustand, React Query, Tailwind CSS, PWA e integraciones de IA documentadas. El repositorio no declara una licencia SPDX; revisa sus términos antes del uso comercial.
Ver producto
nextjs · saas
Landing SaaS para Next.js, TypeScript y Tailwind CSS con SEO, temas, i18n, PWA y puntos de integración para auth, Stripe e IA. Una base clara para dejar atrás la pantalla en blanco y dar forma a tu propuesta.
Ver productoContinúa explorando temas similares
Descubra quais são os frameworks de UI mais usados em 2025 — incluindo Tailwind CSS, Shadcn/UI, Material UI e outros — e entenda por que o CSS estático está substituindo o styled-components na era moderna do React.
Nos últimos meses, prototipando apps de IA, percebi o frontend como gargalo: backends mágicos, mas UIs amadoras. Compartilho minha lib open source React Cupertino UI, com animações nativas e componentes para voz/imagens, para ajudar devs a criarem experiências premium. Aprenda os trade-offs e teste o código!
A TUI do lemon-code é React: Box, Text e hooks, renderizados em ANSI pelo Ink. Funciona muito bem, desde que você conheça os dois pontos em que o Ink quebra sob Bun no Mac.
Una lista de 47 puntos para encontrar errores, riesgos de seguridad y problemas de rendimiento antes del lanzamiento.
Templates probados en producción, usados por desarrolladores. Ahorra semanas de setup en tu próximo proyecto.