Frontend

Instalando Vite e Criando um Projeto React

Este guia explica como instalar o Vite e iniciar um novo projeto React passo a passo.

Pré-requisitos

Node.js (versão LTS recomendada – 20 ou superior).
Verifique se está instalado:
```
node -v
npm -v
```
Caso não esteja instalado, baixe pelo site oficial ou use o gerenciador de pacotes da sua distribuição Linux.

Criar o projeto com Vite

Abra o terminal na pasta onde deseja criar o projeto.
Execute:
```
npm create vite@latest nome-do-projeto
```
Escolha:
- Framework: React
- Variante: JavaScript ou TypeScript (conforme sua preferência).
Entre na pasta do projeto:
```
cd nome-do-projeto
```
Instale as dependências:
```
npm install
```

Estrutura inicial do projeto com vite

nome-do-projeto/
├─ public/           # Arquivos públicos (favicon, logos)
├─ src/              # Código-fonte React
│  ├─ App.jsx/tsx    # Componente principal
│  ├─ main.jsx/tsx   # Ponto de entrada da aplicação
│  └─ index.css      # Estilos globais
├─ package.json      # Dependências e scripts
└─ vite.config.js    # Configuração do Vite

Dicas úteis

Extensão ES7+ React/Redux snippets no VS Code para criar componentes rapidamente.
Use Prettier para formatar automaticamente o código.

Backend

Criar diretório do backend

``` bash
mkdir backend
cd backend
```

Inicializar projeto Node.js

``` bash
npm init -y
```

Instalar dependências

``` bash
npm install express cors dotenv
npm install -D nodemon
```

Criar a pasta src e subpastas

```bash
mkdir src
mkdir src/controllers
mkdir src/routes
mkdir src/models
```

Criar arquivo principal (src/index.js)

```bash
touch src/index.js
```

Conteúdo para o arquivo src/index.js

```bash
const express = require('express');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// Middlewares
app.use(cors());
app.use(express.json());

// Rotas
app.get('/api/health', (req, res) => {
res.json({ message: 'Backend está funcionando!' });
});

// Iniciar servidor
app.listen(PORT, () => {
console.log(`🚀 Servidor rodando na porta ${PORT}`);
});
```
--------------------------------------------------------------

Criar o arquivo de variáveis de ambiente

```bash
touch .env
```

Conteúdo para o arquivo .env

```bash
PORT=5000
NODE_ENV=development
```

Rodar o servidor de desenvolvimento

Frontend:

cd frontend
npm run dev

O terminal mostrará algo como:

Local:   http://localhost:5173/

Abra esse endereço no navegador para visualizar o projeto rodando.

Backend:

cd backend
npm run dev