Loading repository data…
gfpaiva / repository
Este repositório contém o serviço de frontend para a plataforma Blog Aulas, desenvolvido como parte de um Tech Challenge do curso Full Stack Development da FIAP.
Interface Web responsiva construída com Next.js do "Blog Aulas", conectando professores e alunos.
O Blog Aulas é uma plataforma educacional que permite a professores publicarem aulas e a alunos consumirem esse conteúdo publicamente. A interface foi construída priorizando performance (SSG/SSR híbrido).
Papel dos usuários:
| Categoria | Tecnologia | Versão |
|---|---|---|
| Framework | Next.js (App Router) | 16.1.7 |
| Linguagem | TypeScript | ^5 |
| Runtime | React | 19.2.3 |
| Estilização | Tailwind CSS v4 + DaisyUI v5 | ^4 / ^5 |
| Estado Global | Zustand | ^5.0.12 |
| Data Fetching (Client) | TanStack Query | ^5.90.21 |
| Formulários | React Hook Form + Zod | ^7 / ^4 |
| Ícones | Lucide React | ^0.577.0 |
| Merge de Classes | clsx + tailwind-merge | ^2 / ^3 |
| Testes | Vitest + Storybook addon-vitest | ^4 |
| Documentação de UI | Storybook | ^10 |
Este projeto segue uma arquitetura Hexagonal (Portas e Adaptadores) combinada com Vertical Slices, resultando numa base de código altamente desacoplada, testável e escalável.
| Camada | Responsabilidade | Local |
|---|---|---|
| View | Renderizar UI, delegar eventos via props. Zero lógica de negócio. | features/*/components/ |
| ViewModel | Orquestrar estado, fetch, formulários e submissões. | features/*/hooks/useXxx.ts |
| Model | Tipos TypeScript, schemas Zod, mappers. | features/*/types/, features/*/mappers/ |
O código de negócio nunca depende de implementações concretas. Ele acessa apenas interfaces (Ports), enquanto os Adapters na camada infra/ as implementam:
Nenhum payload raw da API chega sujo ao frontend. Cada feature define schemas Zod que validam e transformam a resposta:
Exemplo real (post.mapper.ts): O campo creationDate da API chega como string ISO. O transform do Zod o converte automaticamente para "20 mar. 2026" (pt-BR) antes de entregar para o componente.
src/
├── app/ # Roteamento puro (Next.js App Router)
│ ├── (auth)/ # Grupo de rotas autenticadas
│ │ └── template.tsx # Layout do grupo auth
│ ├── (public)/ # Grupo de rotas públicas
│ │ ├── page.tsx # Home page
│ │ └── template.tsx # Layout público (Header/Footer)
│ ├── globals.css # Design tokens + DaisyUI themes
│ └── layout.tsx # Root layout (Providers, fontes)
│
├── common/ # Compartilhado globalmente
│ ├── components/ # Componentes compartilhados globalmente
│ ├── config/
│ │ └── routes/index.ts # ⭐ Configuração centralizada de rotas
│ ├── hooks/ # Hooks compartilhados globalmente
│ ├── lib/
│ │ └── utils.ts # cn() — merge inteligente de classes CSS
│ ├── ports/ # Interfaces / contratos abstratos
│ └── types/
│
├── infra/ # Adapters (implementação de detalhes)
│
└── features/ # Vertical Slices de domínio
http://localhost:3000 (ou configure via variáveis de ambiente)git clone https://github.com/gfpaiva/tech-challenge-blog-aulas-frontend.git
cd tech-challenge-blog-aulas-frontend
pnpm install
cp .env.development .env.local
# Edite .env.local com suas configurações caso necessário
pnpm dev
Acesse http://localhost:3001 (ou a porta exibida no terminal).
| Variável | Padrão | Descrição |
|---|---|---|
NEXT_PUBLIC_API_URL | http://localhost:3000 | URL base da API do backend |
Prefixo
NEXT_PUBLIC_: Obrigatório para variáveis que precisam ser expostas ao bundle do cliente. Variáveis sem este prefixo só existem no servidor de build.
| Comando | Descrição |
|---|---|
pnpm dev | Inicia o servidor de desenvolvimento (Next.js Dev Server) |
pnpm build | Gera o export estático completo em ./out/ |
pnpm start | Serve o bundle de produção (requer pnpm build antes) |
pnpm test | Executa a suite completa de testes via Vitest |
pnpm test:watch | Executa os testes em modo interativo (watch mode) |
pnpm test:coverage | Gera relatório de cobertura de código (@vitest/coverage-v8) |
pnpm lint | Executa o ESLint para análise estática de código |
pnpm lint:fix | Corrige automaticamente problemas simples de Lint |
pnpm format | Formata todo o código fonte utilizando Prettier |
pnpm storybook | Inicia o Storybook em http://localhost:6006 |
pnpm build-storybook | Gera o build estático do Storybook em ./storybook-static/ |
Suite de testes automatizada utilizando Vitest e React Testing Library, focada em garantir a confiabilidade da lógica de negócio e dos componentes de UI.
| Camada | Ferramenta | Foco |
|---|---|---|
| Unitário | Vitest | Mappers, ViewModels (hooks), utilitários e lógica pura. |
| Componente | Vitest + RTL | Interações, renderização e estados de componentes "Dumb". |
| Documentação | Storybook | Validação visual isolada e documentação técnica. |
pnpm test # Executa todos os testes
pnpm test:watch # Executa em modo watch (desenvolvimento)
pnpm test:coverage # Gera relatório detalhado de cobertura (/coverage)
O projeto utiliza um pipeline rigoroso de qualidade local para garantir que nenhum código "sujo" chegue ao repositório remoto.
lint-staged que:
tsc --noEmit (apenas nos arquivos modificados)..prettierrc).eslint.config.mjs) para manter as melhores práticas de Next.js 16 e React 19.Utilizamos Conventional Commits para facilitar o versionamento automático e o entendimento do histórico:
feat(posting): Novas funcionalidades.fix(auth): Correção de bugs.refactor(ui): Mudança estrutural sem alterar comportamento.chore: Tarefas de manutenção ou dependências.O projeto integra ferramentas automatizadas para garantir a saúde e segurança do código:
O projeto conta com automação de ponta a ponta via GitHub Actions, cobrindo integração e entrega contínua.
pr-validation.ymlCada Pull Request para a branch main dispara automaticamente o workflow pr-validation.yml, que executa:
| Etapa | Comando | Descrição |
|---|---|---|
| Lint | pnpm lint | Análise estática do código. |
| Testes | pnpm test | Execução dos testes unitários e de componente. |
| Build | pnpm build | Validação do export estático (SSG). |
cd.ymlCada push na branch main (ou execução manual via workflow_dispatch) aciona o workflow cd.yml, composto por dois jobs:
push → main
└── release-please ← Cria/atualiza PR de release + gera tag e CHANGELOG
└── deploy ← Aciona deploy no Render via webhook (somente se houver nova release)
Como o app utiliza output: 'export' do Next.js, o resultado do pnpm build é uma pasta ./out/ com HTML/CSS/JS totalmente estáticos, hospedada no Render.
pnpm build
└── ./out/
├── index.html
├──
Selected from shared topics, language and repository description—not editorial ratings.
DaihSeven /
Este repositório contém a implementação de uma landing page responsiva desenvolvida como parte do Teste Técnico Frontend da ADAC Softwares.
GabrielFeijo /
Este repositório contém o código frontend para um projeto de CEP Finder desenvolvido para um desafio técnico da RevoluTI. Utiliza Next.js e TypeScript para criar uma interface que permite buscar e armazenar endereços com base no CEP, além de gerenciar o histórico de pesquisas do usuário.