尚未偵測到更新。GitHub 發布版本後會顯示在這裡。
依最近已完成的 8 小時觀測回合間的 GitHub 星號增量排序
Rebuild reference videos as editable AI motion graphics for product demos and launch videos. Download MotionClone for Windows or explore the early-access online studio.
翻譯準備中
個人 GitHub 帳號下公開儲存庫的擁有者可以登入並驗證所有權，自行管理介紹，無需管理員核准。
登入並產生驗證檔案，在 30 分鐘內將其提交至此儲存庫的預設分支。其他分支或分叉儲存庫中的檔案無效。然後在下方檢查檔案，即可無需管理員核准直接管理專案。請保留檔案以維持管理權限。
如需登入，將前往登入頁面。登入後請回到此處，再次點擊所選的驗證按鈕。
在專案資料夾中執行 /nomorevibe verify，即可驗證所有權並自行管理介紹。
一分鐘完成驗證製作者的介紹僅有上面的一句話。 更多詳情請閱讀儲存庫 README。 儲存庫 README ↗
正在載入完整 README。
檢視完整 README ↗Interface web do GuysMovies, uma rede social de filmes e séries onde cada pessoa registra o que assistiu, monta a própria watchlist, avalia títulos, acompanha séries temporada a temporada e marca com quem assistiu cada coisa.
Construída em Next.js com TypeScript e Tailwind CSS. A API que alimenta esta interface vive em guys-movies-backend.
| Ambiente | URL |
|---|---|
| Produção | https://www.guysmovies.space |
| API | https://guys-movies-backend.onrender.com |
| Camada | Tecnologia |
|---|---|
| Runtime | Node.js 20 |
| Framework | Next.js 15 com Pages Router |
| Linguagem | TypeScript 5 |
| UI | React 18 |
| Estilo | Tailwind CSS 3 e PostCSS |
| Animação | Framer Motion |
| Formulários | React Hook Form com Yup |
| Datas | date-fns e react-day-picker |
| Carrosséis | react-slick |
| Notificações | react-toastify |
| Ícones | react-icons |
| Container | Docker multi stage e Docker Compose |
| Rota | Descrição |
|---|---|
/ | Home, descoberta de filmes |
/series | Descoberta de séries |
/busca | Busca de filmes, séries e pessoas |
/assistidos | O que a pessoa logada já assistiu |
/watchlist | Watchlist da pessoa logada |
/movie/[id] | Detalhe de um filme |
/serie/[id] | Detalhe de uma série |
/perfil/[username] | Perfil público de uma pessoa |
Navegador
|
v
Next.js (este repositório)
| \
| getServerSideProps \ fetch no cliente
v v
GuysMovies API (NestJS)
|
PostgreSQL + TMDB
As páginas de descoberta usam getServerSideProps para o primeiro paint vir
pronto do servidor, com cabeçalho de cache público e stale-while-revalidate.
Tudo que depende da sessão passa por hooks que fazem fetch no cliente com
credentials: 'include', para o cookie httpOnly seguir na requisição.
A mesma variável NEXT_PUBLIC_URL_API é lida nos dois lados, no servidor e no
navegador. Isso importa na hora de rodar em container, e está detalhado em
Stack completa, front e back juntos.
Para o caminho com Docker, que é o recomendado:
Para rodar sem Docker, Node.js 20 ou superior e npm 10 ou superior.
Não é preciso banco nem chave de API para ver a interface funcionando: por padrão o Compose aponta para a API já publicada.
| Variável | Obrigatória | Descrição |
|---|---|---|
NEXT_PUBLIC_URL_API | sim | URL base da API, sem barra no final |
Por ser prefixada com NEXT_PUBLIC_, a variável é embutida no bundle no momento
do build. Em imagem de produção ela precisa ser passada como build arg, não só
como variável de runtime. O Dockerfile já declara o ARG correspondente.
Para rodar fora do Docker, copie o exemplo:
cp .env.example .env
O docker-compose.yml sobe um único serviço, o Next.js em modo de
desenvolvimento com hot reload. A API padrão é a publicada em produção, então
não é preciso levantar o backend para ver a aplicação de pé.
git clone https://github.com/AndreFreitasz/guys-movies-frontend.git
cd guys-movies-frontend
docker compose up --build
A primeira execução instala as dependências dentro da imagem e leva alguns minutos. Nas próximas, o cache do Docker resolve em segundos.
Para deixar rodando em segundo plano:
docker compose up --build -d
A interface já vem conectada em
https://guys-movies-backend.onrender.com. Cadastro, login, watchlist e perfil
funcionam contra os dados reais de produção.
A API roda em plano gratuito e hiberna quando fica ociosa. Se o primeiro carregamento vier vazio, espere uns 30 segundos e recarregue.
Crie um .env na raiz com o endereço que você quiser e suba de novo:
echo "NEXT_PUBLIC_URL_API=http://localhost:3005" > .env
docker compose up -d
O Compose lê esse .env para resolver a variável. Se o backend estiver em
container também, leia a seção
Stack completa, front e back juntos,
porque localhost dentro de um container não aponta para a sua máquina.
docker compose down
Para apagar também os volumes de dependências e cache do Next:
docker compose down -v
docker compose logs -f web # acompanha os logs do Next
docker compose restart web # reinicia o container
docker compose build --no-cache web # rebuild limpo após mudar dependências
docker compose exec web sh # abre um shell dentro do container
O código é montado por bind mount, então editar um arquivo na sua máquina
recarrega a página sozinho. Só é preciso rebuildar quando o package.json muda.
O Dockerfile tem quatro estágios: deps, dev, builder e runner. O
Compose usa o dev. Para gerar e rodar a imagem otimizada, com next build e
next start:
docker build \
--target runner \
--build-arg NEXT_PUBLIC_URL_API=https://guys-movies-backend.onrender.com \
-t guys-movies-frontend:prod .
docker run --rm -p 3000:3000 guys-movies-frontend:prod
O --build-arg é obrigatório aqui. A variável é embutida no bundle durante o
build, então passar só -e no docker run não teria efeito no código que roda
no navegador.
npm install
cp .env.example .env
npm run dev
A aplicação sobe em http://localhost:3000. Ajuste o NEXT_PUBLIC_URL_API do
.env conforme a API que você quer consumir.
Para simular produção na sua máquina:
npm run build
npm start
Se você quer os dois repositórios rodando na sua máquina, com banco local, o caminho mais curto é deixar a API em Docker e o frontend fora dele.
1. Suba a API seguindo o README do backend:
git clone https://github.com/AndreFreitasz/guys-movies-backend.git
cd guys-movies-backend
cp .env.example .env # preencha TMDB_API_KEY
docker compose up --build -d
A API fica em http://localhost:3005 com o Postgres ao lado.
2. Rode o frontend na máquina, apontando para ela:
cd ../guys-movies-frontend
npm install
echo "NEXT_PUBLIC_URL_API=http://localhost:3005" > .env
npm run dev
Abra http://localhost:3000. Essa combinação funciona sem nenhum ajuste extra: o
navegador e o getServerSideProps rodam na mesma máquina, as duas pontas ficam
em localhost e o cookie de sessão é aceito como same site.
NEXT_PUBLIC_URL_API é usada no navegador e dentro do getServerSideProps, que
roda no servidor Next. Com o frontend em container e a API publicada na sua
máquina, http://localhost:3005 resolveria para o próprio container no lado do
servidor, e a renderização falharia.
Para rodar os dois em Docker, use um host que valha nas duas pontas. No Docker
Desktop, host.docker.internal resolve tanto dentro do container quanto na sua
máquina:
echo "NEXT_PUBLIC_URL_API=http://host.docker.internal:3005" > .env
docker compose up -d
E abra a aplicação em http://host.docker.internal:3000, não em localhost.
Precisa ser o mesmo host nas duas pontas, senão o navegador trata a chamada como
cross site e descarta o cookie de sessão. Esse endereço já está liberado no
CORS_ORIGINS padrão do Compose do backend.
| Script | O que faz |
|---|---|
npm run dev | Servidor de desenvolvimento na porta 3000 |
npm run build | Build de produção |
npm start | Serve o build de produção |
npm run services:up | Sobe o container do Compose em background |
npm run lint:check | Confere a formatação com o Prettier |
npm run lint:fix | Formata com o Prettier |
pages/ rotas do Pages Router, uma pasta ou arquivo por rota
components/
_ui/ header, footer, modal, formulários, carrossel, barra de abas
home/ carrosséis e cards da home
mediaDetails/ bloco compartilhado de detalhe de filme e série
movie/ detalhe de filme e provedores de streaming
series/ detalhe de série e checklist de temporadas
profile/ avatar, capa, favoritos, editor e listas de pessoas
search/ resultados de busca por tipo
watched/ listagem e edição do que foi assistido
watchlist/ listagem da watchlist
hooks/ authContext e um hook por recurso da API
interfaces/ tipos de domínio, espelhando as respostas da API
constants/ catálogo de serviços de streaming
utils/ authFetch e cabeçalhos de cache do SSR
styles/ CSS global e tokens do tema
public/ imagens, ícones e capas de perfil
Dockerfile deps, dev, builder e runner
docker-compose.yml Next em modo desenvolvimento com hot reload
getServerSideProps com cache na borda, sem precisar de
migração.localStorage, então
o JavaScript da página não tem acesso a ele. Todo fetch autenticado passa pelo
utils/authFetch.ts, que envia as credenciais.hooks/, com o
estado de carregamento e erro no mesmo lugar. Nenhuma página fala com fetch
diretamente para dados de sessão.tailwind.config.ts, não espalhadas em classes arbitrárias.utils/httpCache.ts aplica s-maxage e
stale-while-revalidate nas páginas de catálogo, que são iguais para todo
mundo.O frontend roda na Vercel, com deploy automático a cada
commit na main. O domínio de produção é www.guysmovies.space, e o apex
redireciona para ele.
A NEXT_PUBLIC_URL_API é configurada no painel do projeto na Vercel. Como ela é
embutida no bundle em tempo de build, mudar o valor exige um novo deploy, não só
um restart.
Ao trocar o domínio do frontend, também é obrigatório atualizar CORS_ORIGINS
no painel do Render, onde a API roda. Sem isso o navegador bloqueia as chamadas
e o login para de funcionar.
A página carrega mas os carrosséis vêm vazios. O NEXT_PUBLIC_URL_API está
errado ou a API está hibernando. Confira
curl $NEXT_PUBLIC_URL_API/health e recarregue depois de uns 30 segundos.
Erro de CORS no console. A origem que você está usando não está em
CORS_ORIGINS na API. Com o backend local, adicione a origem no .env dele e
reinicie o container.
O login parece dar certo mas a sessão não persiste. Frontend e API estão em hosts diferentes, então o navegador descarta o cookie. Use o mesmo host nas duas pontas, como explicado em Stack completa, front e back juntos.
A porta 3000 já está em uso. Pare o processo que a ocupa ou mude o
mapeamento em docker-compose.yml.
O hot reload não dispara no Windows ou no WSL. O Compose já define
WATCHPACK_POLLING=true para isso. Se mesmo assim não pegar, reinicie o
container com docker compose restart web.
Mudei o package.json e o container não vê a dependência nova. As
dependências vivem em volume nomeado. Rode
docker compose down -v && docker compose up --build.
main, no formato feat/nome, fix/nome ou chore/nome.feat(ui): usar o favicon.png como icone da guia.npm run lint:fix e npm run build antes de abrir o PR.MIT. Veja o campo license do package.json.