🛠️ Guia Completo para Desenvolvimento do Projeto

🦸‍♂️ Heróis da Frontend Fusion, unam-se! 🦸‍♀️

Para construirmos um portfólio colaborativo forte e inspirador, é fundamental que sigamos os requisitos técnicos estabelecidos neste guia. Ele apresenta diretrizes essenciais para o desenvolvimento do projeto, com o objetivo de garantir uma estrutura sólida e práticas de codificação de alta qualidade.

A seguir, iremos explorar as tecnologias a serem utilizadas, a arquitetura do projeto, as melhores práticas recomendadas e o fluxo de trabalho colaborativo que nos permitirá alcançar nossos objetivos juntos.

1. 🚀 Tecnologias e Ferramentas Essenciais

Para a construção deste projeto, utilizaremos um conjunto de tecnologias que facilitarão o desenvolvimento e garantirão a performance da aplicação.

• Vite: Construtor de aplicação que proporciona um ambiente de desenvolvimento rápido e modular.
• React: Framework principal para a construção da interface do usuário.
• TypeScript: Utilizado para a tipagem estática dos dados, aumentando a segurança e previsibilidade do código.

Configuração e Compilação

• Compilador SWC: Usado para otimizar o desempenho e acelerar o processo de build, compatível com TypeScript.
• Tailwind CSS: Framework CSS que permite um design responsivo, leve e altamente customizável.
• clsx: Utilizado para o gerenciamento eficiente de classes CSS, facilitando a combinação e a lógica condicional na estilização.

2. 🗂️ Estrutura e Organização do Projeto

Para assegurar uma arquitetura escalável e de fácil manutenção, o projeto seguirá o padrão MVC (Model-View-Controller). Essa abordagem garante uma clara separação de responsabilidades:

• Modelo (Model): Responsável pela estrutura e gerenciamento dos dados.
• Visão (View): Focaliza a apresentação e interação com o usuário.
• Controlador (Controller): Gerencia a lógica e o fluxo da aplicação.

Convenções de Nomenclatura e Estrutura de Código

• Pastas e arquivos devem seguir convenções semânticas.
• Variáveis e componentes devem ter nomes descritivos e consistentes.

3. 🧩 Componentização e Hooks Customizados

O desenvolvimento será orientado para componentes modulares e reutilizáveis, garantindo uma tipagem forte e precisa.

• Componentes: Devem ser construídos com TypeScript, utilizando Component Props.
• Hooks Customizados: Implementados para encapsular lógica de estado e efeitos colaterais, com nomes que começam com use (ex.: useFetchData, useUserAuth).

4. 📊 Gerenciamento de Estado, Formulários e Requisições HTTP

Gerenciamento de Estado

O estado da aplicação será centralizado em Zustand, permitindo uma gestão de estado eficiente e escalável.

Gerenciamento de Formulários

• React Hook Form: Para a gestão de formulários, proporcionando uma abordagem orientada a performance.
• Yup: Usado para validação dos dados dos formulários, garantindo conformidade com as regras de negócio.

Requisições HTTP

• As requisições à API serão gerenciadas com Axios em conjunto com TanStack Query.
• Todos os dados enviados e recebidos pela API devem ser rigorosamente tipados para assegurar a compatibilidade entre frontend e backend.

Formatação de Dados para API

• Cada requisição deve seguir um formato de dados pré-definido para garantir a integridade e compatibilidade com o backend.

5. 🏗️ Padrões de Código e Boas Práticas

Para garantir a qualidade e manutenibilidade do código, siga os princípios de SOLID e Clean Code.

• Responsabilidade Única: Cada função e componente deve ter uma única responsabilidade claramente definida.
• Modularidade: Estruture o código em módulos independentes e reutilizáveis.

Lógica de Negócio e Interface

A lógica de negócio deve ser mantida fora da camada de visualização, isolando regras e cálculos complexos de componentes visuais.

6. ✅ Testes e Garantia de Qualidade

Embora os testes unitários não sejam obrigatórios, são altamente recomendados:

• Cobertura Mínima: Testar funcionalidades críticas, como cálculos e manipulação de estado.
• Biblioteca de Testes: Utilize bibliotecas como Jest ou React Testing Library para facilitar o processo de testes.

7. 🛠️ Fluxo de Trabalho Colaborativo e Git Flow

Para uma colaboração organizada, todos os desenvolvedores devem seguir o Git Flow.

• Branches Principais: Utilize main para produção e develop para o desenvolvimento principal.
• Branches de Feature: Cada funcionalidade deve ter uma branch específica (ex.: feature/nome-da-feature).
• Branch de Hotfix: Correções de bugs críticos devem ser realizadas em uma branch de hotfix, que deve ser mesclada em main e develop.

Cada tarefa atribuída deve ser desenvolvida exclusivamente na funcionalidade ou branch designada.

---

Este guia visa assegurar que o projeto seja desenvolvido de forma estruturada, seguindo práticas modernas que promovem um ambiente colaborativo. A adesão a essas diretrizes resultará em um código sustentável e de alta qualidade.