fábio.
← Trabalho selecionado

01 / Projeto

Voidhall

Independent Music Platform

Uma plataforma web de música independente, criada de raiz como projeto solo. Publicação, descoberta e interação reunidas numa experiência de reprodução integrada.

Papel
Produto, UI/UX, identidade e full-stack
Stack
Laravel · PHP · Vue · JavaScript · MySQL
Estado
Private beta · Polish & hardening
Contexto
Projeto pessoal · Desenvolvimento contínuo
Home do Voidhall com feeds Global e Following e player global
Nesta página

01 / produto

Uma comunidade começa
por aquilo que se ouve.

O Voidhall dirige-se a artistas e ouvintes de música underground — trap, plug, rage, cloud rap e experimental. A inspiração cultural vem de uma internet musical mais comunitária, com espaço para encontrar artistas fora dos circuitos mais óbvios.

O produto liga publicação, perfis, feeds e descoberta. As decisões de interface procuram tornar essas relações claras, mantendo a reprodução integrada nas diferentes áreas da aplicação.

Perfil de artista com tracks e relações sociais
Perfil / Identidade do artista e acesso à sua música.
Página de track com comentários e informação do artista
Track / Reprodução, contexto e interação.

02 / publicacao

Da publicação à experiência de escuta.

Publicar uma track envolve o ficheiro de áudio, metadata, ownership e opções de visibilidade. Esses dados têm de continuar coerentes na página da track, no perfil, nos feeds e no player.

Implementei o fluxo de publicação ligado ao backend e à base de dados, com suporte para tracks públicas e privadas, edição e regras de acesso.

A privacidade continua em hardening. As regras de autorização e os comportamentos de conteúdo privado estão a ser refinados ao longo dos fluxos.

Formulário de upload do Voidhall com metadata e privacidade
Publicação / Metadata, ficheiros e visibilidade no mesmo fluxo.

03 / player

O áudio faz parte
da aplicação inteira.

O player global liga a música selecionada aos controlos de reprodução e às diferentes páginas. Play/pause, timeline, seek e volume exigem coerência entre o estado do áudio e aquilo que a interface mostra.

Desenvolvi um componente próprio e reorganizei a sua estrutura, lógica e styling. O trabalho inclui sincronização, comportamento responsivo e debugging dos estados de reprodução.

Detalhe do player global do Voidhall
Player global / Controlos de reprodução integrados na navegação.

04 / descoberta

Acompanhar e descobrir
são experiências diferentes.

O feed Following responde a quem o utilizador já acompanha. O Global dá acesso à atividade geral. O Explore cria outra entrada: encontrar música e artistas com lógica própria de seleção, diversidade e rotação.

O Explore combina regras de visibilidade, cache e TTL para manter resultados coerentes entre atualizações. A lógica está funcional e desenvolvida; os refinamentos atuais incidem na consistência e na experiência.

Explore em light mode com destaque de música e artistas
Explore / Light mode em desenvolvimento e polimento.
01

Feeds

Global e Following ligam relações entre utilizadores, queries e estado da interface.

02

Explore

Seleção e rotação de conteúdo com diversidade, caching e atualização periódica.

03

Pulse

Uma dimensão social e temporal já presente, ainda em integração e polish.

05 / arquitetura

Construir também é
organizar o que cresce.

O frontend em Vue e o backend em Laravel têm responsabilidades mais separadas do que na primeira implementação. Routes, controllers, models, migrations e relações suportam os fluxos da interface e as regras do produto.

Na camada visual, tenho centralizado componentes, modais e skeletons, reduzindo duplicação. Estilos base, componentes reutilizáveis, páginas e player têm responsabilidades próprias.

01

Dados & acesso

Modelação relacional, queries, validação, autenticação, autorização e ownership.

02

Estado & atualização

Requests assíncronos, cache, TTL e polling, equilibrando atualização da interface e carga do servidor.

03

Interface & manutenção

Componentes Vue, skeletons reutilizáveis, arquitetura CSS e consistência entre páginas.

Pesquisa no Voidhall em light mode
Interface / Pesquisa, conteúdo e player partilham a mesma linguagem visual.

06 / evolucao

Uma primeira versão.
Uma base para ir mais longe.

O projeto começou com PHP, MySQL, JavaScript, HTML/CSS e navegação AJAX. Essa versão permitiu aprender através de uma plataforma funcional e perceber como as diferentes partes de uma aplicação se relacionam.

Mais tarde, reconstruí praticamente toda a aplicação com Laravel e Vue. O processo trouxe maior separação de responsabilidades, reutilização e organização dos sistemas.

Hoje, uma parte importante do trabalho está nos casos-limite: permissões, URLs de media, áudio, cache, consistência entre páginas e refactoring. A evolução inclui rever decisões anteriores e manter o produto coerente.

01

Primeira implementação

PHP + MySQL + JavaScript, com navegação AJAX e os primeiros fluxos da plataforma.

02

Reconstrução

Laravel e Vue, componentes reutilizáveis e uma separação mais clara entre frontend e backend.

03

Fase atual

Polish, debugging, hardening e melhoria de fluxos completos sobre uma base já funcional.

07 / estado

Uma base sólida.
Trabalho que continua.

O Voidhall encontra-se em private beta. Os sistemas principais existem; o foco atual é melhorar robustez, coerência e experiência antes de alargar o produto.

Implementado

  • Autenticação e perfis
  • Upload e tracks públicas/privadas
  • Player global
  • Likes, comentários e follows
  • Feeds Global e Following
  • Explore e skeleton loading

Em refinamento

  • Privacidade e regras de acesso
  • Coerência do Explore
  • Integração e polish do Pulse
  • Light mode e experiência responsiva
  • Cache, polling e consistência

Planeado

  • Playlists
  • Definições de utilizador
  • Evolução de badges e moderação
  • Fluxos adicionais de conteúdo unlisted/private
Próximo projetoBilibot

Contacto / Vamos conversar

Um projeto.
Uma possibilidade.

fabioguerreiro2005@gmail.comDesign, desenvolvimento e colaboração.