Estrutura de Projeto Frontend Profissional: Meu Teste Técnico

July 31, 2025 (9mo ago)

Olá! 👋

Recentemente realizei um teste técnico para uma vaga frontend sênior e aproveitei para mostrar como estruturo projetos com qualidade de ponta a ponta, usando as ferramentas que mais gosto.

Neste artigo, explico como montei o projeto, o que usei e por que escolhi cada ferramenta.

🧰 Stack utilizada

Tecnologia Função
Next.js (App Router) Framework base, com rotas modernas
TypeScript Tipagem estática em todo o projeto
Tailwind CSS Estilização rápida e responsiva
React Query Gerenciamento de estado assíncrono
Zod Validação de dados do formulário
React Hook Form Formulários performáticos e integráveis
Vitest Testes unitários e de integração
Testing Library Testes de interface focados no usuário
ESLint + Prettier Padronização de código
Husky + Lint-Staged Garantia de qualidade nos commits
CI com GitHub Actions Automatização de testes e lint na PR

📁 Estrutura de pastas

src/
├── components/
├── hooks/
├── pages/ (ou app/ com App Router)
├── services/ (API)
├── schemas/ (Zod)
├── tests/
├── utils/

✅ Testes com Vitest + Testing Library

import { render, screen } from "@testing-library/react";
import { Button } from "@/components/Button";
 
describe("Button", () => {
  it("deve renderizar o botão com o texto", () => {
    render(<Button>Enviar</Button>);
    expect(screen.getByText("Enviar")).toBeInTheDocument();
  });
});

Rodar testes:

pnpm test

💅 Lint, Prettier e Husky

ESLint com eslint-config-next + regras personalizadas

Prettier com regras declaradas no .prettierrc

Husky com pre-commit para rodar lint-staged

// package.json (resumo)
"scripts": {
"lint": "next lint",
"format": "prettier --write .",
"test": "vitest"
}
# Commits só são aceitos se passar os linters e testes
 
npx husky add .husky/pre-commit "pnpm lint && pnpm test"

🔁 GitHub Actions

Fluxo automatizado que roda testes e lint a cada PR:

 
# .github/workflows/ci.yml
 
name: CI
 
on:
pull_request:
branches: [main]
 
jobs:
test:
runs-on: ubuntu-latest
steps: - uses: actions/checkout@v4 - uses: pnpm/action-setup@v2
with:
version: 8 - run: pnpm install - run: pnpm lint - run: pnpm test

📸 Resultado final

A entrega foi uma aplicação com:

Interface acessível e responsiva

Testes de componentes, formulários e hooks

Validação de dados no front com Zod

CI funcional no GitHub

Código limpo, padronizado e pronto para escalar

✍️ Conclusão

Mesmo em testes técnicos, acredito que mostrar qualidade no código e preocupação com arquitetura, testes e confiabilidade faz toda a diferença.

Se quiser conferir o projeto, aqui está o repositório:

👉 github.com/allisson-lima/mini-blog-DEV.to

LinkedIn