CInCoders ReactJS StarterKit
CInCoders ReactJS StarterKit
Bem-vindo à documentação oficial do CInCoders ReactJS StarterKit mantido pelo CInCoders.
Este projeto fornece uma base estruturada e modular para a criação de aplicações frontend em React com TypeScript, já integrada ao Keycloak (OIDC) e ao padrão de módulos usado nos projetos CIn — seguindo as mesmas práticas de engenharia do boilerplate de backend NestJS.
⚡ Stack Tecnológica
| Componente | Ferramenta / Versão | Finalidade |
|---|---|---|
| Runtime | Node.js 24 LTS | Ambiente de execução JavaScript/TypeScript |
| Build tool | Vite 7 | Dev server e bundler |
| Framework | React 18 + react-router-dom 7 | UI declarativa e roteamento client-side |
| Design system | @cincoders/cinnamon | Layout (navbar, sidebar), tabelas, toasts e telas de erro padronizadas da CIn |
| Autenticação | Keycloak + react-oidc-context | Login via OIDC, sessão e refresh de token |
| Formulários | react-hook-form + Zod 4 | Validação de formulário com schema único |
| Estilo | Tailwind CSS 4 + radix-ui / base-ui | Utility-first CSS e primitivos de UI acessíveis |
| Testes | Vitest 3 + Testing Library | Testes unitários e de componente |
| Qualidade & Lint | ESLint 9 (typescript-eslint) | Lint de código |
| Release | @cincoders/release-tooling | Versionamento e changelog automáticos na pipeline de CI |
📖 Nunca trabalhou com frontend web? Comece aqui
Se você ainda não tem experiência com React, roteamento client-side ou autenticação OIDC, não pule direto para o setup. Este boilerplate assume que você já sabe o que é um componente, um hook e uma requisição HTTP — se esses termos ainda são novos, comece pela documentação oficial do React antes de seguir.
🧭 Tópicos Principais
- Setup Rápido: Como gerar um novo projeto e rodar o ambiente de desenvolvimento
- Keycloak Local: Configuração do realm e do client OIDC em desenvolvimento
- Visão Geral da Arquitetura: Estrutura de pastas, fluxo de dados e composição da aplicação
- Autenticação & Autorização: Sessão Keycloak, refresh de token e RBAC em dois níveis
- Gerenciamento de Estado: As quatro categorias de estado e a ferramenta certa para cada uma
- Tratamento de Erros:
ErrorBoundary, erros de API e o padrão de mensagens da cinnamon - Criação de Módulos: Guia passo a passo para adicionar um novo domínio
- Módulos de Exemplo:
todoseteam— os gabaritos que acompanham o boilerplate, para copiar e depois remover