PORTFÓLIONEW Logo
DOCKET NO: GL-196 / MYCUPID

MYCUPID

Uma plataforma para criar 'páginas de amor' digitais e personalizadas. Uma evolução moderna da carta de amor, em formato de página web interativa, onde usuários adicionam fotos, textos, músicas e jogos, compartilhando um presente emocionante por link ou QR Code.

ACESSAR PROJETO Voltar ao Portfólio

02 // MAPEAMENTO DE INTERFACE

01//VISÃO GERAL

01

FRONTEND: A EXPERIÊNCIA DO USUÁRIO

Fundação (Next.js & React): Estrutura de rotas eficiente e carregamento rápido com Next.js, combinado com a criação de componentes reutilizáveis em React.

A "Gramática" (TypeScript): Código mais seguro e robusto, evitando bugs comuns do JavaScript e garantindo a integridade do sistema.

Pintura e Acabamento (Tailwind CSS & ShadCN/UI): Estilização prática com Tailwind e componentes de alta qualidade do ShadCN/UI para um visual profissional e consistente.

O "Uau!" (Framer Motion & React Three Fiber): Animações fluidas na interface com Framer Motion e elementos 3D imersivos, como a linha do tempo, criados com React Three Fiber.

X: 0.175 / Y: 0.048

Frontend: A Experiência do Usuário

STAMP: BUILD_VERIFIED_01

X: 0.367 / Y: 0.577

Backend: A Inteligência por Trás da Magia

STAMP: INTERFACE_OK_02

02//MAPEAMENTO DE INTERFACE

02

BACKEND: A INTELIGÊNCIA POR TRÁS DA MAGIA

Arquitetura Serverless com Firebase: Plataforma robusta e escalável que elimina a necessidade de um servidor tradicional.

Firebase Authentication: Sistema de login seguro com suporte a e-mail/senha e contas Google.

Firestore: Banco de dados em tempo real para armazenar de forma organizada as "LovePages", dados de usuários e rascunhos de pagamento.

Firebase Storage: Armazenamento seguro na nuvem para todas as fotos e áudios enviados pelos usuários.

Inteligência Artificial (Genkit): Utiliza IA para a busca inteligente de músicas no YouTube, enriquecendo a experiência da página.

Pagamentos (Mercado Pago & PayPal): Integração segura com gateways de pagamento líderes, sem armazenar dados sensíveis de cartão de crédito.

03//ARQUITETURA DO SISTEMA

03

O FLUXO DA CRIAÇÃO À ENTREGA

Criação Intuitiva: Um "wizard" passo a passo guia o usuário na personalização da sua página de amor.

Salvamento Automático: Todas as alterações são salvas em um rascunho no Firestore, com mídias guardadas temporariamente no Storage.

Pagamento Seguro: O usuário é redirecionado para o ambiente seguro do Mercado Pago ou PayPal para finalizar a compra.

Confirmação via Webhook: Um sinal automático do gateway de pagamento notifica o sistema sobre a aprovação da compra.

Finalização Automatizada: O sistema converte o rascunho na "LovePage" final, movendo os arquivos para um local permanente.

Entrega Imediata: A página se torna acessível por um link único e QR Code, pronta para ser compartilhada como surpresa.

X: 0.750 / Y: 0.230

O Fluxo da Criação à Entrega

STAMP: DEPLOY_READY_03

04//MÉTRICAS E RESULTADOS

IMPACTO GERADO

0/100

LIGHTHOUSE SCORE

Performance excepcional em Core Web Vitals.

+0%

TAXA DE CONVERSÃO

Melhoria direta após o redesign da UX.

0.0s

TEMPO DE RESPOSTA

Média de carregamento entre páginas.

0fps

ANIMAÇÕES

Aceleração por GPU via Framer Motion.

SPEC-A-043 / COMPONENTES DO SISTEMA

Next.jsReactTypeScriptFirebaseFirestoreGenkitTailwind CSSShadCN/UIFramer MotionReact Three FiberMercado PagoPayPal

INICIE SUA CONSTRUÇÃO

PRONTO PARA
TIRAR SUA IDEIA
DO PAPEL?

DISPONÍVEL PARA NOVOS PROJETOS

QUERO UM SOFTWARE ASSIM