configuracao

This is an old version of this page. You can view the most recent version or browse the history.

# Saúde Bucal para Quilombos - Frontend

Este é o repositório frontend do projeto Saúde Bucal para Quilombos, desenvolvido com React, TypeScript, Vite e Tailwind CSS.

## 📋 Pré-requisitos

Antes de começar, certifique-se de ter instalado:

- [Node.js](https://nodejs.org/) (versão 18 ou superior)
- npm (geralmente vem com o Node.js)
- Git

## 🚀 Configuração Inicial

Siga os passos abaixo para configurar e iniciar o projeto localmente:

### 1. Clone o repositório

```bash
git clone https://tools.ages.pucrs.br/saude-bucal-quilombola/front-end.git
cd front-end

2. Instale as dependências

npm install

3. Configure as variáveis de ambiente

Crie um arquivo .env na raiz do projeto baseado no arquivo .env.example:

cp .env.example .env

Abra o arquivo .env e configure as variáveis necessárias:

VITE_API_URL=http://localhost:3001

Nota: Ajuste a URL da API conforme necessário para seu ambiente de desenvolvimento.

4. Inicie o servidor de desenvolvimento

npm run dev

Isso iniciará o servidor de desenvolvimento Vite. Abra seu navegador e acesse http://localhost:5173 para ver a aplicação em execução.

📁 Estrutura de Pastas

src/
├── assets/            # Arquivos estáticos (imagens, fontes)
├── components/        # Componentes reutilizáveis
│   ├── common/        # Componentes gerais (botões, inputs)
│   ├── layout/        # Componentes de layout (Header, Footer)
│   └── features/      # Componentes específicos de funcionalidades
├── hooks/             # Hooks personalizados
├── pages/             # Páginas da aplicação
├── routes/            # Configuração de rotas
├── services/          # Serviços e integrações
│   └── api/           # Configurações e chamadas de API
├── store/             # Gerenciamento de estado (se aplicável)
├── styles/            # Estilos globais e temas
├── types/             # Tipos e interfaces TypeScript
├── utils/             # Funções utilitárias
├── App.tsx            # Componente principal
└── main.tsx           # Ponto de entrada da aplicação

🛠️ Scripts Disponíveis

npm run dev - Inicia o servidor de desenvolvimento
npm run build - Compila o projeto para produção
npm run lint - Executa o linter para verificar o código
npm run preview - Pré-visualiza a build de produção localmente
npm run tailwind:init - Inicializa o Tailwind CSS (já executado)