PAP TGPSI 2026 / Apresentacao tecnica
BoardSports.
Plataforma web para comunidade de desportos de prancha, com mapa de spots, perfis, videos, XP, ranking e moderacao. Esta pagina resume o projeto, as tecnologias usadas e a forma como cada funcionalidade foi implementada.
01 / Enquadramento
O que e o BoardSports
Ideia do projeto
O BoardSports e uma plataforma digital para praticantes e interessados em surf, skate, skimboard, snowboard e sandboard. O objetivo e concentrar informacao util sobre spots, permitir publicacoes da comunidade e incentivar participacao atraves de XP e ranking.
Problema identificado
A informacao sobre spots esta muitas vezes espalhada por redes sociais, grupos privados ou mapas genericos. Isso torna dificil descobrir locais, perceber a modalidade adequada, ver videos reais e avaliar a qualidade do spot.
Solucao criada
Foi desenvolvido um site com mapa interativo, sistema de conta, perfis, publicacao de spots e videos, gamificacao por XP, leaderboard e painel de moderacao para validar conteudo.
02 / Tecnologias
Tecnologias usadas e aplicacao
HTML5
Estrutura das paginas, formularios, navegacao, secoes institucionais e conteudo da aplicacao.
CSS3
Design visual, responsividade mobile, cards, hero sections, botoes, mapa e identidade urbana/premium do site.
JavaScript ES Modules
Interatividade, autenticacao, ligacao ao Supabase, carregamento de dados, filtros, modais, formularios e logica de XP.
Supabase Auth
Registo, login, sessao do utilizador, recuperacao de palavra-passe e controlo do utilizador autenticado.
Supabase Postgres
Base de dados com perfis, spots, modalidades, categorias, videos, XP, notificacoes, denuncias e moderacao.
RLS e Policies
Protecao da base de dados: users normais so acedem ao que e publico ou ao que lhes pertence; admin fica restrito.
Leaflet.js
Mapa interativo para ver spots, marcadores, popups, filtros e localizacao geografica.
OpenStreetMap / Carto
Tiles e base visual do mapa usada para representar Portugal e os spots da comunidade.
Netlify
Alojamento do frontend, build estatico, HTTPS, headers de seguranca e deploy publico.
GitHub
Controlo de versoes, historico do projeto e entrega do codigo-fonte.
03 / Requisitos
Requisitos funcionais
Registar e autenticar utilizadores
O utilizador pode criar conta, iniciar sessao, recuperar password e aceder ao seu perfil.
Explorar spots no mapa
O sistema apresenta spots num mapa interativo com filtros por modalidade e categoria.
Criar spots
Users autenticados podem adicionar spots com nome, descricao, modalidade, dificuldade e coordenadas.
Publicar videos
O utilizador pode associar videos a um spot e indicar se e o praticante, se filmou outra pessoa ou se e video de terceiros.
Atribuir XP
O sistema calcula XP por atividade validada, videos e conquistas, atualizando progresso e nivel do perfil.
Mostrar ranking
Existe leaderboard global, semanal, mensal e por modalidade para comparar progresso entre riders.
Gerir perfil
O utilizador pode atualizar dados publicos, avatar, bio, localidade e consultar publicacoes.
Moderar conteudo
O administrador valida submissao de spots, XP e denuncias para manter qualidade e seguranca.
04 / Qualidade
Requisitos nao funcionais
Responsividade
O site foi adaptado para desktop e telemovel, com especial cuidado no mapa para permitir usar os controlos sem bloquear a navegacao.
Seguranca
A base de dados usa RLS, policies, triggers e views seguras. Campos privados como email e admin nao ficam expostos publicamente.
Usabilidade
A navegacao tem menu global, botoes visiveis, formularios claros, mensagens de erro e feedback para o utilizador.
Manutencao
O codigo esta organizado por paginas e utilitarios JavaScript, com migracoes SQL para documentar alteracoes da base de dados.
05 / Arquitetura
Como o sistema esta organizado
Paginas HTML, CSS e JavaScript executadas no browser.
Cliente JavaScript comunica com Auth, REST API, RPC e Storage.
Tabelas, views, triggers, RLS e funcoes SQL protegem os dados.
Distribui o site estatico com HTTPS e headers de seguranca.
06 / Dados
Base de dados e entidades principais
profiles
modalidades
categorias
spots
spot_videos
xp_logs
submissoes
notificacoes
comentarios
denuncias
public_profiles
solicitacoes_publicacao
Como os dados sao protegidos
Os dados publicos sao expostos por views seguras e policies. Dados privados, como email e flags de administrador, ficam limitados ao proprio utilizador ou ao admin. A logica sensivel de XP e moderacao fica na base de dados, nao apenas no JavaScript.
07 / Paginas
Paginas principais do site
index.htmlLanding page e entrada da plataforma.
mapa.htmlMapa interativo, criacao de spots, videos e XP.
videos.htmlGaleria de videos associados aos spots.
leaderboard.htmlRanking e niveis de XP da comunidade.
perfil.htmlPerfil, publicacoes, seguidores e mensagens.
moderacao.htmlPainel restrito para admin validar conteudo.
pesquisa.htmlPesquisa global por spots, videos e riders.
contacto.htmlSuporte e contacto do projeto.
08 / Teste e deploy
Como foi testado e publicado
Build
O comando npm run build gera a pasta dist, copia os ficheiros do frontend e injeta metadados SEO, sitemap, robots e configuracao Supabase.
Smoke test
O comando npm run smoke verifica se as paginas principais carregam e se os elementos esperados existem.
Deploy
O site e publicado no Netlify, que executa o build e disponibiliza a aplicacao em HTTPS.
Controlo de versoes
O codigo e guardado no GitHub, permitindo historico, recuperacao de versoes e entrega do codigo-fonte.