Desafio do Pato

Plataforma de gerenciamento de desafios

Sumário

1. Sobre o projeto
   • Feito com
2. Como rodar o projeto
   • Pré-requisitos
   • Instalação
3. Recursos do Projeto
   • Componentes shadcn/ui
   • Tipografia
4. Lint e formatação do Código
   • Processo de Pull Request
   • Padrões de Código
5. Guia de Contribuição
   • Processo de Pull Request
   • Padrões de Código

💭 Sobre o projeto

Front-end da aplicação Desafio do Pato, cujo objetivo visa ampliar e simplificar o processo de nivelamento contínuo dos integrantes da Bichinhos da TI, oferecendo uma interface para criar, gerenciar e participar de desafios técnicos.

(voltar ao topo)

🖥️ Feito com

• 
• 
• 
• 

(voltar ao topo)

🔥 Como rodar o projeto

Pré-requisitos

• npm

  npm install npm@latest -g

• pnpm

  npm install -g pnpm

Instalação

1. Clone o repositório

   git clone https://github.com/Super-Patos-Hackaton/frontend.git

2. Instale as dependências

   pnpm install

3. Prepare os git hooks com Husky

   pnpm prepare

4. Inicie o ambiente de desenvolvimento

   pnpm dev

🎒 Recursos do Projeto

Componentes shadcn/ui

• Para adicionar um novo componente:

  pnpm ui:add <componente>

Tipografia

Para o projeto inteiro, utilizaremos a fonte Geist, desenvolvida pela Vercel. Detalhes sobre os termos de uso podem ser encontrados aqui: Licença GEIST.

As Headings H1, H2 e H3 estarão presentes no projeto. Destas, é importante ressaltar que a H1 deverá conter apenas uma instância por página.

Foram configuradas também as tags p, lead e muted para usos textuais diversos.

Details

1. Importação do componente:

import { Typography } from "@/components/ui/typography"

2. Utilização das tags dentro do tsx:

Tag h1

<Typography.H1>Título h1.</Typography.H1>

Tag h2

<Typography.H2>Título h2.</Typography.H2>

Tag h3

<Typography.H3>Título h3.</Typography.H3>

Tag p padrão

<Typography.P>Parágrafo padrão.</Typography.P>

Tag p com classe lead

<Typography.Lead>Parágrafo de destaque.</Typography.Lead>

Tag p com classe muted

<Typography.Muted>Parágrafo que precisa ter destaque inferior a todos os outros.</Typography.Muted>

(voltar ao topo)

🎨 Lint e formatação do Código

Nesse projeto, serão utilizadas as seguintes ferramentas para linting e formatação:

• 🚦 ESLint - Ferramenta para analisar o código estaticamente e encontrar e corrigir problemas comuns.
• 💄 Prettier - Um formatador de código que ajuda a manter o código consistente e fácil de ler.
• 🐶 Husky - Uma ferramenta para adicionar facilmente hooks do Git ao seu projeto.
• 🔍 commitlint - Uma ferramenta para impor um estilo e formatação consistentes nas mensagens de commit.
• 🐶 lint-staged - Uma ferramenta para rodar scripts de linting e formatação apenas nos arquivos staged para commit.

Formatação e linting manuais

Caso seja necessária realizar manualmente ações de linting e formatação, utilize os seguintes comandos:

• Realizar lint corrigindo os erros encontrados:

pnpm lint --fix

• Realizar lint sem corrigir os erros encontrados:

pnpm lint

• Realizar formatação:

pnpm dlx prettier --write src/**

💡 Guia de Contribuição

Obrigado por considerar contribuir para este projeto! Siga as diretrizes abaixo para garantir um processo de contribuição suave.

Processo de Pull Request

1. Fork o repositório.
2. Crie uma branch para sua feature (git checkout -b feature/nova-feature).
3. Commit suas mudanças (git commit -m 'Adiciona nova feature').
4. Push para a branch (git push origin feature/nova-feature).
5. Abra um Pull Request.

Padrões de Código

• Siga as convenções de estilo de código do projeto.
• Certifique-se de que todos os testes passem antes de abrir um PR.

(voltar ao topo)