Publicado em

Criando Dashfolio - Uma plataforma escalável de visualização de dados com React, Next.js, NestJS e AWS

Autores

    Criando Dashfolio: um painel de dados escalável de ponta a ponta

    Dashfolio é uma aplicação web moderna projetada para explorar dados da produção agrícola global. Ela oferece painéis interativos que ajudam os usuários a visualizar informações derivadas dos conjuntos de dados da FAO, incluindo produção regional e principais produtores por tipo de cultura.

    Neste artigo, vou apresentar a arquitetura técnica do Dashfolio, explicando como criei uma aplicação full stack escalável, de alto desempenho e fácil de manter usando as seguintes tecnologias:

    • Frontend: React.js (Next.js), Tailwind CSS, Recharts
    • Backend: Node.js (NestJS), Prisma ORM, Redis
    • Banco de dados: PostgreSQL (AWS RDS)
    • Nuvem e implantação: AWS + Vercel
    • CI/CD e controle de versão: GitLab Pipelines
    • Testes: Jest (testes unitários), Cypress (testes de ponta a ponta)
    • Linguagens e ferramentas: TypeScript, JavaScript, SQL, TurboPack, ESLint, Prettier

    Objetivos do projeto

    • Oferecer um painel interativo e de alto desempenho
    • Garantir escalabilidade e facilidade de manutenção com código limpo e princípios de artesanato de software
    • Seguir as boas práticas do setor: arquitetura limpa, qualidade de código, testes automatizados, CI/CD
    • Proporcionar busca rápida de dados e cache para uma experiência de usuário ideal

    Frontend - Next.js + Recharts + Tailwind CSS

    • Next.js sustenta o frontend React.js para páginas SSG/SSR e rotas de API.
    • Uso Tailwind CSS para estilização baseada em classes utilitárias e um sistema de design consistente.
    • Recharts oferece gráficos personalizáveis e de alto desempenho para visualização de dados.
    • TurboPack acelera o processo de desenvolvimento e compilação, otimizado para projetos Next.js.

    Backend - NestJS + Prisma ORM + Redis

    • NestJS fornece uma arquitetura modular e escalável para criar APIs.
    • Prisma ORM simplifica a interação com o banco de dados com segurança de tipos e consultas geradas automaticamente.
    • Redis armazena em cache consultas acessadas com frequência, reduzindo a carga do banco de dados e melhorando os tempos de resposta da API.
    • O backend expõe APIs RESTful consumidas pelo frontend Next.js.

    Banco de dados - AWS RDS (PostgreSQL)

    • PostgreSQL é executado no AWS RDS para armazenamento relacional de dados gerenciado e confiável.
    • Prisma gerencia o esquema e as migrações, garantindo acesso organizado e consistente aos dados.

    Estratégia de nuvem e implantação

    • AWS Cloud: hospedagem do PostgreSQL (RDS) e do Redis.
    • Vercel: implantação do frontend Next.js para distribuição rápida baseada em CDN.
    • CI/CD com GitLab Pipelines: fluxos automatizados de testes, análise estática (ESLint), formatação (Prettier) e implantação.
    • Controle de versão via GitLab, com branches de funcionalidades e solicitações de merge para manter a qualidade do código.
    • Pipelines de testes automatizados integrados com Jest para testes unitários e Cypress para testes de ponta a ponta, garantindo estabilidade a cada versão.

    Estratégia de testes automatizados

    Os testes são uma parte fundamental do ciclo de desenvolvimento do Dashfolio para garantir a confiabilidade do código, evitar regressões e manter a alta qualidade. Implementei duas camadas de testes:

    Jest - Testes unitários e de integração

    • Uso Jest para testes unitários e de integração no frontend e no backend.
    • Ele garante que componentes, serviços e utilitários funcionem como esperado.
    • Jest + Testing Library me ajuda a escrever testes de componentes acessíveis com interações realistas.
    • Os testes são executados automaticamente nos pipelines GitLab com relatórios de cobertura, aumentando a confiança a cada push.

    Cypress - Testes de ponta a ponta (E2E)

    • Cypress cuida dos testes de ponta a ponta para validar fluxos completos do usuário no navegador.
    • Testo fluxos críticos, como filtrar conjuntos de dados, navegar pelos painéis e visualizar gráficos responsivos em diferentes dispositivos.
    • Os testes Cypress são executados em modo headless durante os pipelines GitLab CI e geram relatórios para depuração.

    Principais recursos

    1. Painéis interativos

    • Gráficos de setores mostrando a participação na produção por região.
    • Gráficos de barras destacando os principais produtores por cultura.
    • Design responsivo e suporte a modo escuro.

    2. Cache de API com Redis

    Os resultados em cache para consultas frequentes garantem tempos de carregamento rápidos e reduzem as chamadas ao banco de dados.

    Para otimizar o desempenho e reduzir a carga do banco de dados, Dashfolio implementa cache de API usando Redis. Ao armazenar no Redis os resultados de solicitações de API acessadas com frequência, minimizamos a necessidade de consultar repetidamente o banco de dados PostgreSQL. Isso garante tempos de resposta mais rápidos para os usuários, especialmente ao acessar conjuntos de dados populares ou filtros usados com frequência.

    3. Boas práticas de engenharia de software

    • Princípios de código limpo: DRY, design SOLID.
    • Ferramentas de qualidade de código: ESLint, Prettier e TypeScript estrito.
    • Testes automatizados com Jest (testes unitários) e Cypress (testes de ponta a ponta) integrados aos pipelines GitLab.
    • Estrutura de pastas escalável e fácil de manter tanto no frontend quanto no backend.
    • APIs seguras com validação de entradas e filtros de exceções no NestJS.

    Aprendizados e conclusões

    • TurboPack melhorou drasticamente os tempos de compilação do frontend Next.js.
    • O cache com Redis reduziu a latência da API do backend em aproximadamente 70%.
    • A combinação NestJS + Prisma + PostgreSQL ofereceu um backend de dados fluido e escalável.
    • A automação de CI/CD com pipelines GitLab garante implantações e verificações de qualidade consistentes.
    • Os testes com Jest e Cypress ajudaram a detectar erros cedo, reduziram regressões e melhoraram a estabilidade geral da plataforma.
    • Os serviços da AWS fornecem flexibilidade, escalabilidade e confiabilidade à infraestrutura do backend.

    Conclusão

    Dashfolio demonstra como tecnologias modernas, como React (Next.js), Node.js (NestJS), AWS e estratégias robustas de testes com Jest e Cypress, podem ser combinadas para oferecer plataformas robustas de visualização de dados.

    Confira a versão online: https://www.dashfoliodata.com/

    Se você tem um projeto em mente ou precisa de ajuda para criar aplicações web modernas e escaláveis, entre em contato comigo:
    🔗 LinkedIn - Steward OUADI