PROJETO DE FILMES COM REACT E API DO TMDB (REACT ROUTER, REACT HOOKS)

[@MatheusBattisti]

👉👉Conheça nosso curso completo de React JS: app.horadecodar.com.br/course/curso-react-js-completo

[@Felipe-hn3tp]

Matheus vc poderia me responder por que quando coloquei o arquivo .env dentro de src, a url de topRatedURL sempre dava como undenified. agora quando coloquei o arquivo .env dentro do arquivo principal do projeto ( movie ) ele carregou os filmes corretamente.

[@Imaddureis]

Fala Matheus! Tô fazendo seu curso na udemy de JS e tô amandoooooooo! Suas aulas super didáticas e fácies de aprender! Parabéns pelo trabalho incrível!🚀

[@MatheusBattisti]

oi Maria, obrigado, te desejo um bom curso! =D

[@denysantos9012]

E eu faço o de php na udemy e outros vários aqui no KZbin, esse professor me fez destravar e saber o caminho onde eu quero chegar! Quais próximos passos dar após dominar determinado conhecimento, sou mt grato a ele!

[@matheusspbr]

qual o link do curso na udemy?

[@Cookieukw]

os cara da danki code deveriam aprender com eles

[@homecarebemestar6609]

​@@MatheusBattistiesta api e uma e api de codigo aberto. Voce sabem se ela tem um custo usar ela

[@Cookieukw]

19:17 Ele tbm serve pros atributos n mexerem no tamanho do elemento, como por um padding em uma div e ela ficar maior. essa parte de n ultrapassar o elemento pai achei q era só o *overflow: hidden;* q fazia

[@MatheusBattisti]

⭐Conheça a Formação Front-end (+50 de horas de conteúdo, +20 de projetos) para você se tornar um dev front-end: www.udemy.com/course/formacao-front-end-html-css-javascript-react-e/?couponCode=LANCOUFE

[@lucas-morais-1998]

Projeto massa! Eu havia visto o vídeo mas não tinha criado, hoje tirei o dia pra fazer e foi muito bom. Quis tentar algo diferente, então fiz uma componentização separada por pastas, e utilizei o Intl.NumberFormat para formatar os valores de moeda.

[@MatheusBattisti]

⭐ Conheça a nossa plataforma de cursos: www.horadecodar.com.br/comunidade-hora-de-codar/

[@PexuPixo]

Não entendi porque a requisição fica duplicada (2x)

[@VictorAlmeidaDev]

Simplesmente sensacional, você é o único que está me fazendo entender o React!

[@tuss1085]

estou aos 26:31, meu código não apresenta erros aparentes, porém nada doq o Matheus olha no devTools aparece para mim, nem os console.log com as variáveis de URL e key da api, e nem a parte que ele acessa em network, alguém sabe oq poderia estar acontecendo?

[@FelipeLimaCoelho]

Show de aula como sempre, mas só passando para dizer que a API do TMDB tem sim as informações em português, basta acrescentar "&language=pt-BR".

[@MatheusBattisti]

opa aí sim Felipe, não cheguei a ver sobre isso nas docs =((

[@thiagosilva-lb6qp]

Eu li a documentação porém não consegui entender exatamente como fazer

[@ryantaylor9258]

@@MatheusBattisti ao fazer o pedido da chave da API pede pra inserir uma URL do aplicativo, o que seria?

[@emersonnobre4493]

@@thiagosilva-lb6qp so mandar no reader da requisicao, como o amigo falou ai em cima

[@plinioglad]

Excelente projeto! Para mim funcionou de boa! Se colocar na URL esse parâmetro " language=pt-BR " fica tudo em português tanto o grid, como o search e o movie. Parabéns!!!!

[@funnydeco]

muito bom o projeto mesmo aprendi bastante, aonde tu colocou o parâmetro pra ficar em português? li a documentação e todas as minhas tentativas falharam kkkk

[@paulinhadev]

Projetinho massa, obrigada por estar sempre ensinando tecnologias novas. Eu fiz um parecido com o owl carrossel. Mas quero tentar esse que parece ser sem biblioteca.

[@MatheusBattisti]

valeu Paula, espero que eu consiga te ajudar no seu aprendizado! =)

[@AMJr1974]

Ótima aula! Foi perfeito! Estava fazendo um projeto e tinha "travado" nas rotas. Esse vídeo caiu como uma luva. Muuito obrigado pelo material. Conheci você pela UDEMY com o curso de PHP que comprei e agora te sigo no KZbin também.

[@iridium-x7i]

Eu fiz esse pro meu portifólio. Api enorme bolada vale a pena.

[@MatheusBattisti]

boa Vini!

[@welingtonsilvalopes9825]

Subiu ele no GitHub? Tentei fazer o deploy e deu problema com a chave api, como sou iniciante não consegui resolver. Diz que a chave api não pode aparecer no código fonte e que teve um vazamento de informações 😢

[@leandrolima7801]

@@welingtonsilvalopes9825 Sei que já faz tempo que você postou isso, mas vou responder pra caso alguém tenha o mesmo problema. É só colocar o caminho do arquivo .env em um arquivo .gitignore na raiz do projeto (abrir o arquivo .gitignore e colocar: ./env) para o GitHub ignorar esse arquivo .env, já que não é bom colocar informações sensíveis em um repositório, que geralmente é público. Uma boa ideia é criar um arquivo .env.example e colocar apenas as chaves, sem os valores (VITE_API_KEY, sem a resposta), para quem for visualizar o projeto verificar o arquivo .env.example e saber as informações necessárias para o arquivo .env.

[@itash7]

Eu acho que seria ótimo uma landing page 100% responsiva com React, é bom pra quem tá iniciando

[@willangois5140]

Finalizei o vídeo e seguindo passo a passo, empaquei em algumas partes por detalhes de falta de atenção, ex: falta de importar algo hahahah, no geral muito bom, feliz por finalizar e dar certo, cara parabéns por disponibilizar esse conteúdo aqui no KZbin, que Deus te abençoe, abraços!

[@MatheusBattisti]

boa William!! =)

[@brunosalgadoti]

Boa Professor!! São ótimos esses seus Projetos rápidos, nos proporciona um melhor entendimento das tecnologias empregadas!! 100% Matheus Battisti!!!

[@MatheusBattisti]

valeu Bruno, tamo junto!

[@eltoncampos5722]

Eu ainda não estou na parte do React, mas estou entrando no vídeo pra deixar meu like e meu comentário para ajudar o trabalho do Matheus. Vlw mesmo pela qualidade 👍

[@MatheusBattisti]

obrigado Elton!

[@mbfreitas0]

Esse foi o melhor Curso que já fiz !!! Alto nível !!! Obrigado Matheus !!!

[@MatheusBattisti]

valeu por acompanhar Marcelo!

[@igorluyz_]

Parabéns pelo vídeo, didática excelente. só fiquei perdido em alguns cortes quando teve algo de errado no código, mas, no geral, muito bom. show

[@tiagolveira555]

Conteúdo incrível, parabéns!!!!!!!

[@MatheusBattisti]

valeuu Tiago! =D

[@PedroHenrique-qt7hj]

Excelente!!! Parabéns pelo vídeo e a didática perfeita!! 😁

[@nedersimoes]

Deixando o like antes de assistir pq ja sei que tá show! hahaha

[@MatheusBattisti]

valeuu Nede!

[@Lima-yd3cm]

Ficou muito bom 👏👏👏

[@MatheusBattisti]

valeuu Lima! =)

[@caiolagreca2696]

Sempre trazendo projetos práticos e com uma ótima didática, parabéns Matheus!

[@MatheusBattisti]

valeu Caio!

[@freeza7892]

Olá Matheus, sou um grande fã do seu trabalho e seus tutoriais. Eu tenho problemas com a união do backend/frontend com Axios e queria saber se você poderia fazer um tutorial sobre isso. Agradeço

[@itash7]

up

[@raimundojunior8547]

Com certeza um ótimo conteúdo, irei fazer assim que pegar uma folga, eu amo projetos em react obrigado Matheus

[@MatheusBattisti]

show Raimundo!

[@rangelramos6259]

Aula muito foda, parabéns Matheus

[@douglasabnovato]

Parabéns Matheus. Esclareceu várias dúvidas sobre a construção de projeto semelhantes.

[@carlosamorim94]

Matheus, vc é fera demais!

[@MatheusBattisti]

tamo junto Carlos, tomara que te ajude =)

[@vriboli]

Que aula incrível, eu faço seu curso de React do zero a maestria, é muito bom além de praticar muito lá vim e praticar aqui tbm.

[@MatheusBattisti]

valeu Vitor, bora pro projeto entao =D

[@oewertonlopes]

Obrigado pelo ensinamento!

[@MatheusBattisti]

de nada Ewerton!

[@jpcc1223]

muito massa o projeto, mt obrigado por compartilhar tanto conhecimento! Uma sugestão: fala um pouco sobre padrão de projeto, etc

[@MatheusBattisti]

valeu Joao, obrigado pela sugestão tb =)

[@DevelopmentLaboratory]

Projeto massa, vou fazer umas 20x muito conceito bacana

[@MatheusBattisti]

boa! =D

[@marcosfboliveira]

Opa, para mim a variante apresenta: TypeScript TypeScript +SWC JavaScript JavaScript +SWC Remix

[@davidandrade2412]

Muito bom. Muita técnica aplicada

[@guilhermeolibr6784]

Vídeo incrível ! Parabéns

[@cailtomoliveyra8482]

Né Pusilvio, tava vendo a documentação dessa API essa semana.😳

[@MatheusBattisti]

hahaha agora é por em prática xD

[@jeanfserrano]

Trás uns projetinhos com typescript pra gente! No mais, muito obrigado pelo conteúdo, já curtido!

[@MatheusBattisti]

pode deixar Jean!

[@ricardoalves8551]

fiz exatamente igual com exceção da key api que usei a minha, mas quando click em algum lugar do site nao retorna nada

[@peter3.024]

Faz mais projetos como esse, do início ao fim, mas usa typescript pls

[@frndev2155]

matheus é fera

[@MatheusBattisti]

valeu Fabiano!

[@jhonatanoliveira4183]

Fala Matheus! Traz um vídeo com React + Tailwindcss, por favor. Valeu

[@MatheusBattisti]

opa Jhonatan, tá pra vir um de Tailwind puro, depois faço um com React sim =)

[@fsancho5]

Acho legal fazer um projeto semelhante a esse usando ts

[@MatheusBattisti]

com certeza Francisco!

[@AllyDevDroid]

Ensina como criar Launher para tv Android como recomendacoes do TMDB na tela e icones de apps

[@SLZGAM3R]

Me salvou muito a fazer um projeto com essa mesma api, vlwwwwwwwwwwwwwwwwwwwwwwwwwww

[@brayanmeloo]

Dá pra colocar todos os resultados em pt-BR somente passando a o parâmetro " &language=pt-BR " no final da URL

[@kleitonbezerra3122]

Show de bola!!! Parabéns pelo conteúdo! Faltou só a paginação, rs... Vou procurar implementar e fz um PR pra vc

[@nicolas_galdino]

Ótima ideia de projeto professor, curti demais! Já até consigo pensar em como usar as explicações dessa aula para criar uma PokeDex, uma aula dois projetos. Haha

[@MatheusBattisti]

valeu Nícolas! =D

[@uosp3.]

Caraca véi, no instante 56:09 as linhas 22, 23 e 24 estão com 'topMovies' no instante seguinte ja aparece so com 'movies'. Ajuda aí professor, alterou e não mostrou.

[@alexvicente9426]

Estou iniciando no React e gostei mais dessa maneira de escrever o css, mais tradicional, não curti o styled component, esse último teria alguma vantagem especifica?

[@techpaiva]

Muito Bom!!!

[@MatheusBattisti]

valeu Antonio! Fica a dica do meu curso completo: horadecodar.com.br/comunidade-hora-de-codar/

[@Edu4Dev]

Você tem 361 horas de curso gravado no seu site, caramba... ! isso é impressionante, parabéns!

[@caiolagreca2696]

Matheus, quais seriam as vantagens de se usar o Vite ao invés do React-create-app? Vi que a instalação é mais rápida, porém há outras vantagens?

[@natapacheco1915]

Fala, Caio, tudo jóia? Já ouvi falar que além de performance o Vite é mais optimizado no que diz respeito à bugs. Mas os dois fazem as mesmas coisas, basicamente, é questão de escolha.

[@Cookieukw]

@@natapacheco1915no vite n vem os arquivos ""lixo"" q vem no react, foi só isso q notei de diferença

[@devTainaFarias]

20:19 começa Home

[@pedrol6193]

Excelente aula

[@ericksilveriodesigntecnolo1001]

Muito foda Matheus!

[@MatheusBattisti]

valeu Erick!

[@emiliodeaguiarfonseca6724]

Lindão o projeto.

[@dcardoso1089]

Obrigado pelo Curso Matheus! Muito Bom O projeto funciona perfeitamente no meu LocalHost, mas ao fazer o deploy na Vercel a página Search não carrega os dados do filme pesquisado. O que pode ser?

[@joaomaciel5689]

com certeza é problema com CORS, pois sua url é diferente da api, por isso eles bloqueiam como um metodo de segurança padrão do navegador

[@brunoarcaldara]

Matheus, parabéns pelo conteúdo de qualidade. Teria como mostrar pra gente como hospedar esse projeto no github pages?

[@keiteylopes1581]

Ei Bruno, o github page somente suporta projetos feitos em HTML,CSS e Javascript, para deploy de projetos em React eu recomendo o netlify ou o vercel

[@mugichan95]

Faz mais projetos assim usando ts!

[@MatheusBattisti]

pode deixar Victor!

[@burn_cooper]

alguem esta tendo problema de not found na hora de exibir a imagem na tela ? no minuto 36:00 as imagens dos filmes aparecem na pagina, no meu ta aquele link de imagem quebrada :(

[@iDontHaveName-d5q]

eu estou tendo problema com o meu,conseguir arrumar,ja fiz ate um if fora do ternario e nada

[@ricardogava3494]

Essa placa na porta tá precisando de um justify-content: center, dá agonia ver ela no canto kkk

[@MatheusBattisti]

hahah intencional Ricardo

[@querinoland8413]

estava pensando em uma coisa um site porem com divisão por exmplo series, filmes e em cada dividir por categorias, e fazer uma interface bonita mais ou menos entre netflix e crunchyroll

[@sergiosobrinho9428]

Muito boom!

[@renniferteixeira6454]

não apareceu no inicio o react duas vezes, apenas na primeira, atrapalha no projeto? marquei remix a segunda opção

[@rodrigospinelli1480]

Por favor, faz mais projetos com Vue

[@MatheusBattisti]

opa Rodrigo, tentarei trazer sim

[@VitorHugo-np9qs]

tinha feito um "projeto pessoal" de filmes baseado na api moviesdatabase na rapidApi, demorei uns dias para fazer o que o professor fez em 1 hora kkkkk

[@AlexandreFreitas17]

Professor Matheus, Como sempre seus materiais são show. Comprei seu curso de React na Udemy e já vou começar. Vc poderia me dizer que extensão vc usa para exibir essas sugestões de código CSS, já procurei aqui e não encontrei. desde já agradeço.

[@ethan7522]

ES7+ React/Redux/React-Native snippets é só instalar essa extensão e reiniciar o vscode amigo, bom código e tamo junto

[@AlexandreFreitas17]

@@ethan7522 Vlw amigo. Muito Obg.

[@PauloHenrique-ry1zc]

Faz mais projetos com TypeScript, plissss

[@rendohe5432]

fala Matheus. eu fiz o deploy do projeto na vercel e a aba de Search simplesmente parou de funcionar. Em desenvolvimento funciona normal, mas no site não. Como resolver isso?

[@weldsoncarlos]

Já encontrou a solução? aqui tá dando o mesmo problema, só reparei que o end point tá dando status 301, mas além disso nada.

[@rendohe5432]

nada ainda

[@fepera]

Retira a '/' no final da variável 'VITE_SEARCH', ficando: 'api.themoviedb.org/3/search/movie', com a barra ela vira http em vez de https e da erro. Uma coisa que não consegui fazer foi esconder a apiKey das requisições, então ela fica exposta para todos se vc não utilizar uma api. Estava tentando fazer com Vercel Serverless Functions mas ainda não consegui, bem que o Matheus poderia lançar um vídeo sobre isso. 😅

[@Cookieukw]

pode ser as variáveis de ambiente. tem q por lá ma vercel tbm

[@ricardobraga6433]

@@fepera valeu! Me ajudou aqui com isso..rsrs

[@grarielaracris]

Que show! Poderia fazer em Angular também né, nunca te pedi nada eheheh. ☺️🙏

[@MatheusBattisti]

opa Graziele, é uma hehe

[@rubenmatias2226]

Fiz o projecto, no entanto a unica coisa que não funciona é a parte da pesquisa. dá este erro: Uncaught TypeError: Cannot read properties of undefined (reading 'length') o que posso fazer?

[@alexandremariano31]

mesma coisa aqui

[@danilo_teixeira]

Essa API retorna link do trailer? Seria legal

[@viniciusresende781]

Matheus, estou usando o axios para a requisição, até o momento deu tudo certo, assim como aconteceu com vc nos results dos filmes, etc. Mas qnd fiz o msm teste que vc fez para listar os titulos dos filmes, não apareceu, aí fiquei travado nessa parte, sabe o que pode ter sido?

[@guilhermepereira8920]

o meu travou ai tambem brother , nao sei como resulver

[@viniciusresende781]

@@guilhermepereira8920 vc ta usando axios?

[@alexandremariano31]

o meu não tá mostrando resultado, fiz igual a ele. Dá erro de length no map

[@pedrozeferinodasilva9746]

Fala Matheus tudo bem massa e você usa o tailwindcss

[@MatheusBattisti]

fala Pedro, vou usar em um projeto futuro, pode deixar =D

[@raiane1098]

Projeto maravilhoso, e eu que passei 12 horas procurando um erro, hora de fazer a requisição de busca, não aparecia os filmes pesquisados, o erro tava no hifen do doc env, q eu coloquei um hifen e no Search.jsx coloquei um enderline, socorro, mas deu certo no fim...

[@LennWeltmeister]

Matheus, este projeto é o mesmo do PHP? (Vou ver o vídeo quando chegar em casa, vai me ajudar muito a reforçar os hooks)

[@MatheusBattisti]

hahha não não, só aproveitei as cores xD

[@BrunoRodrigues-bx3pl]

Meu raciocínio e principalmente minha máquina de merd4 não consegue te acompanhar kkkkkkkkkkk Mas tu manda muito bem, parabéns

[@SamuelGuedesDev]

Aula top, pena que ainda ta mo confuso na cabeça

[@reuelsiIva]

criar a key no tmdb está diferente agora. pode dar uma dica como preencher aquele formulario que solicitam?

[@guilhermepereira8920]

travei ai tb bro , caso encontre a solucao, passa pra mim

[@reuelsiIva]

​@@guilhermepereira8920 vc pode preencher aquele formulario para cada projeto diferente (e ai cada vez vai gerar uma api key) ou preenche uma unica vez para usar a api key gerada como padrão dos seus projetos. Eu preenchi nome do projeto como "clone-streaming" e uso a api key gerada para alimentar diferentes streamings que eu clonar

[@danyelsilva4273]

Infelizmente tá dando um bug de tela preta,até no arquivo oficial do surgiu,não entendi oque tá acontecendo.

[@pedrom6814]

Retira a '/' no final da variável 'VITE_SEARCH'

[@moisesluz245]

Show

[@wevertonmoura9362]

Faz um vídeo falando sobre essa mudança do laravel mix para o vite . Eu tive que fazer um projeto novo e me fuuuu total com essa mudança. O Jetstream nem roda .

[@MatheusBattisti]

ahhaha valeu pela sugestão Weverton!

[@edvanbbmp]

conteúdo top!!

[@MatheusBattisti]

valeuu Edvan!

[@RenyellenSantos]

Boa tarde, aula top, mas ta dando erro aqui no meu quando faço o npm create... preciso instalar alguma coisa? melhor voltar umas aulas?

[@macedo_jose]

O meu na hora de apertar no botão detalhes não aparece nada e dá esse erro no console: No routes matched location "/movies/278"

[@bloodyyice]

Só para uso pessoal :D 20:22

[@tassioneves1002]

Matheus tudo bem? Estou com problemas na parte das rotas, configurei deste mesmo modo que o seu, porém o componente que está sendo renderizado é o Home e não o App.

[@lokodogtav]

Terminei o projeto tudo certinho . rodou de boa , depois que eu hospedei ele no vercel não funciounol mais o procurar Filmes, só roda na minha maquina, ai depois de uns dias fui rever meu codigo . não consigo mais da npm start ;/ , só abre se eu desbugar, alguem sabe o problema?

[@weldsoncarlos]

npm run dev. Eu também tive o mesmo problema com a vercel tá fazendo a fetch para a api, mas a api tá dando um response status de 301

[@ianfranca8429]

O react de de vocês fica aparecendo em vermelho em baixo da palavra, caso eu não tenha chamado ela ainda? como eu posso tirar isso

[@geruback_8124]

no Search.jsx na linha 33 ta dando erro falando q nao foi possivel ler o .length, ja no Home.jsx tem o mesmo .length e ta funcionando normal. ja reescrevi o codigo e nada

[@MsDiogocouto]

Boa noite Mathes ... uma dica boa , seria implementar mais projetos ao curso de reactjs da udemy ... Apenas uma dica 👍

[@MatheusBattisti]

valeu pela dica Diogo!

[@backtothedayiwashappy]

12:00

[@anderson.developer]

Bom dia amigo. Fiz essa aula e quando fui fazer deploy na vercel as requisições não funciona quando pesquisa filmes

[@insanidade2653]

Conseguiu arrumar? Estou com o mesmo problema

[@juelmapereira4277]

Lindooo

[@marcosandre6968]

Quando busco um filme no site tá dando erro, no console diz: "not read properties of undefined (reading 'length') at Search (Search.jsx:33:17)" movies.length está indefinido, baixei os arquivos do GitHub para executar no meu notebook o site entra porém quando vou buscar algum filme aparece o mesmo erro, eu acredito que o problema deva ser nos links do arquivo .env, mas tirando isso foi um ótimo projeto para entender React, vou continuar vendo mais vídeos sobre.

[@mcbfk504]

o meu tb deu esse erro

[@daniloalves7920]

consegui arrumar, o problema é o link do search realmente, tira o ultimo barra o link correto é movies?query= , não movies/?query

[@heliojunior3754]

@@daniloalves7920 Muito obrigado

[@GabrielAndrade-rz6gn]

@@daniloalves7920 Você me salvou amigo, muito obrigado

[@alexandremariano31]

@@daniloalves7920 aí você mitou demais kkkk obrigado!

[@LarissaCunha2]

infelizmente esta dando erro CORS no console, nao sei como solucionar

[@CastionDev]

alguém que conseguiu fazer o site funcionar agr recente? pq o meu não aparece os filmes, só fica o background sem nada ou entao o h1 da pagina 😥

[@gustavoanjos8977]

O meu está exatamente a mesma coisa vei, vc conseguiu arrumar??

[@CastionDev]

@@gustavoanjos8977 sim, graças ao gpt 🙌🏽

[@gustavoanjos8977]

​@@CastionDev Boa mano aí sim, vc pode me explicar como?? Pq tô ficando quase doido já kkkkkkkkk

[@CastionDev]

@@gustavoanjos8977 no vs code tem uma extensão chamada codeGPT, aew tem uma função que vc copia o código e ele te explica o que está errado e como vc pode melhorar, só ir seguindo o que ele mostra, mas é bom que vc saiba o que está fazendo tbm, pq ele comete erros e pode te atrapalhar mais ainda, boa sorte com o site 😉

[@gustavoanjos8977]

​@@CastionDevokay mano entendi, mto obg pela a ajuda😁

[@cristhianvieira1029]

Olá o seguinte erro na pagina MovieCard: A propriedade 'env' não existe no tipo 'ImportMeta'. Não consegui entender...

[@misaelsapiente4124]

Amazing!!!