diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000..4be62fe
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @devhatt
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
new file mode 100644
index 0000000..9919aa5
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a new bug report to help us improve Octopost
+title: ""
+labels: ""
+assignees: ""
+---
+
+## Describe the bug
+
+**[A short description of what the bug is.]**
+
+## Description
+
+[Describe the bug reported.]
+
+## Steps to Reproduce
+
+[If applicable, provide detailed steps to reproduce the bug.]
+
+## Expected Behavior
+
+[Describe what is expected to happen.]
+
+## Current Behavior
+
+[Describe what is currently happening.]
+
+## Visual information
+
+[If possible, add screenshots to illustrate this bug.]
+
+## Additional Information
+
+[Provide any additional information, such as relevant versions, browser, OS, context, etc.]
diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
new file mode 100644
index 0000000..b7227b4
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature-request.md
@@ -0,0 +1,27 @@
+---
+name: Feature request
+about: Suggest a feature to be added to Octopost
+title: ""
+labels: ""
+assignees: ""
+---
+
+## Describe the feature
+
+[A clear description of the feature.]
+
+## Use Case
+
+[Explain the use for this feature and how it might benefits the project.]
+
+## Implementation Details
+
+[Provide any details or suggestions on how this feature could be implemented.]
+
+## Visual Concepts
+
+**[Does it imply any visual changes to the application? Visual elements are required in the issue]**
+
+## Additional Information
+
+[Provide any additional information, such as context that might be relevant to the implementation of this specific feature.]
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000..c25b89f
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,56 @@
+Closes
+
+
+
+ Feature
+
+
+N/A
+
+
+
+
+
+ Bugfix
+
+
+- **Description**
+ N/A
+
+- **Cause**
+ N/A
+
+- **Solution**
+N/A
+
+
+
+
+ Changelog
+
+N/A
+
+
+
+
+ Visual evidences :framed_picture:
+
+
+
+
+
+
+ Checklist
+
+
+- [ ] Issue linked
+- [ ] Build working correctly
+- [ ] Tests created
+
+
+
+
+ Additional info
+
+N/A
+
diff --git a/.github/workflows/example.yml b/.github/workflows/example.yml
new file mode 100644
index 0000000..f388bcb
--- /dev/null
+++ b/.github/workflows/example.yml
@@ -0,0 +1,21 @@
+name: Auto-assign on comment
+
+on:
+ issue_comment:
+ types: [created]
+
+jobs:
+ auto-assign:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Check for "EU QUERO!!!" comment
+ if: contains(github.event.comment.body, 'EU QUERO!!!')
+ run: |
+ # Extract the commenter's username
+ commenter=$(jq -r .comment.user.login $GITHUB_EVENT_PATH)
+
+ # Add the commenter as an assignee to the issue using a Personal Access Token
+ echo "Assigning $commenter to the issue..."
+ curl -X POST -H "Authorization: token ${{ secrets.PERSONAL_ACCESS_TOKEN }}" \
+ -d "{\"assignees\": [\"$commenter\"]}" \
+ "https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/assignees"
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..335fe88
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Roman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..914fc82
--- /dev/null
+++ b/README.md
@@ -0,0 +1,138 @@
+# Este é o nosso README padrão para novos projetos DevHatt! Não se esqueça de remover o que for desnecessário para o seu projeto e verificar [Código de Conduta](./docs/CODE_OF_CONDUCT.md), [Contribuição](./docs/CONTRIBUTING.md), [Flow Issue](./docs/FLOWISSUE.md), [StyleGuide](./docs/STYLEGUIDE.md) e também os templates de actions dentro da pasta .github
+
+## Algumas partes são obrigatórios nos projetos como: Banner do projeto, Introdução do projeto, Explicação do projeto,Como contribuir, Como rodar o projeto,Tirar dúvidas, Regras, e Redes sociais
+[](https://discord.gg/devhatt)
+[](https://twitter.com/DevHatt)
+[](https://github.com/devhatt/octopost/pulse)
+[](https://github.com/devhatt/octopost/contributors)
+[](https://GitHub.com/devhatt/octopost/stargazers/)
+
+[adicione badges conforme necessario, não esqueça das badges de stack do projeto]
+
+# [LEMBRE-SE DE VERIFICAR O BADGE DE COMMIT ACTIVITY, CONTRIBUTOR E STARS, ELES SÃO ATRELADOS AO LINK DO PROJETO ENTÃO PRECISA ALTERAR PARA CADA UM]
+
+[BANNER DO PROJETO]
+
+[Introdução sobre o projeto]
+
+## Esse projeto é e sempre será open source como parte do programa de mentoria da comunidade [Devhatt](https://github.com/devhatt), contribuições são completamente bem vindas e incentivadas!
+
+[Explicação sucinta do que o projeto faz e qual seu objetivo]
+
+
+[**Junte-se a nós na DevHatt e transforme sua paixão por tecnologia em impacto real!**](https://discord.gg/devhatt)
+
+## Índice
+
+- [Projeto](#projeto)
+- [Como rodar](#como-rodar)
+- [Tirar Dúvidas](#tirar-dúvidas)
+- [Como Contribuir](#como-contribuir)
+- [Regras](#regras)
+- [Redes Sociais](#redes-sociais)
+
+## Projeto
+
+[Explicação sobre o Projeto]
+
+[Oque o projeto é? Qual problema ele resolve? Quais techs usadas? E etc]
+
+[Modelo de negocio por cima, por exemplo octopost: aplicação para resolver problema de multiplas plataformas de rede social, petdex: aplicação para centralizar e facilitar busca por pets. Explique o publico alvo e estratégia de monetização]
+
+## Como rodar
+
+[Explicação sobre como rodar o projeto, como instalar dependências e etc]
+
+[Existe alguma dependencia no sistema operacional? existe algum motivo especial para usar as libs que usamos? existe alguma dependencia que precisa ser instalada de maneira especial? detalhe aqui]
+
+
+## Estudos
+
+[Adicione aqui documentações e canal de MATERIAL para facilitar na busca por conteudo do oque é utlizado no projeto]
+
+## Tirar Dúvidas
+
+- **Canal de Help no Discord:** Para dúvidas sobre o projeto utilize o [LINK O CHAT do projeto]
+- **Salas Interativas:** Prefere uma interação mais direta? Junte-se a qualquer sala aberta no Discord e converse com outros membros que podem ajudar com suas dúvidas em tempo real.[ADICIONE O FORÇA DO PROJETO]
+- **Plantões de Dúvidas:** Organizamos sessões especiais em horários determinados onde mentores estão disponíveis para ajudar com questões mais complexas.
+- **One-a-One:** Você também pode marcar um 1:1 com o mentor do projeto.[ADICIONE O CALENDLY SE HOUVER, SE NÃO HOUVER MENTOR PARA ONE-A-ONE DESSE PROJETO, REMOVA ESSA SEÇÃO]
+- **Daily:** Se a sua dúvida for algo rápido, você também pode tirar suas dúvidas durante a daily..[ADICIONE O MEETING DO PROJETO]
+
+## Como Contribuir
+
+1. **Escolha uma Issue:** Explore nossas issues [Link as issues]
+2. **Siga o nosso Fluxo de Issues**: Verifique nosso [Fluxo de Issues](./docs/FLOWISSUE.md)
+3. **Siga nossas diretrizes de Contribuição:** Verifique nossas [Diretrizes de contribuição](./docs/CONTRIBUTING.md)
+4. **Siga a Guia de Estilo do projeto:** Verifique a [Guia de estilo](./docs/STYLEGUIDE.md) desse projeto
+
+ [Comece sua jornada com a DevHatt agora!](https://discord.gg/devhatt)
+
+## Regras
+
+
+Para garantir um ambiente saudável, respeitoso e receptivo, toda boa comunidade precisa de regras. Nossa equipe de moderação conta com o respaldo dessas regras, as quais foram criadas para tomar as providências cabíveis em cada situação. Este é um trabalho constante, pois frequentemente atualizamos nossas regras de convivência para enfrentar novos problemas que podem surgir. Por isso, é crucial reservar alguns minutos para ler sobre todas elas e, de tempos em tempos, voltar aqui para acompanhar as atualizações.
+
+Para melhorar as regras, não as explore; em vez disso, nos reporte. Caso haja exploração de alguma falha, a atualizaremos imediatamente, e as regras se aplicarão ao caso, mesmo que tenha ocorrido antes da atualização. Contamos com a colaboração de todos para evitar incentivos ao mau comportamento.
+
+É fundamental ressaltar que todas as sugestões são muito bem-vindas! Se tiver alguma, procure diretamente um dos membros da nossa moderação, identificados pelos cargos de Dono do Parquinho 🎠, Hatter 🤠 ou De Capa 🐱🏍. Abaixo, você pode conhecer mais detalhes sobre cada uma de nossas regras e quais punições elas geram.
+
+---
+
+### **⚠️ Regras para Convivência Social**
+
+**1. Exercício do Bom Senso**
+
+Pode parecer evidente, mas todas as normas existem para delimitar e enquadrar comportamentos que ultrapassam o bom senso. O exercício do bom senso assegurará que você esteja aderindo às regras em 100% das situações.
+
+**2. Pornografia ou Assédio**
+
+- 🚫 Banimento imediato 🔨
+
+ É terminantemente proibido compartilhar qualquer conteúdo com conotação pornográfica. Não busque brechas na regra, pois ela se aplica a qualquer situação interpretada pela moderação como tal. Da mesma forma, qualquer comportamento que possa ser interpretado como assédio, mesmo subjetivamente, será identificado pela moderação e enquadrado nesta regra.
+
+**3. Discussões sobre Temas Sensíveis**
+
+- 🚫 Punição: 1, 3, 7 dias. (recorrência (3): ban 🔨)
+
+ É proibido totalmente compartilhar imagens, links, menções ou participar de discussões sobre temas políticos, religiosos, assim como debates sobre futebol. Utilize outras plataformas na internet para esse tipo de interação.
+
+**4. Desrespeito e Ofensas**
+
+- 🚫 Punição: 1, 3, 7 dias. (recorrência (3): ban 🔨)
+
+ Seja uma pessoa cortês e empática. Se uma pergunta for feita, responda de maneira respeitosa. Se você não estiver disposto a responder dessa forma, sua resposta não será bem-vinda. Isso inclui comentários, piadas e falas sarcásticas, irônicas ou ofensivas. Lembre-se de que todos começaram de algum lugar, portanto, respeite as dúvidas das pessoas, independentemente do nível delas. Se as ofensas forem direcionadas à moderação, a punição será imediatamente aumentada para 7 dias.
+
+**5. Vocabulário Inadequado**
+
+- 🚫 Punição: 5, 30, 60 (recorrência (3): ban 🔨)
+
+ Utilize um vocabulário apropriado. Palavrões e termos ofensivos serão moderados automaticamente.
+
+**6. Afiliados**
+
+- 🚫 Punição: 1, 3, 7 dias. (recorrência (3): ban 🔨)
+
+ O compartilhamento de links de afiliados não é permitido. Isso polui nosso ambiente e incomoda muitas pessoas.
+
+**7. Venda e Comercialização**
+
+- 🚫 Punição: 1, 3, 7 dias. (recorrência (3): ban 🔨)
+
+ Anunciar ou negociar a venda ou troca de produtos físicos ou digitais na comunidade não é permitido. Em caso de uma operação que ocorra antes da intervenção da moderação e resulte em prejuízo para qualquer parte, não nos responsabilizamos.
+
+**8. Outras Comunidades**
+
+- 🚫 Punição: 5, 30, 60 (recorrência (3): ban 🔨)
+
+ O compartilhamento de links para outras comunidades no Discord, WhatsApp, Telegram e outros serviços não é permitido. Também não é permitida a criação de grupos paralelos ou denominados como DevHatt.
+
+## Redes sociais
+
+- Discord: [https://discord.gg/devhatt](https://discord.gg/devhatt)
+- Twitter: [Devhat (@DevHatt)](https://twitter.com/DevHatt)
+- LinkedIn: [Devhat (@DevHat)](https://www.linkedin.com/company/dev-hat/)
+- Dev.To: [Devhat (@DevHat)](https://dev.to/devhat)
+- YouTube: [YouTube (@devhatt-dailies)](https://www.youtube.com/@devhatt-dailies)
+- YouTube: [YouTube (@devhatt)](https://www.youtube.com/@devhatt)
+
+Junte-se a nós nesta jornada emocionante de tornar a DevHatt a melhor software house em todo o mundo!
diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000..da12308
--- /dev/null
+++ b/docs/CODE_OF_CONDUCT.md
@@ -0,0 +1,47 @@
+### **⚠️ Regras para Convivência Social**
+
+**1. Exercício do Bom Senso**
+
+Pode parecer evidente, mas todas as normas existem para delimitar e enquadrar comportamentos que ultrapassam o bom senso. O exercício do bom senso assegurará que você esteja aderindo às regras em 100% das situações.
+
+**2. Pornografia ou Assédio**
+
+- 🚫 Banimento imediato 🔨
+
+ É terminantemente proibido compartilhar qualquer conteúdo com conotação pornográfica. Não busque brechas na regra, pois ela se aplica a qualquer situação interpretada pela moderação como tal. Da mesma forma, qualquer comportamento que possa ser interpretado como assédio, mesmo subjetivamente, será identificado pela moderação e enquadrado nesta regra.
+
+**3. Discussões sobre Temas Sensíveis**
+
+- 🚫 Punição: 1, 3, 7 dias. (recorrência (3): ban 🔨)
+
+ É proibido totalmente compartilhar imagens, links, menções ou participar de discussões sobre temas políticos, religiosos, assim como debates sobre futebol. Utilize outras plataformas na internet para esse tipo de interação.
+
+**4. Desrespeito e Ofensas**
+
+- 🚫 Punição: 1, 3, 7 dias. (recorrência (3): ban 🔨)
+
+ Seja uma pessoa cortês e empática. Se uma pergunta for feita, responda de maneira respeitosa. Se você não estiver disposto a responder dessa forma, sua resposta não será bem-vinda. Isso inclui comentários, piadas e falas sarcásticas, irônicas ou ofensivas. Lembre-se de que todos começaram de algum lugar, portanto, respeite as dúvidas das pessoas, independentemente do nível delas. Se as ofensas forem direcionadas à moderação, a punição será imediatamente aumentada para 7 dias.
+
+**5. Vocabulário Inadequado**
+
+- 🚫 Punição: 5, 30, 60 (recorrência (3): ban 🔨)
+
+ Utilize um vocabulário apropriado. Palavrões e termos ofensivos serão moderados automaticamente.
+
+**6. Afiliados**
+
+- 🚫 Punição: 1, 3, 7 dias. (recorrência (3): ban 🔨)
+
+ O compartilhamento de links de afiliados não é permitido. Isso polui nosso ambiente e incomoda muitas pessoas.
+
+**7. Venda e Comercialização**
+
+- 🚫 Punição: 1, 3, 7 dias. (recorrência (3): ban 🔨)
+
+ Anunciar ou negociar a venda ou troca de produtos físicos ou digitais na comunidade não é permitido. Em caso de uma operação que ocorra antes da intervenção da moderação e resulte em prejuízo para qualquer parte, não nos responsabilizamos.
+
+**8. Outras Comunidades**
+
+- 🚫 Punição: 5, 30, 60 (recorrência (3): ban 🔨)
+
+ O compartilhamento de links para outras comunidades no Discord, WhatsApp, Telegram e outros serviços não é permitido. Também não é permitida a criação de grupos paralelos ou denominados como DevHatt.
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
new file mode 100644
index 0000000..8e8aebf
--- /dev/null
+++ b/docs/CONTRIBUTING.md
@@ -0,0 +1,56 @@
+# Diretrizes de Contribuição para o Repositório Octopost
+
+Bem-vindo! Agradecemos pelo seu interesse em contribuir para este projeto open source. Suas contribuições são fundamentais para o sucesso e a melhoria contínua deste projeto. Antes de começar, por favor, leia e siga estas diretrizes para garantir um processo de contribuição harmonioso e eficaz.
+
+## Como Contribuir
+
+1. **Forquilhando o Repositório:** Faça um fork deste repositório para sua própria conta GitHub clicando no botão "Fork".
+2. **Clonando o Repositório:** Clone o fork do repositório para a sua máquina local:
+
+```bash
+ git clone
+ cd
+```
+
+3. **Pegue uma Issue:** Para instruções mais detalhadas, acesse **[Pegando uma Issue](./FLOWISSUE.md)**.
+
+4. **Crie uma Branch:** Crie uma branch a partir da develop para trabalhar nas suas alterações:
+
+```bash
+ git checkout develop
+ git reset --hard upstream/develop
+ git checkout -b issue-[numero-da-issue]
+```
+
+5. **Faça Alterações:** Faça as alterações desejadas no código, documentação, ou outros recursos.
+6. **Código:** Siga o Style guide [Styleguide](STYLEGUIDE.md)
+7. **Testes:** Certifique-se de que todas as mudanças são testadas e não introduzem erros.
+8. **Commits Significativos:** Faça commits significativos utilizando o [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) e com mensagens claras. Utilizando comando abaixo e seguindo as instruções o commit ficara no padrão utilizado no projeto.
+9. **Regras:** Leia e siga nossas [Regras](CODE_OF_CONDUCT.md)
+
+```bash
+ git commit -m ": "
+```
+
+1. **Atualize a Documentação:** Se necessário, atualize a documentação relevante para refletir suas mudanças.
+2. **Envie as Alterações:** Envie suas alterações para o seu fork:
+
+```bash
+ git push origin issue-[numero-da-issue]
+```
+
+3. **Criação de Pull Request (PR):** Abra um Pull Request pelo o seu fork para o repositorio do octopost na branch master, descrevendo suas alterações e fornecendo contexto sobre o que foi feito.
+
+## Diretrizes de Contribuição
+
+- **Estilo de Código:** Siga as convenções de estilo de código existentes no projeto.[Style Guide](STYLEGUIDE.md)
+- **Documentação:** Sempre atualize a documentação para refletir mudanças significativas.
+- **Testes:** Certifique-se de que suas alterações não quebram testes existentes. Se necessário, adicione novos testes.
+- **Tamanho das Pull Requests:** PRs menores são mais fáceis de revisar e mesclar. Tente manter o escopo de suas contribuições relativamente pequeno.
+- **Mantenha a Cortesia:** Seja cortês e respeitoso ao discutir e revisar o trabalho de outros contribuidores.
+
+## Reconhecimento
+
+Agradecemos por ajudar a melhorar os projetos DevHatt! Sua dedicação à qualidade e inovação é fundamental para o sucesso contínuo deste projeto.
+
+Se você tiver alguma dúvida ou precisar de ajuda em qualquer etapa do processo de contribuição, sinta-se à vontade para criar um problema (issue) ou entrar em contato com a equipe de mantenedores.[Discord](https://discord.gg/devhatt)
diff --git a/docs/FLOWISSUE.md b/docs/FLOWISSUE.md
new file mode 100644
index 0000000..5fb8002
--- /dev/null
+++ b/docs/FLOWISSUE.md
@@ -0,0 +1,28 @@
+# Contribuindo para os Repositórios
+
+## Passos para Contribuir
+
+1. **Acesse o repositório**.
+
+2. No repositório, clique na guia "Issues". Aqui você encontrará uma lista de "Issues" abertos.
+
+3. Navegue pelas "Issues" e de preferência por uma Issue marcada como "Good First Issue". As "Issues" dessa forma são especialmente indicadas para novos colaboradores e são pontos de partida acessíveis no projeto. Mas, caso não haja nenhuma assim ou você se considere apto a pegar outra sem essa marcação, você possui total liberdade para pegá-la.
+
+4. Depois de escolher uma task, clique nela para obter mais detalhes.
+
+## Expressando Interesse
+
+Dentro da task, você pode expressar seu interesse em trabalhar nela. Você pode adicionar um comentário com a exata seguinte frase `eu quero!!!`.
+
+## Trabalhando na Tarefa
+
+Após comentar, você está apto a trabalhar na task. Uma action irá adicionar sua assinatura a tarefa.
+
+## Abordagem Direta
+
+Se preferir uma abordagem mais direta, você pode entrar no canal de chat geral do Discord do projeto e mencionar o nome da task ("Issue") que você gostaria de fazer. Um dos mantenedores do projeto poderá então atribuir a tarefa a você.
+
+## Lembre-se
+
+- Tarefas com fotos ao lado direito já foram selecionadas por outros colaboradores.
+- Geralmente, você terá uma semana para concluir a tarefa, mas isso pode variar dependendo das políticas do projeto.
diff --git a/docs/STYLEGUIDE.md b/docs/STYLEGUIDE.md
new file mode 100644
index 0000000..0ad909f
--- /dev/null
+++ b/docs/STYLEGUIDE.md
@@ -0,0 +1,423 @@
+# Depende da linguagem, fica abaixo um exemplo do Octopost
+
+# DevHat JavaScript/React Style Guide() {
+
+Reference Style Guide
+
+- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
+- [Airbnb](https://github.com/airbnb/javascript/tree/master)
+
+## Sumário:
+
+1. [Regras básicas](#regras-basicas)
+2. [Estrutura de componentes](#estrutura-de-componentes)
+3. [Criando componentes](#criando-componentes)
+4. [Exportando arquivos](#exportando-arquivos)
+5. [Custom hooks](#custom-hooks)
+6. [Arquivos em PascalCase](#arquivos-em-pascalcase)
+7. [Nomeando coisas](#nomeando-coisas)
+8. [Class Component](#class-component)
+9. [Estilizando componentes](#estilizando-componentes)
+10. [Tipando componentes](#tipando-componentes)
+11. [Testes unitários](#testes-unitários)
+12. [Alt em imagens](#alt-em-imagens)
+13. [Estruturas de pastas](#estrutura-de-pastas)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Regras básicas
+
+- Um componente por arquivo
+- Evite ao máximo o uso de `any` nas tipagens
+- Componentes unicamente em TSX
+- Código apenas em inglês
+ > `Por que? Por mais que todos os contribuídores sejam brasileiros é importante padronizarmos todo o código em inglês para evitar uma mistura de inglês e português, algo do tipo "setNome()", um dos principais motivos também é a acessibilidade, muitas ferramentas de tradução automática e leitores de tela são mais eficazes quando lidam com texto em inglês.`
+
+## Estrutura de componentes
+
+- Separe a pasta do seu componente em 4 arquivos
+ - Componente.tsx (seu componente em si)
+ - Componente.spec.tsx (testes do componente)
+ - Componente.module.scss (seus estilos)
+ - Componente.types.ts (interfaces e types do componente)
+
+```
+├─ components
+│ ├─ MyComponent.module.scss
+│ └─ MyComponent.spec.tsx
+│ └─ MyComponent.tsx
+| └─ MyComponent.types.ts
+```
+
+## Criando componentes
+
+Todos os componentes serão criados em **`funções normais`**, `arrow functions` **apenas** dentro dos componentes
+
+```ts
+// Bom
+function Component(props: IProps) {
+ const handleSomething = () => { /* ... */ }
+ return ( /* ... */ )
+}
+
+// Ruim
+const Component = (props: IProps) => {
+ const handleSomething = () => { /* ... */ }
+ return ( /* ... */ )
+}
+
+// Ruim
+const Component = (props: IProps) => {
+ function handleSomething() { /* ... */ }
+ return ( /* ... */ )
+}
+```
+
+## Exportando arquivos
+
+Iremos usar **SEMPRE** `export default` nos componentes
+
+```ts
+// Bom
+function Component(props: IProps) {
+ return ( /* ... */ )
+}
+
+export default Component
+
+// Ruim
+export function Component(props: IProps) {
+ return ( /* ... */ )
+}
+
+// Ruim
+function Component(props: IProps) {
+ const handleSomething = () => { /* ... */ }
+ return ( /* ... */ )
+}
+```
+
+Com excessão dos componentes, não iremos usar export default
+
+```ts
+// Bom
+export interface IProps {
+ /* ... */
+}
+
+// Ruim
+interface IProps {
+ /* ... */
+}
+export default IProps;
+```
+
+Isso também vale para `custom hooks`
+
+```ts
+// Bom
+export const useHook = () => {
+ /* ... */
+};
+
+// Ruim
+const useHook = () => {
+ /* ... */
+};
+export default useHook;
+```
+
+## Custom hooks
+
+Se precisar criar um custom hook, use `arrow functions`
+
+```ts
+// Bom
+export const useHook = () => {
+ /* ... */
+};
+
+// Ruim
+export function useHook() {
+ /* ... */
+}
+```
+
+## Componentes em PascalCase
+
+Iremos seguir o padrão PascalCase que consiste em nomear todas as palavras com a primeira letra maiúscula.
+
+```
+├─ components
+│ ├─ MyComponentHere.tsx
+```
+
+## Nomeando coisas
+
+Tirando componentes e interfaces, iremos utilizar `camelCase` para nomear tudo.
+
+```ts
+// Bom
+const handleSomething = () => {
+ /* ... */
+};
+
+// Ruim
+const HandleSomething = () => {
+ /* ... */
+};
+
+// Ruim
+const handle_something = () => {
+ /* ... */
+};
+```
+
+Isso Inclue props de componentes
+
+```ts
+
+```
+
+Se a prop é uma string sempre passe entre aspas, única excessão é se você for usar `template string`
+
+```ts
+// Bom
+
+
+// Ruim
+
+```
+
+Oculte parâmetros que sempre serão `true`
+
+```ts
+// Bom
+