Frontend - Stack Tecnológico

O frontend do Módulo Empreendedorismo é uma Single Page Application (SPA) construída com React e TypeScript, utilizando ferramentas modernas de desenvolvimento.

Tecnologias Principais

Tecnologia	Versão	Função
React	19.1.2	Biblioteca UI
TypeScript	5.x	Tipagem estática
Vite	7.1.2	Build tool
MUI	7.3.1	Componentes UI
Zustand	5.0.7	State management
React Query	5.85.3	Server state
React Router	7.8	Roteamento
Axios	1.13.2	HTTP client

Dependências

package.json

{
  "dependencies": {
    // Core
    "react": "^19.1.2",
    "react-dom": "^19.1.2",
    "react-router-dom": "^7.8",

    // UI Components
    "@mui/material": "^7.3.1",
    "@mui/icons-material": "^7.3.1",
    "@mui/x-data-grid": "^8.10.1",
    "@mui/x-date-pickers": "^8.10.0",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",

    // State Management
    "zustand": "^5.0.7",
    "@tanstack/react-query": "^5.85.3",

    // Forms & Validation
    "react-hook-form": "^7.62",
    "zod": "^4.0.17",
    "@hookform/resolvers": "^5.0.1",

    // HTTP
    "axios": "^1.13.2",

    // Rich Text Editor
    "@tiptap/react": "^3.2.0",
    "@tiptap/starter-kit": "^3.2.0",

    // Charts
    "recharts": "^3.5.1",

    // Drag & Drop
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",

    // Utils
    "dayjs": "^1.11.13"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.5.2",
    "typescript": "~5.8.3",
    "eslint": "^9.33.0",
    "prettier": "^3.6.2",
    "vite": "^7.1.2"
  }
}

Estrutura do Projeto

frontend/src/
├── application/        # Lógica de negócio
│   ├── auth/          # Contexto de autenticação
│   ├── profile/       # Lógica de perfil
│   ├── queries/       # React Query hooks
│   └── register/      # Lógica de registro
│
├── infrastructure/     # Integração externa
│   └── api/           # Clientes HTTP
│       ├── auth/
│       ├── business-plans/
│       ├── profile/
│       └── structuring-agent/
│
├── presentation/       # UI Components
│   ├── pages/         # Páginas da aplicação
│   │   ├── login/
│   │   ├── register/
│   │   └── private/
│   │       ├── admin/
│   │       ├── agent/
│   │       └── user/
│   ├── components/    # Componentes reutilizáveis
│   │   ├── common/
│   │   ├── graphs/
│   │   └── KanbanBoard/
│   └── theme/         # Tema e layouts
│
├── store/             # Estado global (Zustand)
│   ├── auth/
│   ├── user/
│   └── onboarding/
│
├── routes/            # Configuração de rotas
├── types/             # TypeScript types
├── schemas/           # Zod schemas
├── utils/             # Funções utilitárias
├── assets/            # Recursos estáticos
└── lib/               # Bibliotecas customizadas

Configuração

Vite Config

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 9501,
    host: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
})

TypeScript Config

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

Scripts

# Desenvolvimento
npm run dev          # Inicia servidor de desenvolvimento

# Build
npm run build        # Build de produção
npm run preview      # Preview do build

# Qualidade de código
npm run lint         # Executar ESLint
npm run format       # Formatar com Prettier

Padrões de Código

Componentes Funcionais

import { FC } from 'react';
import { Box, Typography } from '@mui/material';

interface CardProps {
  title: string;
  children: React.ReactNode;
}

export const Card: FC<CardProps> = ({ title, children }) => {
  return (
    <Box sx={{ p: 2, border: 1, borderRadius: 2 }}>
      <Typography variant="h6">{title}</Typography>
      {children}
    </Box>
  );
};

Hooks Customizados

import { useQuery } from '@tanstack/react-query';
import { getBusinessPlans } from '@/infrastructure/api/business-plans';

export const useBusinessPlans = () => {
  return useQuery({
    queryKey: ['business-plans'],
    queryFn: getBusinessPlans,
  });
};

Zustand Store

import { create } from 'zustand';

interface AuthState {
  accessToken: string | null;
  refreshToken: string | null;
  setTokens: (access: string, refresh: string) => void;
  clearTokens: () => void;
}

export const useAuthStore = create<AuthState>((set) => ({
  accessToken: null,
  refreshToken: null,
  setTokens: (access, refresh) =>
    set({ accessToken: access, refreshToken: refresh }),
  clearTokens: () =>
    set({ accessToken: null, refreshToken: null }),
}));

Validação com Zod

import { z } from 'zod';

export const loginSchema = z.object({
  email: z.string().email('Email inválido'),
  password: z.string().min(8, 'Mínimo 8 caracteres'),
});

export type LoginForm = z.infer<typeof loginSchema>;