YouTube Clone Moderno

Projeto de estudo com interface inspirada no YouTube, arquitetura organizada por responsabilidade e funcionalidades front-end sem dependencias de build.

Preview

• Layout moderno e responsivo.
• Renderizacao dinamica de cards de video.
• Busca em tempo real por titulo, canal e categoria.
• Filtro por categorias.

Estrutura do Projeto

youtube-clone/
  assets/
    icons/
    images/
  scripts/
    components/
      videoCard.js
    data/
      videos.js
    utils/
      formatters.js
    main.js
  styles/
    variables.css
    layout.css
    components.css
    responsive.css
  index.html
  LICENSE
  README.md

Arquitetura

• index.html

  • Estrutura semantica da pagina (topbar, sidebar e conteudo principal).
  • Carrega folhas de estilo modulares e script principal em type="module".

• styles/variables.css

  • Tokens visuais globais: cores, sombras e raios.

• styles/layout.css

  • Regras de layout macro (grid principal, topbar, sidebar, secoes).

• styles/components.css

  • Estilos dos componentes de UI (chips, cards, estados vazios, animacoes).

• styles/responsive.css

  • Ajustes para tablet e mobile.

• scripts/data/videos.js

  • Fonte de dados dos videos (mock local).

• scripts/components/videoCard.js

  • Componente responsavel por montar o card de video no DOM.

• scripts/utils/formatters.js

  • Funcoes utilitarias de normalizacao de texto e formatacao de visualizacoes.

• scripts/main.js

  • Estado da aplicacao, filtros, busca, renderizacao e eventos.

Como Executar

Por ser um projeto estatico, basta abrir o arquivo index.html no navegador.

Opcionalmente, rode com um servidor local para melhor experiencia de desenvolvimento:

Opcao 1: VS Code Live Server

1. Instale a extensao Live Server.
2. Clique com o botao direito em index.html.
3. Selecione Open with Live Server.

Opcao 2: Python (se tiver instalado)

python -m http.server 5500

Depois abra:

http://localhost:5500

Funcionalidades

• Barra de busca com filtro instantaneo.
• Filtro por categorias com destaque visual da categoria ativa.
• Cards de video com:
  • thumbnail
  • duracao
  • avatar do canal
  • titulo
  • nome do canal
  • metadados de visualizacao e tempo de publicacao
• Estado vazio quando nao ha resultados.
• Layout responsivo para desktop, tablet e celular.

Melhorias Futuras

• Persistir categoria e termo de busca no localStorage.
• Adicionar pagina de detalhes do video.
• Integrar com API real para dados dinamicos.
• Incluir testes de interface e acessibilidade.

Licenca

Este projeto esta sob a licenca descrita em LICENSE.