Desenvolvimento de Template de Aplicativo Moderno

"Prompt para Desenvolvimento de Template de Aplicativo Moderno Visão Geral Desenvolva um template de aplicativo web/mobile que incorpore as mais modernas técnicas de programação, com foco em excelente design, experiência UI/UX superior e arquitetura de código manutenível. O aplicativo deve ser responsivo, acessível e seguir os princípios de design atômico e arquitetura baseada em componentes. Requisitos Técnicos Arquitetura e Organização do Código Utilize uma arquitetura baseada em componentes com responsabilidades bem definidas Implemente padrões de design como Container/Presenter, Atomic Design ou similar Estruture o código seguindo princípios SOLID Adote uma abordagem modular com componentes reutilizáveis Utilize TypeScript para tipagem estática e melhor manutenibilidade Implemente gerenciamento de estado eficiente (Context API, Redux Toolkit, Zustand ou similar) Organize as pastas seguindo uma estrutura lógica (features, components, hooks, utils, services) Adicione documentação de componentes (Storybook ou similar) UI/UX Design Design system consistente com tokens para cores, tipografia, espaçamento e elevação Sistema de grade responsivo para adaptação a diferentes tamanhos de tela Animações sutis e feedback visual para interações Suporte a temas claro e escuro com transições suaves Alta acessibilidade (WCAG 2.1 AA no mínimo) Design minimalista e limpo, focado na usabilidade Consistência visual em toda a aplicação Performance e Qualidade Implementação de code splitting e lazy loading Otimização de assets e bundle size Testes unitários, de integração e E2E CI/CD para garantir qualidade de código Monitoramento de performance Funcionalidades Específicas 1. Tela de Login/Signin Layout dividido em duas seções: Metade esquerda: Imagem/ilustração de destaque, possivelmente com animação sutil Metade direita: Formulário de autenticação Formulário de login com: Campo de email/usuário com validação Campo de senha com ícone para mostrar/ocultar Opção "Lembrar-me" Botão de login principal Link para recuperação de senha Opção de cadastro para novos usuários Botão "Entrar sem login" que direciona diretamente para o Dashboard sem autenticação Feedback visual para estados (carregando, erro, sucesso) Transições suaves entre estados do formulário 2. Dashboard Cabeçalho com título "Dashboard" e informações contextuais Grid responsivo de cards com: Resumo de métricas importantes Gráficos interativos e visualizações de dados Cards com diferentes tamanhos e importância visual Dados mockados que representem informações financeiras realistas Seção de atividades recentes ou alertas Capacidade de personalização pelo usuário 3. Menu de Navegação Lateral (Sidebar) Design moderno e minimalista Funcionalidade de colapso/expansão com ícone de toggle Ícones consistentes para cada item do menu Estado ativo claramente indicado Itens de menu: Dashboard Cartas de Crédito Comparar Agrupar Simular Relatórios Configurações Logout Switch para alternar entre tema claro e escuro Comportamento responsivo (colapso automático em telas menores) Animações suaves de transição Tecnologias Recomendadas Framework Frontend : React, Next.js ou similar Estilização : Styled Components, Tailwind CSS, ou Emotion Componentes UI : Material-UI, Chakra UI, ou construção de sistema de design próprio Gráficos : D3.js, Chart.js, ou Recharts Gerenciamento de Estado : Redux Toolkit, Zustand, ou React Query + Context API Forms : React Hook Form + Zod/Yup para validação Testes : Jest, React Testing Library, Cypress Entregáveis Esperados Estrutura de código organizada e documentada Componentes reutilizáveis com documentação Implementação funcional das telas especificadas Sistema de tema (claro/escuro) Design system básico Testes para componentes principais Guia de estilo e padrões de código Critérios de Avaliação Qualidade e organização do código Fidelidade aos requisitos de UI/UX Performance da aplicação Manutenibilidade e escalabilidade Acessibilidade Responsividade Documentação"