|
```markdown
|
|
## 🚀 Como rodar o projeto
|
|
# Saúde Bucal para Quilombos - Frontend
|
|
|
|
|
|
### 📦 Backend
|
|
Este é o repositório frontend do projeto Saúde Bucal para Quilombos, desenvolvido com React, TypeScript, Vite e Tailwind CSS.
|
|
|
|
|
|
1. **Pré-requisitos**:
|
|
## 📋 Pré-requisitos
|
|
- Node.js
|
|
|
|
- Docker
|
|
Antes de começar, certifique-se de ter instalado:
|
|
|
|
|
|
2. **Clonar repositório e acessar pasta**:
|
|
- [Node.js](https://nodejs.org/) (versão 18 ou superior)
|
|
```bash
|
|
- npm (geralmente vem com o Node.js)
|
|
git clone <url-do-repositorio-backend>
|
|
- Git
|
|
cd backend
|
|
|
|
```
|
|
## 🚀 Configuração Inicial
|
|
|
|
|
|
3. **Executar o script de inicialização**:
|
|
Siga os passos abaixo para configurar e iniciar o projeto localmente:
|
|
```bash
|
|
|
|
chmod +x start-backend.sh
|
|
### 1. Clone o repositório
|
|
./start-backend.sh
|
|
|
|
```
|
|
```bash
|
|
|
|
git clone https://tools.ages.pucrs.br/saude-bucal-quilombola/front-end.git
|
|
4. A API estará disponível em `http://localhost:3001`
|
|
cd front-end
|
|
A documentação Swagger pode ser acessada em `http://localhost:3001/api`
|
|
```
|
|
|
|
|
|
---
|
|
### 2. Instale as dependências
|
|
|
|
|
|
### 🎨 Frontend
|
|
```bash
|
|
|
|
npm install
|
|
1. **Pré-requisitos**:
|
|
```
|
|
- Node.js 18+
|
|
|
|
- npm
|
|
### 3. Configure as variáveis de ambiente
|
|
- Git
|
|
|
|
|
|
Crie um arquivo `.env` na raiz do projeto baseado no arquivo `.env.example`:
|
|
2. **Clonar repositório e acessar pasta**:
|
|
|
|
```bash
|
|
```bash
|
|
git clone <url-do-repositorio-frontend>
|
|
cp .env.example .env
|
|
cd front-end
|
|
```
|
|
```
|
|
|
|
|
|
Abra o arquivo `.env` e configure as variáveis necessárias:
|
|
3. **Instalar dependências**:
|
|
|
|
```bash
|
|
```
|
|
npm install
|
|
VITE_API_URL=http://localhost:3001
|
|
```
|
|
```
|
|
|
|
|
|
4. **Configurar variáveis de ambiente**:
|
|
> **Nota**: Ajuste a URL da API conforme necessário para seu ambiente de desenvolvimento.
|
|
```bash
|
|
|
|
cp .env.example .env
|
|
### 4. Inicie o servidor de desenvolvimento
|
|
```
|
|
|
|
Edite o `.env` e ajuste a `VITE_API_URL`, exemplo:
|
|
```bash
|
|
```
|
|
npm run dev
|
|
VITE_API_URL=http://localhost:3001
|
|
```
|
|
```
|
|
|
|
|
|
Isso iniciará o servidor de desenvolvimento Vite. Abra seu navegador e acesse `http://localhost:5173` para ver a aplicação em execução.
|
|
5. **Iniciar o servidor**:
|
|
|
|
```bash
|
|
## 📁 Estrutura de Pastas
|
|
npm run dev
|
|
|
|
```
|
|
```
|
|
|
|
src/
|
|
6. A aplicação estará disponível em `http://localhost:5173`
|
|
├── 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)
|
|
|
|
|
|
|
|
``` |
|
|
|
\ No newline at end of file |
|
|