A próxima versão da Dashboard Pagar.me
Nossa equipe começou a pensar em uma próxima versão da nossa dashboard, peça fundamental para empoderar o lojista a tomar decisões de negócio.
Com o crescimento do Pagar.me em 2016, e consequentemente a entrada de novos clientes, precisavamos mergulhar de cabeça no dia-a-dia deles para dar a luz a um novo conceito de dashboard, que fosse totalmente centrada na operação do nosso cliente.
Formamos uma equipe de UX para trabalhar na experiência do usuário. Esta equipe está desde janeiro compreendendo as dores dos usuários da nossa dashboard atual e anotando cada detalhe.
A equipe de UX conduziu os esforços para desenhar protótipos baseados no feedback dos clientes, executar testes de usabilidade e adaptar os protótipos conforme o feedback.
A equipe de UI iniciou o design de uma biblioteca de componentes básicos de interface, incluindo botões, inputs, cards, etc. Essa biblioteca será usada para desenvolver as telas baseadas nos protótipos.
Criamos o projeto no Github. Integramos a equipe de UI no Git de forma a termos os assets do projeto disponíveis dentro do mesmo repositório (modelo de monorepo). Organizamos as milestones de desenvolvimento no Github, criamos um styleguide de React para o projeto.
Este projeto é bem novo pra gente, assim como o modelo de desenvolvimento open source também. Temos uma equipe de pessoas trabalhando no escritório com dedicação exclusiva no projeto, mas queremos compartilhar a experiência de desenvolver um projeto de front-end do mundo real nessa modalidade, recebendo e dando contribuições para a comunidade.
Nossa inspiração para desenvolver o projeto desta maneira são empresas como o Gitlab, que vem cada vez mais se aproximando da comunidade para gerar produtos que escutam o usuário, aceitam sua contribuição e crescem cada vez para melhor.
A ideia deste repositório é ser um monorepo que agrega todos os projetos necessários para o desenvolvimento do nosso front-end. Eventualmente pacotes alojados aqui podem ser splitados para repositórios, conforme faça sentido. Adotamos o modelo de monorepo para não ter o overhead de gestão de dependências no início do projeto.
A stack foi escolhida baseada em o que empresas como Facebook, AirBnb, e New York Times estão usando para construir suas experiências. Também foi levado em consideração a simplicidade, curva de aprendizado e requisitos como fácil distribuição e entrega progressiva.
Tendo isso em vista, fomos de React. A estrutura do projeto foi iniciada
rapidamente usando o create-react-app e [adaptada][css-modules-commit]
para incluir CSS modules e o Storybook.
CSS Modules foi habilitar para criar escopo no CSS. Assim podemos distribuir todos os componentes de UI como um pacote separado (a lá Material Design), tornando o desenvolvimento de outros projetos usando React muito mais simples.
React Storybook foi selecionado para permitir o desenvolvimento de componentes independentemente da existência de telas que os usam, e também para criar um catálogo de componentes.
Entre na pasta webapp. Lá você encontrará o README do webapp e poderá
descobrir como rodar o projeto em seu computador.
Quer contribuir? Não sabe como começar? Que tal começar criando uma issue? Explique seu background e com o que gostaria de ajudar. Você também pode estar interessado em trabalhar conosco, se esse for o caso, envie um e-mail para [email protected].
See LICENSES.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent