Para a navegação utilizei um método chamado 'Focus Key' ou 'Focus Map' (saiba mais). Todos os componentes de uma página implementam a interface Focusable, que recebe uma propriedade chamada isFocused, e caso essa propriedade seja true, esse componente é navegável. Os itens navegáveis desses componentes estão dentro do componente Navigable, que cuida de toda a lógica da navegação pelo teclado.
No componente List, por exemplo, os itens da lista estão dentro de Navigable, e quando a tecla ArrowUp é pressionada, o componente List, que por sua vez implementa Focusable, verifica se o ListItem focado é o 0, se sim, o componente chama a função onFocusUp, e a página que utiliza o componente List se encarrega de mudar o componente focado.
Um dos requisitos era o app funcionar em browsers antigos. O app não está funcionando no Opera 12 pelo fato do iframe do Youtube não funcionar nesse browser. Eu até comecei a adicionar os polyfills necessários, mas de qualquer forma os vídeos não seriam executados. Vale destacar que em alguns browsers não tão antigos, IE11 por exemplo, funciona.
Utilizei o Context API para gerenciar o Dark Mode e os Favoritos, mantendo os estados no localStorage para que eles pudessem ser recuperados ao recarregar a página.
O design utilizado foi feito por mim, e está disponível nesse link. Não fui 100% fiel ao meu design, pois quando fiz, fiz pensando na navegação apenas pelo teclado.
Basta rodar o comando yarn start ou npm start no terminal. O projeto também foi hospedado na Vercel e está disponível no nesse link.