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

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

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

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

📂 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

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