Frontend desenvolvido para a plataforma CazeTV, com foco em organização, componentização e uma experiência de usuário dinâmica e moderna para consumo de conteúdo esportivo e transmissões ao vivo.
O CazeTV - Frontend é a interface web de uma plataforma de streaming voltada para conteúdos esportivos, como jogos ao vivo, replays e destaques. A aplicação foi construída utilizando React.
A estrutura do projeto foi pensada para facilitar manutenção e evolução, com separação clara entre páginas, componentes reutilizáveis, serviços e rotas.
A interface permite ao usuário:
- Navegar por transmissões ao vivo
- Visualizar cronograma de eventos esportivos
- Explorar destaques e melhores momentos
- Gerenciar perfil e preferências
- Interagir com conteúdos (ex: favoritos, histórico)
- Loja interativa para compras de itens temáticos da CatéTV e esportivos
- React
- Vite
- CSS Modules
- React Router
- Fetch API
- API Google
- API Futebol
O projeto segue uma arquitetura modular baseada em separação de responsabilidades:
src/
│
├── api/ # Configuração de chamadas HTTP
├── assets/ # Imagens, ícones e thumbnails
├── components/ # Componentes reutilizáveis
│ ├── common/ # Botões, inputs, cards, players
│ └── layouts/ # Layouts (header, sidebar, etc.)
│
├── pages/ # Páginas (home, live, detalhes, perfil)
├── routes/ # Configuração de rotas
├── service/ # Integração com API e regras de negócio
├── styles/ # Estilos globais
│
├── App.tsx # Componente raiz
├── main.tsx # Entry pointA aplicação é construída com foco em reutilização:
- Componentes comuns → Cards de vídeo, botões, players
- Layouts → Estrutura base (home, player ao vivo, dashboard)
- Componentes específicos → Player de vídeo, timeline de eventos, lista de transmissões
- Node.js (18+ recomendado)
- npm
npm installnpm run dev🌐 Acesso
http://localhost:5173|
|
|
|
|
|
|