|
|
|
# Pão dos Pobres Front-End
|
|
|
|
|
|
|
|
## 📌 Visão Geral
|
|
|
|
|
|
|
|
Este repositório contém o **Front-End do projeto Pão dos Pobres**. A aplicação será construída com **React** e **TypeScript**, empacotada pelo **Vite** para garantir builds rápidos, e estilizada com **Tailwind CSS** para manter consistência visual e produtividade no desenvolvimento.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
# 🛠 Tecnologias Utilizadas
|
|
|
|
|
|
|
|
## React
|
|
|
|
Biblioteca JavaScript usada para construir **interfaces de usuário dinâmicas e interativas**.
|
|
|
|
Permite criar **componentes reutilizáveis**, o que facilita a manutenção e a escalabilidade de grandes aplicações web.
|
|
|
|
[Documentação](https://react.dev/)
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## TypeScript
|
|
|
|
Superset do JavaScript que adiciona **tipagem estática**.
|
|
|
|
Ajuda a detectar erros em tempo de desenvolvimento, melhora a **confiabilidade** e a **manutenção do código**, além de oferecer recursos modernos da linguagem.
|
|
|
|
[Documentação](https://www.typescriptlang.org/)
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Tailwind CSS
|
|
|
|
Framework de CSS utilitário que permite construir interfaces de forma **rápida e consistente**, usando classes pré-definidas.
|
|
|
|
Substitui a necessidade de escrever grande parte de CSS manual, mantendo o código mais **organizado e padronizado**.
|
|
|
|
[Documentação](https://tailwindcss.com/)
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Vite
|
|
|
|
Ferramenta de build extremamente rápida para projetos frontend.
|
|
|
|
Oferece **hot module replacement (HMR)** quase instantâneo no desenvolvimento e builds otimizados para produção.
|
|
|
|
Facilita o desenvolvimento com React, TypeScript e outras bibliotecas modernas.
|
|
|
|
[Documentação](https://vitejs.dev/)
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 📂 Estrutura de Pastas e Arquivos
|
|
|
|
|
|
|
|
### **Raiz do Projeto**
|
|
|
|
- `index.html` → HTML principal utilizado pelo Vite.
|
|
|
|
- `package.json` → Gerenciamento de dependências e scripts.
|
|
|
|
- `README.md` → Documentação inicial do projeto.
|
|
|
|
- `tailwind.config.js` → Configuração do Tailwind CSS.
|
|
|
|
- `tsconfig.json / tsconfig.app.json / tsconfig.node.json` → Configurações do TypeScript.
|
|
|
|
- `vite.config.ts` → Configuração do Vite.
|
|
|
|
- `eslint.config.js` → Configuração do ESLint.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### **Pastas**
|
|
|
|
- **`public/`**
|
|
|
|
Arquivos estáticos (imagens, ícones, etc).
|
|
|
|
Servidos diretamente pelo servidor.
|
|
|
|
|
|
|
|
- **`src/`**
|
|
|
|
Código-fonte principal da aplicação.
|
|
|
|
Estrutura:
|
|
|
|
- `App.tsx` → Componente principal da aplicação.
|
|
|
|
- `App.css / index.css` → Estilos globais e do app.
|
|
|
|
- `main.tsx` → Ponto de entrada da aplicação React.
|
|
|
|
|
|
|
|
#### Subpastas dentro de `src/`
|
|
|
|
- **`assets/`** → Imagens e ícones usados no projeto.
|
|
|
|
- **`components/`** → Componentes reutilizáveis.
|
|
|
|
- `layout/` → Componentes de layout (ex: Navbar, AppShell).
|
|
|
|
- `ui/` → Componentes de interface (botões, inputs, etc).
|
|
|
|
- **`constant/`** → Constantes globais (ex: rotas).
|
|
|
|
- **`hooks/`** → Hooks personalizados do React.
|
|
|
|
- **`lib/`** → Configurações ou bibliotecas auxiliares (ex: inicialização de libs externas).
|
|
|
|
- **`pages/`** → Páginas da aplicação (Home, NotFound, etc).
|
|
|
|
- **`services/`** → Serviços para chamadas de API.
|
|
|
|
- **`skeletons/`** → Componentes de loading/skeleton.
|
|
|
|
- **`types/`** → Tipos TypeScript usados no projeto.
|
|
|
|
- **`utils/`** → Funções utilitárias.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## ⚙️ Como Rodar o Projeto
|
|
|
|
|
|
|
|
### 1. Instalar dependências
|
|
|
|
```bash
|
|
|
|
1 - npm install
|
|
|
|
|
|
|
|
2 - npm run dev
|
|
|
|
|
|
|
|
3 - npm run build
|
|
|
|
|
|
|
|
4 - npm run preview
|
|
|
|
```
|
|
|
|
|
|
|
|
# 📝 Boas Práticas
|
|
|
|
## Estrutura do Código
|
|
|
|
- **Edite apenas arquivos dentro de `src/`** para modificar o funcionamento da aplicação.
|
|
|
|
- Arquivos de configuração (`*.config.js`, `tsconfig*.json`, etc.) normalmente **não precisam ser alterados**, exceto para ajustes avançados.
|
|
|
|
- Para adicionar novas páginas:
|
|
|
|
- Crie arquivos em `src/pages/`.
|
|
|
|
- Configure as rotas em `src/constant/routes.ts`.
|
|
|
|
- Componentes reutilizáveis devem ser criados em `src/components/ui/`.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Estilos
|
|
|
|
- Utilize **classes utilitárias do Tailwind CSS** sempre que possível.
|
|
|
|
- Evite CSS customizado fora dos arquivos `App.css` e `index.css`.
|
|
|
|
- Prefira consistência visual criando componentes de UI reutilizáveis (botões, inputs, etc.).
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Componentes
|
|
|
|
- Nomeie os componentes em **PascalCase** (exemplo: `Navbar.tsx`, `UserCard.tsx`).
|
|
|
|
- Mantenha componentes pequenos e com **uma única responsabilidade**.
|
|
|
|
- Componentes de layout ficam em `src/layout/`.
|
|
|
|
- Componentes de UI genéricos ficam em `src/components/ui/`.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Versionamento
|
|
|
|
- Crie branches descritivas (exemplo: `feature/login-page`, `fix/navbar-bug`).
|
|
|
|
- Faça commits curtos e objetivos.
|
|
|
|
- Faça mensagens de commit em inglês |
|
|
|
\ No newline at end of file |
