Teddy Frontend

Um projeto desenvolvido como parte do teste técnico para Tech Lead na Teddy Open Finance. Este é o frontend do sistema de gestão de clientes, construído com React e Vite. O projeto inclui autenticação, temas customizáveis, responsividade e várias boas práticas.

Código moderno, performático e bem organizado, com foco em usabilidade, qualidade e manutenção a longo prazo.

---

SOBRE O PROJETO • TECH STACK & LIBS • COMO INSTALAR • UTILIZANDO O SISTEMA • OUTROS DETALHES TÉCNICOS • CONSIDERAÇÕES FINAIS • AGRADECIMENTOS

☄ Sobre o Projeto

O frontend deste sistema é um dashboard para gestão de clientes, desenvolvido como parte de um teste técnico para a posição de Tech Lead. Ele oferece funcionalidades como:

• CRUD de clientes (criar, listar, editar e excluir);
• Autenticação completa (login e registro);
• Middlewares para controle de navegação e rotas protegidas;
• Temas personalizáveis (dark e light);
• Interface totalmente responsiva, adaptada para diferentes dispositivos.

Este projeto vai além dos requisitos solicitados, incorporando várias melhorias e funcionalidades extras para entregar uma solução robusta e alinhada com padrões de qualidade.

A organização do código segue o princípio da Screaming Architecture, com pastas e módulos estruturados para clareza e facilidade de manutenção. Utilizei práticas como:

• Componentização;
• State Management com Zustand, garantindo gerenciamento eficaz e escalável de estados;
• Boas práticas de linting e formatação com ESLint e Prettier;

💻 Tech Stack & Libs

As tecnologias e bibliotecas utilizadas neste projeto incluem:

• React - Biblioteca JavaScript para construção de interfaces de usuário.
• Vite - Ferramenta moderna de build para desenvolvimento frontend.
• Zustand - Gerenciador de estado simples e escalável.
• Material UI - Biblioteca de componentes para design moderno e responsivo.
• ESLint - Ferramenta para análise estática e correção de código.
• Prettier - Ferramenta de formatação de código.

🚀 Como Instalar

Configuração do Ambiente

Este projeto utiliza um arquivo .env para armazenar variáveis de ambiente. Certifique-se de configurar o arquivo antes de rodar o frontend.

1. No diretório frontend, copie o arquivo de exemplo:

cp .env.example .env

2. Insira a URL do backend na variável VITE_BACKEND_URL, que corresponde ao endereço do servidor de backend. Por exemplo:

VITE_BACKEND_URL=http://localhost:3001 

Executando com Docker

Para rodar o frontend utilizando Docker, vá até o diretório infra do projeto principal e execute:

docker compose up --build

O frontend será disponibilizado automaticamente em http://localhost:3000 ou na porta que você configurou no .env geral de infra.

Rodando manualmente

Se preferir rodar manualmente, instale o Node.js LTS na sua máquina e siga os passos abaixo:

1. Instale as dependências do projeto:

npm install

2. Inicie o servidor de desenvolvimento (ou rode o script ./entrypoint.sh que decide qual melhor comando de acordo com o seu ambiente:

npm run dev

⌨️ Utilizando o Sistema

Após configurar e rodar o projeto, você pode acessar o dashboard no navegador em http://localhost:3000.

Funcionalidades disponíveis:

• Login e Registro: Proteção com autenticação para acessar o dashboard.
• Gestão de Clientes: Criação, edição, exclusão e visualização de clientes cadastrados.
• Seleção de clientes com gerenciamento de estados
• Temas: Alternância entre modo claro e escuro.
• Responsividade: Compatível com desktop, tablets e dispositivos móveis.
  

📚 Alguns Outros Detalhes Técnicos...

• Boas Práticas

  • Caso o arquivo .env principal (do projeto de infra) tenha NODE_ENV=development, o sistema é configurado automaticamente com hot reload para facilitar o desenvolvimento.
  • Para produção, o sistema é buildado de forma otimizada, garantindo alta performance e menor tempo de carregamento.

• Responsividade:

  • A interface foi projetada com Material UI para garantir que seja adaptável a diferentes dispositivos, desde desktops até dispositivos móveis, com ótima experiência de usuário.

• Organização do Código:

  • Seguindo o princípio da Screaming Architecture, a estrutura do projeto deixa claro os domínios e responsabilidades dos módulos.
  • Uso consistente de ESLint e Prettier para manter o código limpo e legível.

• Desempenho:

  • O uso de React com Vite garante carregamento rápido durante o desenvolvimento e build altamente otimizado para produção.

👋 Considerações Finais

Este projeto foi desenvolvido com muito cuidado e atenção aos detalhes para entregar uma solução prática e escalável. Ele não só atende aos requisitos solicitados, mas também adiciona melhorias significativas para aprimorar a experiência do usuário, a organização do código e a facilidade de manutenção.

Se tiver alguma dúvida ou sugestão, fique à vontade para entrar em contato. Espero que o projeto seja útil! 🧡