React Bulletproof 🛡️ ⚛️

Um modelo(Boilerplate) de projeto React pronto para produção com TypeScript, apresentando uma arquitetura modular baseada em recursos (Feature-Based Modular Architecture).

🚀 Tech Stack

⚡️ React com TypeScript
📦 pnpm - Gerenciador de pacotes rápido e com uso eficiente de espaço em disco
🎨 Tailwind CSS & shadcn/ui
🔍 ESLint & Prettier
🪝 Husky para Git hooks
📡 @tanstack/react-query para gerenciamento de dados de API e caches
🛣️ React Router para roteamento
📝 React Hook Form & Zod para validação de formulário
🔄 Axios para requisição de API
🎲 Zustand Para gerenciamento de estado global
🧪 React Testing Library Utilitários de teste simples e completos que incentivam boas práticas de teste
🧪 Jest Para testes unitários
🧪 Cypress Para testes E2E

📁 Estrutura do Projeto

src/
|__ assets/   # Ficheiros estáticos como imagens, icones svg, etc...
├── components/   # Componentes compartilhados/comuns
├── config/   # Configuração do aplicativo (i18n.ts, theme.ts, etc..)
├── features/   # Módulos baseados em recursos
│ ├── auth/   # Recurso de autenticação
│ │ ├── api/  # Integração de API
│ │ ├── componentes/
│ │ ├── hooks/
│ │ ├── routes/
│ │ ├── types/
│ │ └── validators/
│ └── usuários/   # Recurso de usuários
├── hooks /   # Hooks compartilhados
├── lib/  # Funções utilitárias
├── providers/  # Provedores de contexto
├── routes/   # Configurações de rota global
├── services/   # Serviços de API
├── types/  # Tipos TypeScript compartilhados e os enums
|__ constants/   # Para valores constantes que são usados globalmente no aplicativo (como configurações fixas, limites de tamanho de ficheiros, limites de validação, etc.).
|__ data/    # Dados estáticos ou pré-definidos usados no app, como listas de países, categorias, etc.
|__ mocks/   # Arquivos de mock de dados para testes ou desenvolvimento, frequentemente usados para simular respostas da API.
|
|__ test/   # Para realização dos testes
| |__  unit/  # Testes de unidades para as funcionalidades e componentes do app.
| |__  integration/   # Testes que verificam a integração entre diferentes partes do sistema.
| |__  e2e/   # Testes que simulam o fluxo completo do usuário e verificam se o aplicativo funciona como esperado.
| |__ components/   # Testes específicos para componentes, utilizando bibliotecas como react-testing-library ou enzyme
└── validators/ # Validações compartilhados

🛠️ Guia de configuração

1. Criação de Projeto

# Criar um novo projeto
pnpm create vite nome-do-app --template react-ts

# Navegar até o projeto
cd nome-do-app

# Instalar dependências
pnpm i

2. ESLint Setup

pnpm add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import

3. Prettier Setup

pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier

# Crie o arquivo .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

4. Husky & Commitlint Setup

# 1 - Opção
pnpm add -D husky lint-staged @commitlint/{cli,config-conventional}

# OU

# 2 - Opção
pnpm add -D husky lint-staged  @commitlint/config-conventional @commitlint/cli

# Inicializar Husky
pnpm exec husky init

# Criar arquivo de configuração do commitlint
echo "module.exports = { extends: ['@commitlint/config-conventional'] }" > commitlint.config.js

# Alternativa CommonJS commitlint.config.js
export default {
  extends: ["@commitlint/config-conventional"],
};

# Alternativa ES Module commitlint.config.cjs
module.exports = {extends: ['@commitlint/config-conventional']}

# 📄 Adicione no package.json:
"lint-staged": {
  "**/*.{ts,tsx,js,jsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "**/*.{json,md,css,scss}": [
    "prettier --write"
  ]
}

# Criar o Hook pre-commit
mkdir -p .husky
touch .husky/pre-commit
chmod +x .husky/pre-commit

# 📄 Conteúdo do .husky/pre-commit:
#!/bin/sh
pnpm exec lint-staged

# Criar o Hook commit-msg
touch .husky/commit-msg
chmod +x .husky/commit-msg

#📄 Conteúdo do .husky/commit-msg:
#!/bin/sh
pnpm exec commitlint --edit "$1"

# Testar a Configuração
git add .
git commit -m "feat: teste de husky"

5. Padrões de Commits

Exemplos de mensagens de commit válidas:

git commit -m "feat: adiciona novo componente de botão" git commit -m "fix: corrige bug no formulário de login" git commit -m "docs: atualiza README" git commit -m "style: ajusta espaçamento do header" git commit -m "refactor: melhora performance da listagem" git commit -m "test: adiciona testes para o componente Card" git commit -m "chore: atualiza dependências"

Tipos de commit permitidos:

build: Mudanças no sistema de build ou dependências externas
chore: Mudanças em arquivos de configuração, etc
ci: Mudanças nos arquivos de CI
docs: Mudanças apenas na documentação
feat: Adição de nova funcionalidade
fix: Correção de bug
perf: Mudanças relacionadas a performance
refactor: Refatoração de código
revert: Reverte um commit anterior
style: Mudanças que não afetam o significado do código
test: Adição ou correção de testes

6. Tailwind & shadcn/ui Setup

# Instalar Tailwind
pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p

# Instalar shadcn/ui
pnpm dlx shadcn-ui@latest init

7. React Query Setup

pnpm add @tanstack/react-query @tanstack/react-query-devtools

8. React Router Setup

pnpm add react-router-dom

9. Form Validation Setup

pnpm add react-hook-form @hookform/resolvers zod

10. API Setup

pnpm add axios

🔒 Autenticação

O projeto inclui um sistema de autenticação completo com:

Funcionalidades de Login/Logout
Rotas protegidas
Authentication context
Gerenciamento de Token
Refresh Token Automático
Persistência de sessões

🚦 Tipos de Rota

Rotas Públicas: Acessíveis a todos os usuários
Rotas Privadas: Requerem autenticação
Rotas Não Autorizadas: Para usuários autenticados sem permissões adequadas
Página Não Encontrada: Manipulador da página 404

📝 Validação de Formulários

Os formulários são validados usando esquemas Zod e React Hook Form:

// Exemplo de esquema de validação
const loginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

🔄 Integração com API

As chamadas de API são organizadas usando React Query e Axios:

// Example API hook
export const useUsers = () => {
  return useQuery({
    queryKey: ["users"],
    queryFn: () => api.get("/users"),
  });
};

🎨 Suporte a Tema

O projeto inclui uma implementação completa de modo escuro utilizando Tailwind CSS e shadcn/ui.

📚 Diretrizes de Desenvolvimento

Siga a Arquitetura Modular Baseada em Funcionalidades (Feature-Based Modular Architecture)
Escreva código limpo e fácil de manter
Adicione os tipos adequados em TypeScript
Inclua testes unitários para funcionalidades críticas
Siga as regras do ESLint e Prettier
Use mensagens de commit Git adequadas

📚 Dicas de Seguranças

A autenticação verifica a identidade do usuário, geralmente usando JWTs. Tokens devem ser armazenados com segurança:

Cookies com HttpOnly são mais seguros contra XSS.
localStorage é mais prático, mas vulnerável a XSS.
sessionStorage é útil para sessões curtas e menos críticas.

A autorização regula o acesso a recursos:

RBAC (baseado em papéis) define permissões gerais, como ADMIN e USER. PBAC (baseado em permissões) é mais específico, como permitir apenas ao autor excluir um recurso.

Recomenda-se proteger entradas de usuário contra ataques XSS e usar ferramentas como react-query-auth para gerenciar o estado do usuário.

Para mais informações Clique aqui

💅 Componentes e Estilização

Boas práticas para componentes
- Mantenha componentes, funções, estilos e estados próximos de onde são usados para melhorar a legibilidade e desempenho.
- Evite componentes grandes com muitas funções de renderização aninhadas; extraia trechos em componentes menores.
- Garanta consistência no estilo de código com linters e formatadores.
- Limite o número de props de um componente, dividindo-o em partes menores ou usando composição.
- Abstraia componentes compartilhados em uma biblioteca para maior consistência e manutenção.
Bibliotecas de componentes
- Completas: Oferecem componentes já estilizados, como Chakra UI, MUI, AntD e Mantine.
- Headless: Componentes não estilizados, ideais para design personalizado, como Radix UI e Headless UI.
Soluções de estilização
- Opções incluem Tailwind, CSS Modules, styled-components, e Emotion.
- ShadCN UI e Park UI oferecem componentes estilizados como código customizável. Considere soluções leves para componentes de servidor no React.

4 - Storybook

Ferramenta útil para desenvolver, testar e catalogar componentes isoladamente.

🚀 Começando

Clone o repositório
Instale as dependências: pnpm install
Inicie o servidor de desenvolvimento: pnpm dev
Construa para produção: pnpm build

🚪 Acesso

Admin

email: admin@example.com password: password123

Gestor:

email: manager@example.com password: password123

Usuário:

email: user@example.com password: password123

👨‍💼 Author

BaziotaBeans

📄 Licença

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.husky		.husky
public		public
src		src
.env		.env
.gitignore		.gitignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
commitlint.config.js		commitlint.config.js
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

License

BaziotaBeans/react-bulletproof

Folders and files

Latest commit

History

Repository files navigation