... | @@ -40,7 +40,7 @@ code --install-extension yoavbls.pretty-ts-errors |
... | @@ -40,7 +40,7 @@ code --install-extension yoavbls.pretty-ts-errors |
|
Para o fronted do projeto, utilizaremos a linguagem Next.js + Tailwind CSS + TypeScript + ESLint + Prettier
|
|
Para o fronted do projeto, utilizaremos a linguagem Next.js + Tailwind CSS + TypeScript + ESLint + Prettier
|
|
- https://nextjs.org/docs
|
|
- https://nextjs.org/docs
|
|
|
|
|
|
### Rodando a aplicação:
|
|
**Rodando a aplicação:**
|
|
|
|
|
|
Primeiro, execute o comando abaixo para rodar a aplicação:
|
|
Primeiro, execute o comando abaixo para rodar a aplicação:
|
|
|
|
|
... | @@ -50,13 +50,13 @@ npm run dev |
... | @@ -50,13 +50,13 @@ npm run dev |
|
|
|
|
|
Abra o link [text](http://localhost:3000) no seu navegador para ver os resultados.
|
|
Abra o link [text](http://localhost:3000) no seu navegador para ver os resultados.
|
|
|
|
|
|
### Nomenclatura de arquivos
|
|
**Nomenclatura de arquivos:**
|
|
|
|
|
|
- Arquivos de páginas devem ser nomeados em kebab-case (exemplo: `src/app/my-page/page.tsx`)
|
|
- Arquivos de páginas devem ser nomeados em kebab-case (exemplo: `src/app/my-page/page.tsx`)
|
|
- Arquivos de componentes devem ser nomeados em PascalCase (exemplo: `src/components/MyComponent/MyComponent.tsx`)
|
|
- Arquivos de componentes devem ser nomeados em PascalCase (exemplo: `src/components/MyComponent/MyComponent.tsx`)
|
|
- Arquivos de componentes de UI devem ser nomeados em PascalCase (exemplo: `src/components/ui/MyComponent.tsx`)
|
|
- Arquivos de componentes de UI devem ser nomeados em PascalCase (exemplo: `src/components/ui/MyComponent.tsx`)
|
|
|
|
|
|
### Desenvolvimento
|
|
**Desenvolvimento:**
|
|
|
|
|
|
- *Cores*: Utilizar as varívais de estilização do tailwind ( exemplos de uso em `src/app/examples` )
|
|
- *Cores*: Utilizar as varívais de estilização do tailwind ( exemplos de uso em `src/app/examples` )
|
|
- *Tipografia*: Utilizar componente de Text do `src/components/ui/Text.tsx` ( exemplos de uso em `src/app/examples` )
|
|
- *Tipografia*: Utilizar componente de Text do `src/components/ui/Text.tsx` ( exemplos de uso em `src/app/examples` )
|
... | @@ -65,14 +65,14 @@ Abra o link [text](http://localhost:3000) no seu navegador para ver os resultado |
... | @@ -65,14 +65,14 @@ Abra o link [text](http://localhost:3000) no seu navegador para ver os resultado |
|
- *Código*: Desenvolver o código em inglês
|
|
- *Código*: Desenvolver o código em inglês
|
|
- *Formatação*: Antes de commitar rodar `npm run lint -- --fix` para corrigir os erros de formatação, erros no código apontados pelo eslint devem ser corrigidos na mão, ecitar o uso do `// eslint-disable-next-line` para ignorar os erros
|
|
- *Formatação*: Antes de commitar rodar `npm run lint -- --fix` para corrigir os erros de formatação, erros no código apontados pelo eslint devem ser corrigidos na mão, ecitar o uso do `// eslint-disable-next-line` para ignorar os erros
|
|
|
|
|
|
### Páginas
|
|
**Páginas:**
|
|
|
|
|
|
- Arquivos de páginas devem ser criados na pasta `src/app/<page-name>/page.tsx` ( page-name em kebab-case )
|
|
- Arquivos de páginas devem ser criados na pasta `src/app/<page-name>/page.tsx` ( page-name em kebab-case )
|
|
- Functions de página devem ser nomeadas com a primeira letra maiúscula ( PascalCase )
|
|
- Functions de página devem ser nomeadas com a primeira letra maiúscula ( PascalCase )
|
|
- Páginas NÃO devem ser client components ( não devem ter `use client` ), a menos que seja necessário
|
|
- Páginas NÃO devem ser client components ( não devem ter `use client` ), a menos que seja necessário
|
|
- Paginas de exemplo de uso de componente devem ser criadas em `src/app/examples/<page-name>/page.tsx` ( page-name em kebab-case; Idealmente não devem ser comitadas )
|
|
- Paginas de exemplo de uso de componente devem ser criadas em `src/app/examples/<page-name>/page.tsx` ( page-name em kebab-case; Idealmente não devem ser comitadas )
|
|
|
|
|
|
### Componentes
|
|
**Componentes:**
|
|
|
|
|
|
- Arquivos de componentes devem ser criados na pasta `src/components/<ComponentName>/` ( ComponentName em PascalCase )
|
|
- Arquivos de componentes devem ser criados na pasta `src/components/<ComponentName>/` ( ComponentName em PascalCase )
|
|
- Rota completa: `src/components/<ComponentName>/<ComponentName>.tsx` ( ComponentName em PascalCase )
|
|
- Rota completa: `src/components/<ComponentName>/<ComponentName>.tsx` ( ComponentName em PascalCase )
|
... | @@ -80,7 +80,7 @@ Abra o link [text](http://localhost:3000) no seu navegador para ver os resultado |
... | @@ -80,7 +80,7 @@ Abra o link [text](http://localhost:3000) no seu navegador para ver os resultado |
|
- Arquivos de componentes devem ser nomeados com o mesmo nome da pasta
|
|
- Arquivos de componentes devem ser nomeados com o mesmo nome da pasta
|
|
- Arquivos relacionados a um componente devem ser criados na mesma pasta ( caso este não seja utilizado em outros componentes )
|
|
- Arquivos relacionados a um componente devem ser criados na mesma pasta ( caso este não seja utilizado em outros componentes )
|
|
|
|
|
|
### Componentes de UI
|
|
**Componentes de UI:**
|
|
|
|
|
|
- Componentes de UI são componentes que não possuem lógica de negócio, apenas estilização e renderização de dados
|
|
- Componentes de UI são componentes que não possuem lógica de negócio, apenas estilização e renderização de dados
|
|
- Componentes de UI devem ser criados na pasta `src/components/ui/`
|
|
- Componentes de UI devem ser criados na pasta `src/components/ui/`
|
... | @@ -88,7 +88,7 @@ Abra o link [text](http://localhost:3000) no seu navegador para ver os resultado |
... | @@ -88,7 +88,7 @@ Abra o link [text](http://localhost:3000) no seu navegador para ver os resultado |
|
- Arquivos de componentes de UI devem ser o mais genérico possivel
|
|
- Arquivos de componentes de UI devem ser o mais genérico possivel
|
|
- Arquivos de componentes de UI devem ser nomeados com a primeira letra maiúscula
|
|
- Arquivos de componentes de UI devem ser nomeados com a primeira letra maiúscula
|
|
|
|
|
|
### Component x Function/Arrow Function
|
|
**Component x Function/Arrow Function:**
|
|
|
|
|
|
- Componentes devem ser criados como function components ( export default function ) `ComponentName em PascalCase`
|
|
- Componentes devem ser criados como function components ( export default function ) `ComponentName em PascalCase`
|
|
- Funções são criadas dentro de componentes, não devem ser exportadas ( const = () => { ... } ) `functionName em camelCase`
|
|
- Funções são criadas dentro de componentes, não devem ser exportadas ( const = () => { ... } ) `functionName em camelCase`
|
... | @@ -98,7 +98,7 @@ Abra o link [text](http://localhost:3000) no seu navegador para ver os resultado |
... | @@ -98,7 +98,7 @@ Abra o link [text](http://localhost:3000) no seu navegador para ver os resultado |
|
Para o backend do projeto, utilizaremos a linguagem Nest.js
|
|
Para o backend do projeto, utilizaremos a linguagem Nest.js
|
|
- https://docs.nestjs.com/
|
|
- https://docs.nestjs.com/
|
|
|
|
|
|
### Banco de Dados
|
|
**Banco de Dados:**
|
|
|
|
|
|
Crie e execute o container do banco de dados usando os comandos abaixo:
|
|
Crie e execute o container do banco de dados usando os comandos abaixo:
|
|
|
|
|
... | @@ -137,7 +137,7 @@ npm run prisma:reset |
... | @@ -137,7 +137,7 @@ npm run prisma:reset |
|
npm run prisma:update
|
|
npm run prisma:update
|
|
```
|
|
```
|
|
|
|
|
|
### Nomenclatura de arquivos
|
|
**Nomenclatura de arquivos:**
|
|
|
|
|
|
- Diretórios (pastas) devem ser nomeados em `camelCase` (exemplo: `src/controllers`)
|
|
- Diretórios (pastas) devem ser nomeados em `camelCase` (exemplo: `src/controllers`)
|
|
- Todos os arquivos devem ser nomeados em `camelCase` (exemplo: `src/controllers/userExercise.controller.ts`)
|
|
- Todos os arquivos devem ser nomeados em `camelCase` (exemplo: `src/controllers/userExercise.controller.ts`)
|
... | @@ -145,7 +145,7 @@ npm run prisma:update |
... | @@ -145,7 +145,7 @@ npm run prisma:update |
|
- Arquivos de DTO devem, além de seguir os padrões anteriores, possuir o sufixo `DTO` (exemplo: o DTO de recebido de um exercício de usuário, deve ser nomeado `userExerciseDTO.dto.ts`)
|
|
- Arquivos de DTO devem, além de seguir os padrões anteriores, possuir o sufixo `DTO` (exemplo: o DTO de recebido de um exercício de usuário, deve ser nomeado `userExerciseDTO.dto.ts`)
|
|
- Arquivos de teste devem estar dentro de um diretório `tests` dentro do diretório arquitetural correspondente e devem ter a denominação `spec` ( exemplo: `src/controllers/tests/userExercise.controller.spec.ts` )
|
|
- Arquivos de teste devem estar dentro de um diretório `tests` dentro do diretório arquitetural correspondente e devem ter a denominação `spec` ( exemplo: `src/controllers/tests/userExercise.controller.spec.ts` )
|
|
|
|
|
|
### Desenvolvimento
|
|
**Desenvolvimento:**
|
|
|
|
|
|
- *Rotas*:
|
|
- *Rotas*:
|
|
- Objetos Controllers devem ser nomeados em `PascalCase` (exemplo: `export class UserExerciseController`)
|
|
- Objetos Controllers devem ser nomeados em `PascalCase` (exemplo: `export class UserExerciseController`)
|
... | | ... | |