{"id":26363284,"url":"https://github.com/melksedeque/cine-tag-react","last_synced_at":"2025-03-16T18:27:25.575Z","repository":{"id":279704870,"uuid":"939663434","full_name":"Melksedeque/cine-tag-react","owner":"Melksedeque","description":"Cine Tag é uma aplicação React.JS que permite explorar, favoritar e assistir a vídeos. Com uma interface intuitiva, os usuários podem navegar entre a página inicial e a lista de favoritos, além de reproduzir vídeos diretamente na aplicação. Ideal para praticar React, gerenciamento de estado e consumo de APIs.","archived":false,"fork":false,"pushed_at":"2025-03-09T00:50:07.000Z","size":3048,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-09T01:27:29.621Z","etag":null,"topics":["createcontext","javascript","react","react-hooks","react-router-dom","reactjs","useeffect","useparams","usestate"],"latest_commit_sha":null,"homepage":"https://cine-tag-react-two.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Melksedeque.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-26T22:43:40.000Z","updated_at":"2025-03-09T00:50:10.000Z","dependencies_parsed_at":"2025-02-27T00:33:45.222Z","dependency_job_id":"ca238649-a0d2-4552-83da-539455a01bdb","html_url":"https://github.com/Melksedeque/cine-tag-react","commit_stats":null,"previous_names":["melksedeque/cine-tag-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Fcine-tag-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Fcine-tag-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Fcine-tag-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Melksedeque%2Fcine-tag-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Melksedeque","download_url":"https://codeload.github.com/Melksedeque/cine-tag-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243910738,"owners_count":20367546,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["createcontext","javascript","react","react-hooks","react-router-dom","reactjs","useeffect","useparams","usestate"],"created_at":"2025-03-16T18:27:25.040Z","updated_at":"2025-03-16T18:27:25.549Z","avatar_url":"https://github.com/Melksedeque.png","language":"JavaScript","readme":"# Projeto Cine Tag - React\n\n![Tela Principal](./screenshot/tela-principal.png)\n\n## Menu\n\n- [Layout](#layout)\n- [Descrição](#descrição)\n  - [Principais recursos incluem](#principais-recursos-incluem)\n  - [Proximos passos de desenvolvimento](#proximos-passos-de-desenvolvimento)\n- [Tecnologias Utilizadas](#tecnologias-utilizadas)\n- [Estrutura de Pastas](#estrutura-de-pastas)\n  - [Arquivos Principais](#arquivos-principais)\n- [Como Instalar e Rodar o Projeto](#como-instalar-e-rodar-o-projeto)\n  - [Configuração](#configuração)\n  - [Casos de Uso Comuns](#casos-de-uso-comuns)\n  - [Solução de Problemas](#solução-de-problemas)\n- [Projeto ao Vivo](#projeto-ao-vivo)\n- [Fluxo de Dados](#fluxo-de-dados)\n- [Licença](#licença)\n- [Autor](#autor)\n\n## Layout\n\n[Layout no Figma](\u003chttps://www.figma.com/design/VU8mCwoKVV6vS7s1FYV05m/React%3A-Praticando-React-com-Js-%7C-Cinetag-(Community)?node-id=12-2\u0026p=f\u0026t=tRyaWwMTakj5MTSU-0\u003e)\n\n## Descrição\n\nO **Cine Tag** é uma aplicação web que consome uma API de vídeos, permitindo aos usuários explorar, favoritar e assistir a vídeos. A aplicação foi desenvolvida em React.JS e utiliza tecnologias modernas para garantir uma experiência fluida e responsiva.\n\n### Principais recursos incluem:\n\n- **Página inicial** com cards de vídeos, exibindo informações como título, capa e descrição.\n- **Sistema de favoritos:** os usuários podem favoritar ou desfavoritar vídeos clicando em um ícone de coração.\n- **Navegação intuitiva:** roteamento entre as páginas Home e Favoritos.\n- **Página de player:** ao clicar em um card, o vídeo é reproduzido em uma página dedicada.\n\n### Proximos passos de desenvolvimento\n\n- Melhorar o layout seguindo o criado no Figma;\n- Criar a responsividade da aplicação;\n- Adicionar autenticação de usuários para personalizar a experiência;\n- Implementar busca e filtragem de vídeos por categoria ou título;\n- Integrar uma API de vídeos real (ex: YouTube, Vimeo);\n- Adicionar testes unitários e de integração;\n- Melhorar a acessibilidade da aplicação;\n\n## Tecnologias Utilizadas\n\n- **React.js:** Biblioteca principal para construção da interface.\n- **React Router DOM:** Gerenciamento de rotas e navegação.\n- **Vite:** Ferramenta de build rápida e moderna.\n- **CSS Modules:** Estilização modularizada para evitar conflitos.\n- **ESLint:** Padronização e qualidade do código.\n- **My JSON Server:** Simulação de API para dados de vídeos.\n\n## Estrutura de Pastas\n\n```\nsrc/\n  ├── components/     # Componentes reutilizáveis\n  ├── contexts/      # Contextos React (ex: Favoritos)\n  ├── pages/         # Páginas da aplicação\n  └── main.jsx       # Ponto de entrada da aplicação\n```\n\n### Arquivos Principais:\n\n- `src/routes.jsx` - Configuração das rotas da aplicação\n- `src/contexts/Favoritos.jsx` - Contexto para gerenciar o estado dos vídeos favoritos\n\n## Como Instalar e Rodar o Projeto\n\n1. Clone o repositório\n\n```bash\ngit clone https://github.com/Melksedeque/cine-tag-react.git\n```\n\n2. Instale as dependências:\n\n```bash\nnpm install\n```\n\n3. Execute o projeto em modo desenvolvimento:\n\n```bash\nnpm run dev\n```\n\n### Configuração\n\n- Para alterar a fonte de dados, substitua a URL da API no arquivo de configuração.\n- Caso queira simular uma API local, utilize o db.json com o My JSON Server.\n\n### Casos de Uso Comuns\n\n- **Favoritar vídeos:** Clique no ícone de coração nos cards da página inicial.\n- **Assistir vídeos:** Clique em um card para abrir o player.\n- **Navegar entre páginas:** Use o menu de navegação no cabeçalho.\n\n### Solução de Problemas\n\n- **Erro ao carregar vídeos:** Verifique a conexão com a API ou o arquivo db.json.\n- **Problemas de estilo:** Certifique-se de que os módulos CSS estão corretamente importados.\n\n## Projeto ao Vivo\n\nAcesse a versão online do projeto [aqui](https://cine-tag-react-two.vercel.app).\n\n## Fluxo de Dados\n\n1. A aplicação consome a API de vídeos (https://my-json-server.typicode.com/Melksedeque/cine-tag-react/videos).\n2. Os vídeos são exibidos na página inicial.\n3. Ao favoritar um vídeo, ele é adicionado ao contexto de favoritos.\n4. Os vídeos favoritos são exibidos na página \"Favoritos\".\n5. Ao clicar em um vídeo, o usuário é redirecionado para a página de player, onde o vídeo é reproduzido.\n\n## Licença\n\nEste projeto está licenciado sob a Licença MIT. Veja o arquivo [LICENSE](https://github.com/Melksedeque/cine-tag-react?tab=MIT-1-ov-file) para mais detalhes.\n\n## Autor\n\n- GitHub - [Melksedeque Silva](https://github.com/Melksedeque/)\n- FrontEndMentor - [@Melksedeque](https://www.frontendmentor.io/profile/Melksedeque)\n- Twitter / X - [@SouzaMelk](https://x.com/SouzaMelk)\n- LinkedIn - [Melksedeque Silva](https://www.linkedin.com/in/melksedeque-silva/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelksedeque%2Fcine-tag-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelksedeque%2Fcine-tag-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelksedeque%2Fcine-tag-react/lists"}