📱 Front-End Connectia GS2 🎯 Descrição do Projeto Este repositório contém a aplicação front-end do projeto Connectia GS2, desenvolvida com React e TypeScript. A aplicação fornece uma interface moderna, responsiva e intuitiva para interação com a API do projeto Connectia.

🛠 Tecnologias Utilizadas Principais Tecnologias ⚛️ React 18 - Biblioteca para construção de interfaces

🔷 TypeScript - Superset JavaScript com tipagem estática

🛣️ React Router DOM - Roteamento para Single Page Application

🎨 CSS3 - Estilização e design responsivo

📱 HTML5 - Estrutura semântica

Ferramentas de Desenvolvimento ⚡ Vite (ou Create React App)

🔍 ESLint - Análise estática de código

💅 Prettier - Formatação de código

🐛 React Testing Library - Testes de componentes

📁 Estrutura do Projeto text Front-End/ ├── 📂 public/ │ ├── 📄 index.html │ ├── 🎯 favicon.ico │ └── 🔧 manifest.json ├── 📂 src/ │ ├── 📂 components/ # Componentes reutilizáveis │ │ ├── 🎨 Header/ │ │ ├── 🔘 Button/ │ │ └── 📊 Modal/ │ ├── 📂 pages/ # Páginas da aplicação │ │ ├── 🏠 Home/ │ │ ├── 👤 Profile/ │ │ └── ⚙️ Settings/ │ ├── 📂 services/ # Integração com APIs │ │ ├── 🔗 api.ts │ │ └── 🛡️ auth.ts │ ├── 📂 styles/ # Estilização global │ │ ├── 🌍 globals.css │ │ └── 🎪 variables.css │ ├── 📂 types/ # Definições TypeScript │ │ ├── 👤 user.types.ts │ │ └── 🏠 app.types.ts │ ├── 📂 utils/ # Funções utilitárias │ │ ├── 🔧 helpers.ts │ │ └── 🏷️ constants.ts │ ├── 📄 App.tsx # Componente principal │ ├── 📄 index.tsx # Ponto de entrada │ └── 🔧 router.tsx # Configuração de rotas ├── 📄 package.json ├── 📄 .env.example # Variáveis de ambiente exemplo ├── 📄 .gitignore └── 📄 README.md 🚀 Como Executar o Projeto Pré-requisitos 💻 Node.js (versão 16 ou superior)

📦 npm ou yarn instalado

Passo a Passo para Instalação 📥 Clone o repositório

bash git clone https://github.com/GS-2-Connectia/Front-End.git cd Front-End 📦 Instale as dependências

bash npm install

ou

yarn install ⚙️ Configure as variáveis de ambiente

bash

Copie o arquivo de exemplo

cp .env.example .env

Edite o arquivo .env com suas configurações:

REACT_APP_API_URL=http://localhost:3001/api REACT_APP_ENVIRONMENT=development 🎬 Execute a aplicação

bash npm start

ou

yarn start 🌐 Acesse a aplicação

text Abra seu navegador e acesse: http://localhost:3000 📜 Scripts Disponíveis Desenvolvimento bash npm start # Inicia servidor de desenvolvimento npm run dev # Alternativa para desenvolvimento Build e Produção bash npm run build # Gera build de produção npm run serve # Serve o build de produção localmente Qualidade de Código bash npm test # Executa testes npm run lint # Analisa código com ESLint npm run type-check # Verifica tipos TypeScript Utilitários bash npm run clean # Limpa arquivos temporários npm run format # Formata código com Prettier 🔧 Configuração de Desenvolvimento Convenções de Código 🎯 Componentes Funcionais com Hooks

🔷 Tipagem Estrita com TypeScript

🎨 CSS Modules para estilização

📁 Estrutura Modular de componentes

Padrão de Componentes Cada componente segue a estrutura:

typescript // Componente.tsx import styles from './Componente.module.css';

interface ComponenteProps { title: string; onClick: () => void; }

export const Componente: React.FC = ({ title, onClick }) => { return (

{title}

Clique

); }; Estilização css /* Componente.module.css */ .container { padding: 1rem; border: 1px solid #ccc; }

.title { font-size: 1.5rem; color: #333; } 🌐 Deploy e Produção Build de Produção bash npm run build Arquivos Gerados 📁 build/ - Contém os arquivos otimizados para produção

📄 Arquivos estáticos (HTML, CSS, JS)

🖼️ Assets otimizados

Ambientes de Deploy 🚀 Netlify - Deploy contínuo via Git

⚡ Vercel - Deploy automático

☁️ AWS S3 + CloudFront - Hospedagem estática

🐙 GitHub Pages - Para demonstrações

🤝 Guia de Contribuição

1. 📋 Pré-requisitos Conhecimento em React e TypeScript

Familiaridade com Git

Node.js instalado

2. 🔄 Processo de Contribuição 🍴 Faça um Fork do projeto

🌿 Crie uma Branch

bash git checkout -b feature/nova-feature 💻 Desenvolva sua Feature

Siga os padrões de código

Adicione testes quando necessário

Atualize a documentação

✅ Commit das Mudanças

bash git add . git commit -m "feat: adiciona nova funcionalidade" 📤 Push para a Branch

bash git push origin feature/nova-feature 🔀 Abra um Pull Request

3. 🎨 Convenções Commits: Seguir padrão Conventional Commits

Código: Manter tipagem TypeScript rigorosa

Estilos: Usar CSS Modules para escopo local

Testes: Cobrir funcionalidades críticas

🐛 Reportar Problemas Como Reportar Bugs 📝 Use o template de issues

🔍 Descreva o passo a passo para reproduzir

💻 Inclua informações do ambiente:

Navegador e versão

Sistema Operacional

Versão do Node.js

Solicitar Features 🎯 Descreva a funcionalidade desejada

📊 Explique o caso de uso

💡 Sugira uma implementação (opcional)

📞 Suporte e Contato Canais de Comunicação 📧 Email: [inserir email da equipe]

💬 Slack/Discord: [inserir link do canal]

🐙 Issues GitHub: Para bugs e features

Equipe de Desenvolvimento 👨‍💻 Desenvolvedores Front-End

🎨 Designers UI/UX

🧪 QA Testers

📊 Status do Projeto 🚧 Desenvolvimento Ativo Novas features sendo implementadas

Melhorias de performance contínuas

Refatoração e otimização

📈 Próximas Atualizações Integração com PWA

Otimização SEO

Internacionalização

Dashboard administrativo