{"id":30950756,"url":"https://github.com/renatofilhodevandtech/site-primefix","last_synced_at":"2025-12-30T21:25:32.732Z","repository":{"id":225430393,"uuid":"765982566","full_name":"RenatofilhoDevandtech/Site-Primefix","owner":"RenatofilhoDevandtech","description":"PrimeFlix Moderno é uma aplicação de streaming premium, pensada para entregar uma experiência fluida, envolvente e visualmente marcante. Cada detalhe — da arquitetura ao design — foi cuidadosamente planejado para refletir excelência técnica, usabilidade refinada e uma identidade visual coerente.","archived":false,"fork":false,"pushed_at":"2025-09-03T05:21:50.000Z","size":2989,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-03T07:20:00.917Z","etag":null,"topics":["api","css","html","javascript","postcss","react","react-router-dom","tailwindcss"],"latest_commit_sha":null,"homepage":"https://site-primefix.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RenatofilhoDevandtech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-03-02T02:47:18.000Z","updated_at":"2025-09-03T05:22:52.000Z","dependencies_parsed_at":"2025-09-03T19:01:48.157Z","dependency_job_id":null,"html_url":"https://github.com/RenatofilhoDevandtech/Site-Primefix","commit_stats":null,"previous_names":["renatofilhodevandtech/styled","renatofilhodevandtech/siteprime-video","renatofilhodevandtech/site-primefix"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RenatofilhoDevandtech/Site-Primefix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenatofilhoDevandtech%2FSite-Primefix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenatofilhoDevandtech%2FSite-Primefix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenatofilhoDevandtech%2FSite-Primefix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenatofilhoDevandtech%2FSite-Primefix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RenatofilhoDevandtech","download_url":"https://codeload.github.com/RenatofilhoDevandtech/Site-Primefix/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RenatofilhoDevandtech%2FSite-Primefix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274580946,"owners_count":25311266,"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","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["api","css","html","javascript","postcss","react","react-router-dom","tailwindcss"],"created_at":"2025-09-11T05:19:48.941Z","updated_at":"2025-12-30T21:25:32.704Z","avatar_url":"https://github.com/RenatofilhoDevandtech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Título --\u003e\n\n\u003ch1 align=\"center\"\u003ePRIMEFIX\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200\" height=\"200\" alt=\"Logo\" src=\"https://github.com/user-attachments/assets/6777aa0e-60c0-4375-81b2-efee728c43b3\" /\u003e\n    \u003ch1 align=\"center\"\u003ePRIMEFIX\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/-React-333333?style=flat\u0026logo=react\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/-Git-333333?style=flat\u0026logo=git\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/-GitHub-333333?style=flat\u0026logo=github\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/-Visual%20Studio%20Code-333333?style=flat\u0026logo=visual-studio-code\u0026logoColor=007ACC\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/-TMDB%20API-333333?style=flat\u0026logo=themoviedatabase\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/-TailwindCSS-333333?style=flat\u0026logo=tailwindcss\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/-Vite-333333?style=flat\u0026logo=vite\" /\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003e🎬 PrimeFlix Moderno\u003c/h2\u003e\n\n## Sobre\n\u003cp align=\"center\"\u003e\n  PrimeFlix Moderno é uma aplicação de streaming premium, pensada para entregar uma experiência fluida, envolvente e visualmente marcante.  \nCada detalhe — da arquitetura ao design — foi cuidadosamente planejado para refletir excelência técnica, usabilidade refinada e uma identidade visual coerente com plataformas de entretenimento de alto nível.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"1891\" height=\"881\" alt=\"telaprimefix\" src=\"https://github.com/user-attachments/assets/610aa910-723f-4309-8d5a-51d732590726\" /\u003e\n\u003cimg width=\"1858\" height=\"965\" alt=\"explorar filmes\" src=\"https://github.com/user-attachments/assets/b46ef5bb-97a3-4538-b183-4b410c71acb4\" /\u003e\n\u003c/p\u003e\n\n---\n\n## 📌 Pitch para Recrutadores\n\n- ✅ Domínio técnico completo: arquitetura escalável, componentes reutilizáveis, performance otimizada  \n- ✅ Visão de produto: cada decisão foi pensada para entregar valor real ao usuário  \n- ✅ Uso estratégico de IA: aceleração com Copilot e Gemini, sem abrir mão da autoria e qualidade  \n- ✅ Design e UX refinados: interface fluida, estética minimalista e heurísticas de Nielsen aplicadas  \n- ✅ Organização impecável: estrutura de pastas clara, documentação completa e código limpo  \n\n---\n\n## 🧠 Visão Estratégica\n\nPrimeFlix Moderno é mais que uma aplicação React. É uma demonstração clara de engenharia de produto moderna, onde cada componente, cada decisão e cada linha de código foram pensadas para:\n\n- Encantar o usuário com uma experiência fluida, imersiva e visualmente harmônica  \n- Impressionar recrutadores com organização, clareza arquitetural e domínio técnico  \n- Mostrar como IA pode acelerar sem comprometer qualidade, visão ou autoria  \n\n---\n\n## ⚙️ Tecnologias Utilizadas\n\n| Tecnologia            | Finalidade                                      |\n|-----------------------|-------------------------------------------------|\n| React 18              | UI declarativa e componentizada                |\n| Vite                  | Bundler moderno e ultra-rápido                 |\n| TailwindCSS           | Estilização utilitária e responsiva            |\n| Styled Components     | Estilo dinâmico por componente                 |\n| Axios                 | Requisições HTTP com interceptadores           |\n| React Router DOM      | Navegação SPA com rotas dinâmicas              |\n| FontAwesome           | Ícones acessíveis e modernos                   |\n| ESLint + Plugins      | Padronização e qualidade de código             |\n\n---\n\n## 📁 Estrutura de Pastas\n\n```bash\n/primeflix-moderno\n├── src/\n│   ├── assets/                         # Imagens, ícones e arquivos estáticos\n│   ├── components/                     # Componentes reutilizáveis da aplicação\n│   │   ├── common/                     # Elementos visuais globais\n│   │   │   ├── BackgroundGlow.jsx\n│   │   │   ├── LoadingSpinner.jsx\n│   │   │   └── ScrollProgress.jsx\n│   │   ├── features/                   # Componentes com funcionalidades específicas\n│   │   │   ├── ConfirmationModal.jsx\n│   │   │   ├── CookieConsentBanner.jsx\n│   │   │   ├── HeroCarousel.jsx\n│   │   │   ├── MovieCarousel.jsx\n│   │   │   └── MovieForm.jsx\n│   │   ├── layout/                     # Estrutura visual da aplicação\n│   │   │   ├── Footer/\n│   │   │   │   ├── BackToTopButton.jsx\n│   │   │   │   ├── footer.data.js\n│   │   │   │   ├── FooterLinkColumn.jsx\n│   │   │   │   ├── NewsletterForm.jsx\n│   │   │   │   └── SocialLinks.jsx\n│   │   │   ├── Header/\n│   │   │   │   ├── header.data.js\n│   │   │   │   ├── MobileMenu.jsx\n│   │   │   │   ├── NavLinks.jsx\n│   │   │   │   ├── ProfileDropdown.jsx\n│   │   │   │   └── Search.jsx\n│   │   │   ├── Footer.jsx\n│   │   │   ├── Header.jsx\n│   │   │   └── RootLayout.jsx\n│   │   ├── ui/                         # Componentes visuais genéricos e reutilizáveis\n│   │   │   ├── MovieCard/\n│   │   │   │   ├── CardHoverOverlay.jsx\n│   │   │   │   ├── CardImage.jsx\n│   │   │   │   └── useMovieCardLogic.js\n│   │   │   ├── Button.jsx\n│   │   │   ├── ErrorDisplay.jsx\n│   │   │   ├── Input.jsx\n│   │   │   ├── LoadingSkeleton.jsx\n│   │   │   ├── MovieCard.jsx\n│   │   │   ├── Spinner.jsx\n│   │   │   └── Toast.jsx\n│   ├── contexts/                       # Contextos globais para gerenciamento de estado\n│   │   ├── auth-context.js\n│   │   ├── AuthProvider.jsx\n│   │   ├── MovieContext.jsx\n│   │   └── PageTransitionContext.jsx\n│   ├── hooks/                          # Hooks personalizados\n│   │   ├── useAuth.js\n│   │   ├── useCarouselScroll.js\n│   │   ├── useClickOutside.js\n│   │   ├── useHeroCarousel.js\n│   │   ├── usePageData.js\n│   │   ├── useScroll.js\n│   │   └── useToast.js\n│   ├── pages/                          # Páginas principais da aplicação\n│   │   ├── AddMoviePage.jsx\n│   │   ├── EditMoviePage.jsx\n│   │   ├── HomePage.jsx\n│   │   ├── MoviesPage.jsx\n│   │   ├── MyListPage.jsx\n│   │   ├── NotFoundPage.jsx\n│   │   ├── PlaceholderPage.jsx\n│   │   └── SeriesPage.jsx\n│   ├── services/                       # Lógica de negócio e integração com APIs\n│   │   ├── movieStorageService.js\n│   │   └── tmdbService.js\n│   ├── utils/                          # Funções auxiliares e utilitárias\n│   │   ├── imageUrlBuilder.js\n│   │   └── throttle.js\n│   ├── App.jsx                         # Componente raiz da aplicação\n│   ├── index.css                       # Estilos globais\n│   └── main.jsx                        # Ponto de entrada da aplicação\n├── .env                                # Variáveis de ambiente\n├── package.json                        # Dependências e scripts do projeto\n├── tailwind.config.js                  # Configuração do TailwindCSS\n├── postcss.config.js                   # Configuração do PostCSS\n```\n\n---\n## 🧩 Componentes-Chave\n\n### `HeroCarousel.jsx`\n- Destaque visual da home  \n- Navegação fluida e responsiva  \n- Integração com dados dinâmicos  \n\n### `MovieCard.jsx`\n- Exibição de filmes/séries  \n- Design adaptável e acessível  \n- Botões de ação (favoritar, assistir, etc.)  \n\n### `MovieForm.jsx`\n- Formulário para adicionar/editar conteúdo  \n- Validação de campos e UX clara  \n- Feedback visual para erros  \n\n---\n\n## 🎥 Integração com a API TMDB\n\nEste projeto utiliza a [The Movie Database (TMDB)](https://developer.themoviedb.org/docs) como fonte principal de dados para filmes e séries.  \nA API fornece informações atualizadas e confiáveis, permitindo que a aplicação exiba conteúdos reais com imagens, descrições, avaliações e muito mais.\n\n\n## 🧠 UX com Base nas 10 Heurísticas de Nielsen\n\nEste projeto foi desenhado com base nas 10 heurísticas de usabilidade de Jakob Nielsen:\n\n1. **Visibilidade do status do sistema**  \n2. **Correspondência entre sistema e mundo real**  \n3. **Controle e liberdade do usuário**  \n4. **Consistência e padrões**  \n5. **Prevenção de erros**  \n6. **Reconhecimento em vez de memorização**  \n7. **Flexibilidade e eficiência de uso**  \n8. **Design estético e minimalista**  \n9. **Ajuda para reconhecer e recuperar erros**  \n10. **Ajuda e documentação**\n\n\u003e Cada componente foi avaliado e ajustado com base nessas heurísticas, garantindo uma experiência intuitiva, eficiente e agradável.\n\n---\n\n## 🔐 Segurança e Performance\n\n- Uso de `.env` para variáveis sensíveis  \n- Prevenção contra XSS e falhas comuns  \n- Lazy loading e code-splitting para otimização  \n- Imagens otimizadas e renderizações controladas  \n\n---\n\n## 📦 Scripts Disponíveis\n\n```json\n\"scripts\": {\n  \"dev\": \"vite\",\n  \"build\": \"vite build\",\n  \"lint\": \"eslint .\",\n  \"preview\": \"vite preview\"\n}\n```\n## 📈 Próximos Passos\n\n- Autenticação com Firebase ou OAuth  \n- Sistema de recomendação inteligente  \n- Modo escuro e preferências do usuário  \n- Testes automatizados com Jest + React Testing Library  \n\n---\n\n## 👨‍💻 Sobre o Autor\n\n**Renato Filho** — Desenvolvedor Frontend com foco em excelência, usabilidade e arquitetura limpa.  \nEste projeto foi acelerado com IA (Copilot + Gemini), mas cada decisão técnica e visual foi tomada com base em experiência, pesquisa e domínio de boas práticas.\n\n\u003e Mesmo com IA, o domínio é meu.  \n\u003e A arquitetura foi pensada, não gerada.  \n\u003e O design foi alinhado, não improvisado.  \n\u003e O resultado é um projeto que une velocidade, qualidade e visão de produto.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenatofilhodevandtech%2Fsite-primefix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frenatofilhodevandtech%2Fsite-primefix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenatofilhodevandtech%2Fsite-primefix/lists"}