Sobre o projeto: Uma solução completa de e-commerce e formação de empresas (LLCs) nos EUA, projetada para founders globais. Une uma interface premium (focada em conversão e UX) a um back-end robusto focado no rastreamento confiável de pagamentos via Stripe e integração com plataformas de anúncios (Google/Meta Ads) e CRM.
🔗 Acesse o Deploy da Aplicação Aqui
Front-end: 
Back-end: 
%%{init: {'theme': 'dark'}}%%
flowchart LR
classDef box fill:#111827,stroke:#374151,color:#ffffff,stroke-width:1px;
A[Usuário]:::box
B[React / Framer]:::box
C[Stripe Checkout]:::box
D[Stripe Webhook]:::box
E[ConversionFlow API<br>Spring Boot]:::box
F[Conversões Server-side]:::box
G[Meta Ads]:::box
H[Google Ads]:::box
I[Pipedrive CRM]:::box
A --> B --> C --> D --> E --> F
F --> G
F --> H
G --> I
H --> I
A interface atua como a vitrine do produto, adotando a estética Dark Mode com Glassmorphism para transmitir segurança e alta tecnologia, focando na usabilidade e na captura eficiente de leads.
- Componentização React: Desenvolvimento de Code Components 100% customizados dentro do ecossistema Framer.
- Estilização Híbrida: Uso de CSS-in-JS combinado com
<style>injetados para animações complexas (@keyframes) e responsividade avançada (ResizeObserver). - Performance Vetorial: Todos os ícones e elementos gráficos (como a logo e animações de background) são SVGs matemáticos nativos, garantindo zero requisições HTTP extras e qualidade Retina/4K.
- Integração Assíncrona: Gerenciamento de estado (
useState) e comunicação direta com a API viaFetch APIpara captura de leads e geração de checkouts dinâmicos.
- Landing Page: Hero section impactante focada em conversão com rolagem fluida.
- Autenticação (
NexusAuthPage): Captura de leads dinâmica integrada à API. - Pricing (
PricingCardsPalette): Layout interativo que envia o usuário diretamente ao checkout do Stripe.
O backend atua como a fonte única de verdade para conversões e decisões de negócio. O ConversionFlow é uma aplicação backend desenvolvida em Java com Spring Boot, responsável por processar pagamentos reais via Stripe e registrar conversões de forma confiável para plataformas de marketing e CRM.
O sistema utiliza rastreamento server-side, garantindo dados precisos mesmo em cenários de bloqueio de cookies, restrições de privacidade e limitações de tracking client-side.
- Registrar apenas pagamentos aprovados como conversões.
- Garantir mensuração correta para Google Ads e Meta Ads.
- Integrar dados de vendas com o Pipedrive (CRM).
- Suportar campanhas de tráfego pago com dados absolutos e escaláveis.
- Manter uma arquitetura clara e escalável.
"Pagamentos confirmados definem conversões. Eventos de navegador são apenas complementares."
- Usuário clica em um anúncio e realiza o pagamento via Stripe.
- Stripe envia um webhook (
payment_intent.succeeded). - Backend valida o pagamento e a conversão é registrada server-side.
- Evento é enviado para as APIs do Google Ads e Meta Ads.
- Lead/Venda é sincronizado com o Pipedrive.
PostgreSQL é utilizado por oferecer:
- Alta confiabilidade transacional.
- Suporte nativo a JSON/JSONB (essencial para payloads de webhook do Stripe).
- Boa performance para aplicações orientadas a eventos.
backend/conversionflow
├── src/main/java/com/nocountry/conversionflow
│ ├── controller # Endpoints REST e webhooks
│ ├── service # Regras de negócio
│ ├── client # Integrações externas
│ ├── domain # Entidades de domínio
│ ├── repository # Persistência (JPA)
│ ├── config # Configurações
│ └── exception # Exceções customizadas
├── src/main/resources
│ ├── application.yml
├── pom.xml
└── README.md
A união de design estratégico, front-end performático e back-end à prova de falhas:
- Cássia Nascimento - Frontend Engineer & Product Designer - LinkedIn | GitHub
- Leonardo Ferreira - Frontend Engineer & Product Designer - LinkedIn | GitHub
- Tirso Alcazar - Backend Developer - LinkedIn | GitHub
- Webster Spacacheri - Backend Developer - LinkedIn | GitHub
Backend:
cd backend/conversionflow
./mvnw spring-boot:run