VidFlow 📹

Sobre o Projeto

VidFlow é uma plataforma de visualização de vídeos desenvolvida como projeto de estudo para adquirir e aperfeiçoar habilidades em desenvolvimento web. O projeto simula uma interface semelhante a plataformas de streaming de vídeos, permitindo aos usuários buscar, filtrar e assistir a vídeos através de uma interface intuitiva e responsiva.

Este é um projeto educacional com foco no aprendizado de:

• Desenvolvimento Frontend com HTML, CSS e JavaScript
• Integração com APIs e requisições assíncronas
• Manipulação do DOM
• Responsividade e Design Moderno
• Boas práticas de desenvolvimento web

---

Funcionalidades ✨

1. Exibição de Vídeos

• Carregamento dinâmico de vídeos através de uma API JSON
• Exibição de vídeos em iframe integrado
• Apresentação de informações do vídeo (título, descrição, imagem do canal)

2. Barra de Pesquisa

• Busca em tempo real (search em input)
• Filtro instantâneo de vídeos por título
• Suporte a pesquisa case-insensitive (maiúsculas e minúsculas)

3. Sidebar de Navegação

• Menu lateral para navegação
• Acesso rápido a diferentes categorias

4. Barra Superior (Topbar)

• Logo da plataforma
• Ícones de funcionalidades (vídeos, notificações, perfil)
• Atalhos de teclado e microfone para busca

5. Alternância de Tema (Dark/Light Mode)

• Toggle de tema claro e escuro
• Experiência de usuário adaptada às preferências

6. Validação de Dados

• Validação de categorias de vídeos
• Tratamento de erros ao carregar vídeos
• Mensagens de erro user-friendly

7. Design Responsivo

• Layout flexível que se adapta a diferentes tamanhos de tela
• Interface otimizada para desktop
• Estrutura modular de CSS

---

Tecnologias Utilizadas 🛠️

Frontend

• HTML5 - Estrutura semântica das páginas
• CSS3 - Estilização e design responsivo
  • Flexbox para layouts flexíveis
  • Variáveis CSS para temas
• JavaScript (Vanilla) - Lógica da aplicação
  • Fetch API para requisições HTTP
  • Manipulação do DOM
  • Event Listeners

Backend & Dados

• JSON Server - Servidor Mock para API REST
  • Fornecedor de dados dos vídeos
  • Suporta requisições GET para recuperar vídeos

Fonte & Ícones

• Google Fonts (Roboto) - Tipografia
• Ícones customizados para UI/UX

Ferramentas & Dependências

{
  "dependencies": {
    "json-server": "^1.0.0-beta.5"
  }
}

---

Estrutura do Projeto 📁

projeto-vidflow/
├── index.html              # Página principal da aplicação
├── script.js               # Lógica JavaScript da aplicação
├── package.json            # Dependências do projeto
├── README.md               # Este arquivo
├── css/
│   ├── reset.css           # Reset de estilos padrão do navegador
│   ├── estilos.css         # Estilos principais
│   └── flexbox.css         # Estilos de layout com Flexbox
├── backend/
│   └── videos.json         # Base de dados de vídeos (JSON Server)
└── img/
    ├── Favicon.png         # Ícone da aba do navegador
    ├── VidFlow--Logo-light-mode.png  # Logo da plataforma
    ├── sidebar/            # Ícones do menu lateral
    ├── topbar/             # Ícones da barra superior
    └── videos/             # Miniaturas e imagens dos canais

---

Como Executar 🚀

Pré-requisitos

• Node.js instalado na máquina
• npm (gerenciador de pacotes do Node)

Passos de Instalação e Execução

1. Instale as dependências do projeto

   npm install

2. Inicie o JSON Server (em um terminal)

   npm run dev
   # ou
   json-server --watch backend/videos.json --port 3000

   O servidor estará disponível em http://localhost:3000

3. Abra o arquivo index.html em seu navegador

   • Pode ser feito double-clicking no arquivo
   • Ou usando um servidor local (como Live Server no VS Code)

4. Interaja com a plataforma

   • Use a barra de pesquisa para filtrar vídeos
   • Clique nos vídeos para assistir
   • Explore o menu lateral e a barra superior

---

Aprendizados & Objetivos 🎓

Este projeto foi desenvolvido com os seguintes objetivos educacionais:

• ✅ Praticar HTML5 semântico e estruturação de páginas
• ✅ Dominar CSS3 (Flexbox, Media Queries, Temas)
• ✅ JavaScript assíncrono (async/await, Fetch API)
• ✅ Manipulação do DOM (querySelector, innerHTML, eventos)
• ✅ Tratamento de erros e validação de dados
• ✅ Integração com APIs e servidores
• ✅ Design Responsivo e User Experience
• ✅ Boas práticas de desenvolvimento web

---

Possíveis Melhorias Futuras 🔮

• Implementar autenticação de usuários
• Adicionar categorias de vídeos filtráveis
• Sistema de favoritos/playlists
• Comentários nos vídeos
• Histórico de visualizações
• Recomendações personalizadas
• Backend em Node.js com banco de dados real
• Deploy em plataforma de produção

---

Autor 👨‍💻

Projeto de estudo realizado como parte do aprendizado em desenvolvimento web.

---

Licença 📄

Este projeto é de código aberto e pode ser utilizado para fins educacionais e de aprendizado.

---

Dúvidas e Sugestões 💬

Se tiver dúvidas sobre o projeto ou sugestões de melhorias, sinta-se à vontade para explorar o código e experimentar!