Website APP - Associação Portuguesa de Powerlifting

Visão Geral

Site oficial da Associação Portuguesa de Powerlifting, construído com tecnologias modernas e com foco em acessibilidade e desempenho.

Stack Tecnológico:

• Next.js 16 (App Router) com TypeScript
• Tailwind CSS 4 para estilos
• React 19.2
• Markdown com remark e rehype para processamento de conteúdo
• Integração com OpenPowerlifting para dados de provas

Características Principais:

• Acessibilidade rigorosa (WCAG 2.1 AA) com suporte completo a leitores de ecrã
• Suporte bilingue: Português (predefinido) e Inglês
• Conteúdo em Markdown com Tabela de Conteúdos fixa na navegação lateral
• Integração com OpenPowerlifting (scraping de provas + análise CSV de resultados)
• Proteção contra bots com Cloudflare Turnstile na página Contactos

Começar

Pré-requisitos

• Node.js 18+ instalado
• npm ou yarn

Instalação

1. Instalar dependências:

npm install

2. Configurar variáveis de ambiente em .env.local:

NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key_here

Contacte a equipa para obter a chave do Turnstile.

3. Executar o servidor de desenvolvimento:

npm run dev

Abra http://localhost:3000 — será redirecionado automaticamente para /pt.

Scripts Disponíveis

npm run dev      # Servidor de desenvolvimento com hot reload
npm run build    # Construir para produção
npm start        # Iniciar servidor de produção
npm run lint     # Validar código com ESLint

Estrutura do Projeto

app/
├── src/
│   ├── app/
│   │   ├── pt/                    # Rotas em Português
│   │   ├── en/                    # Rotas em Inglês
│   │   └── api/                   # Endpoints da API
│   └── components/                # Componentes React reutilizáveis
├── content/
│   ├── pt/                        # Conteúdo em Português (Markdown)
│   └── en/                        # Conteúdo em Inglês (Markdown)
└── public/                        # Assets estáticos

Caminhos Principais

Rotas

• Português: src/app/pt
• Inglês: src/app/en

API

• API de Conteúdo (Markdown): src/app/api/content/route.ts — obtém e processa ficheiros Markdown
• API de Provas: src/app/api/openpowerlifting/meets/route.ts — lista próximas provas
• API de Resultados: src/app/api/openpowerlifting/results/route.ts — resultados de provas passadas

Conteúdo

• Conteúdo em Markdown: content — todas as páginas dinâmicas

Notas de Acessibilidade

O projeto segue as normas WCAG 2.1 Nível AA:

• Navegação: Skip link no topo da página e indicadores de foco claros em todos os elementos interativos
• Estrutura: Títulos semânticos (<h1>, <h2>, etc.) e etiquetas ARIA apropriadas na navegação
• Tabelas: Incluem cabeçalhos estruturados, legendas e suporte a leitores de ecrã
• Imagens: Todos os <img> têm atributo alt descritivo
• Cores: Contraste suficiente entre texto e fundo (ratio mínimo 4.5:1)

Dependências Principais

Pacote	Versão	Uso
next	16.1.1	Framework React com SSR e otimizações
react	19.2.3	Biblioteca UI
react-markdown	10.1.0	Renderizar Markdown em React
cheerio	1.1.2	Web scraping para OpenPowerlifting
papaparse	5.5.3	Parsing de CSV
tailwindcss	4	Framework CSS utilitário

Deployment

O site está pronto para ser deployado em plataformas como Vercel:

npm run build    # Construir bundle de produção
npm start        # Testar localmente antes de fazer deploy

Assegurar que as variáveis de ambiente estão configuradas no provider de hosting.