Resolvendo DESAFIO de VAGA FRONTEND com React, Next JS, Typescript - parte 2

[@kipperdev]

👉 Curso para aprender React JS e Next JS! www.rocketseat.com.br/ignite?KIPPERDEV-none-none-none-none-redes_kipperdev&referral=kipperdev&coupon=KIPPERDEV@IGNITE CUPOM: KIPPERDEV@IGNITE

[@zoltancaputo9562]

IT WAS DONE ... Excelência no projeto !👋 Estou a quase 2 anos na rocketseat , trabalho como fullStack júnior atualmente em um a empresa super cool ... Migrei de carreira aos 45 anos. A experiência nos trás maturidade ... Acredite em você! Invista em seu potêncial. ( Os dois vídeos são ótimos, explicações e pausas para esclarecimentos são dignos de uma teacher (high qualified.) Não acredite nas promessas de 6 meses , acredite em um plano de estudos sério com gente qualificada. Fiz muitos e muitos projetos com devs do brasil e de fora devido a fluência em inglês , más confesso que tirei dúvidas essenciais neste projeto com a Fê e ela não fica devendo nada aos amigos que fiz espalhados pelo planeta extremamente qualificados nas stacks utilizadas aqui. Essa garota vai longe ... Vale seguir tudo o que ela indica. E quanto a rocket??? Mandam bem demais ... se tá iniciando , não deixe de guanabarar kkkkkkkkkk pega essa!

[@jessicasoaresdev]

Fê, estou prestes a começar em um cargo de Desenvolvimento Front-End em um projeto na Petrobras e essa aula foi uma interessante descoberta para minhas revisões em React. Parabéns por sua incrível aula e por fortalecer a presença feminina e nos mostrar que também podemos brilhar como desenvolvedoras. 💪🚀

[@fernandorodrigues6967]

excelente conteúdo! trabalho com desenvolvimento web e mobile, mas tenho um bloqueio pessoal com web e assistir suas aulas tem me ajudado bastante a me arriscar um pouco mais nesse mundo! Obrigado e parabéns. Deus te abençoe continuamente.

[@semicolon22]

Que vídeo satisfatório de ver, estou fazendo um curso de React e Next e ver esse vídeo e entender oq está sendo feito é mto legal!

[@iarlensantos3588]

Muito bom! Nunca tinha utilizado um sistema de cachê e parece ser muito uteis para evitar novas requisições, irei aprender e utilizar com mais frequência.

[@kipperdev]

Obrigada Iarlen, fico feliz que gostou!! Simm, vale a pena estudar sobre, o cache ajuda a diminuir o número de requests a nossa API o que consequemente melhora nossa perfomance e reduz custos da API também caso conte por requests

[@GuiiiSantos]

Parabéns Fer , por toda dedicação nos projetos transmitidos, sou inscrito recente e fã, fazendo transição de carreira para área téc, e me motiva muito ver a sua logica de aplicação e didática. Espero me tornar um Dev de qualidade, assim como você ;D

[@luisfcodes]

Obrigado por trazer um projeto como esse Fer, ficou muito bom 😍👏

[@kipperdev]

Que bom que você gostouu, Luis 💜

[@Juli0cesar_140p]

Caraca que coincidência. Acabei de termina a parte 1 e já tem a parte 2, muito bom! 😅

[@kipperdev]

hahaha que bom! Valeu Julio 😊

[@gustavolarsen]

Oi Fernanda, muito bom esses videos resolvendo desafios de testes de entrevistas, gostei bastante. Mas eu fiquei muito curioso com seu padrão de commits, poderia fazer um video falando a respeito? Parabens pelo trabalho!!!

[@radianteytb]

Pesquisa sobre conventional commits

[@kipperdev]

Oii Gustavo, muito obrigado 💜 É isso mesmo que o radiante comentou aqui, conventional commits. É bom padronizar a forma de commits pra facilitar várias coisas depois!

[@adrianoalves9073]

Parabéns pelo projeto, fui desenvolvendo junto com você.

[@robertoesportes3987]

Você parece uma Sênior já. Já se porta como uma.

[@vagner9090]

A melhor que temos atualmente!! haha

[@kipperdev]

hahaha valeu Vagner!

[@BADBOY-zy7bk]

Boa noite fernanda, muito obrigado pelo conteudo! queria comentar com você se é comum no dia a dia do desenvolvedor estilizar igual a você no video, em um componente styled components ter dentro dele elementos comuns html por exemplo, h2, span, div e p. E ai ir selecionando eles como filho la na estilização do componente styled components e ir estilizando as tags html comuns como h2, div e etc... essa é uma boa pratica??

[@jovemprates949]

Show demais. Fico feliz em ver desafios reais assim serem resolvidos. Mas confesso que fico com a sensação de um conhecimento quase inalcancavel para um dia ter condições de preencher vaga com tamanha exigência. Tô no começo da programação. 😓😳

[@kipperdev]

Obrigada!! E não pense assim, esse desafio era super completo mesmo, e a medida que você for estudando e praticando mais, as coisas vão se tornando naturais pra você. Me levaram alguns anos de estudo pra saber o que sei hoje, somados com a experiência de trabalho. Então não desanime, você consegue!

[@felipevieira5233]

​@@kipperdev agora faz um vídeo resolvendo desafio para vaga de Júnior ou estagiário, assim ficaria mais fácil pra quem está começando

[@hitalorodrigues2760]

Estava esperando por essa parte 2 , vlw! 🙃

[@jjmaciel44]

Aproveita e desenvolve o back-end em NodeJs desse sistema, já que o front já está feito. Ia ajudar bastante!

[@FredBCavalheiro]

Excelente conteúdo. Parabéns.

[@kipperdev]

Muito obrigadaa, Fred💜

[@fillipeamg5877]

O styled component como uma grande string única não seria terrível pra debugar?

[@denneraladim6190]

Você prefere criar um componente funcional ou classe ? qual é o melhor para o react js ?

[@brunoosanttana4627]

Olá Feh tudo bem ? adorei seu video, vou tentar fazer sozinho e usar seu video aonde eu tiver dificuldades... uma duvida, eu sou JR e comecei na primera empresa agora, deveria ser capaz de conseguir fazer isso já sozinho ?

[@shablauzin2052]

Seu conteúdo é bom dms

[@kipperdev]

Valeuuu! 😊

[@denneraladim6190]

qual é o melhor css o tailwindcss ou SASS ?

[@silent-root]

onde vc aprendeu tudo isso ? estou pensando em começar na alura ou na rocketseat.

[@juliochan10]

Nao tem um jeito de fazer o contador do carrinho atualizar sem precisar dar reload na pagina??

[@PauloCampos-e2j]

OII FERNANDA... Tecnólogo em REDES DE COMPUTADORES... é uma boa ?

[@pedrogomes7124]

Conteúdo muito bom

[@elieloliveira.dev...]

Muito bons seus vídeos 👏

[@kipperdev]

Obrigada Eliel!! 😊

[@hertz3232]

qual o nome do tema q vc utiliza no vscode?

[@kipperdev]

Oii, eu uso o tema Emerald

[@LucalGamer]

Obrigado pelos vídeos! Fiz o deploy do frontend na vercel mas para isso tive que remover o window como dependência do useEffect. Está dando erro de window not defined. Mas sem ele quando redireciono para outra página por exemplo, aparecem componentes indesejaveis antes de terminar o loading. Pensei que o problema era pq eu não tinha uma página loading mas continuou dando esse problema. Sabe como resolver o erro do window?

[@alexpereira3161]

deixa o link do repo, fica mais fácil pra galera dar uma força.

[@icaroqw9]

qual o teclado?

[@brielsene]

Olá Fernanda, tudo bem?? Acho que agora seria muito legal, se você fizesse, um resolvendo desafio de vaga backend java com spring boot, seria muito bom!

[@kipperdev]

Oii Briel! Simm, já está no meu mapa de conteúdos fazer um vídeo resolvendo desafio de vaga Backend também! 😊

[@PedroHenrique-mu5vb]

Em relação às suas estruturas de páginas, são boas práticas atuais o styled components estar no mesmo arquivo do componente? ( pergunto pois sempre aprendi, estudei e atuei com a forma de pasta contendo dois arquivos, um index.tsx para o componente, e o styles.ts para o styled)

[@kipperdev]

Oii Pedro, quando os componentes criados com Styled são bem pequenos e algo específico para esse componente React e não será utilizado em outro local, é normal deixar dentro do mesmo arquivo, porém, quando são componentes maiores ou que podem ser reutilizados é bom extrair para um arquivo próprio como você comentou! No vídeo acabei não fazendo essas refatorações por conta do tempo, se não fica um video ainda maior hehe 😊

[@renniferteixeira6454]

alguem me ajuda com esse erro query { Product(id: "4eb0a668-53ee-44d5-8f9e-cddaf2f8c7f9") { name name description category price_in_cents } } { "data": { "Product": null } } Agarrei na parte 52 min do video, nao carrega as imagens.

[@renniferteixeira6454]

esta dando erro no ID, que não existe

[@renniferteixeira6454]

faz a pesquisa da seguinte forma query { allProducts { id name description category price_in_cents } } vai aparecer o id de todos os produtos.

[@renniferteixeira6454]

Obrigado eu mesmo. De nada

[@blaublau3538]

Você recomenda ir para Typescript ou react depois de javascript?

[@danielflorencio9661]

React depois TypeScript. Mas no final, não vai fazer muita diferença. Não vai demorar mais de um ou dois meses par tu pegar a base do React. TypeScript, tu pega a base em no máximo duas semanas.

[@danillohss12]

Oii Fer, se possível trás conteúdos de Vue também por favor, é algo que você trabalha/tem conhecimento ?

[@kipperdev]

Oii Danillo, tudo bem? Eu nunca trabalhei com Vue, as bibliotecas de Front que já trabalhei/trabalho são com React Js, Next js e Angular. Por isso ainda não trouxe conteúdo de Vue por aqui :)

[@AlexandreSilva-qw4pd]

Muito bom!!

[@aprezzi]

ja sabemos quem vai ser contratada ....

[@kipperdev]

Eu não estou participando do processo seletivo hahaha só peguei o desafio técnico que era open source para fazer o conteúdo aqui pro canal 😊

[@aprezzi]

@@kipperdev hehe eu sei.. to brincando.... Bom demais teus vídeos...

[@kipperdev]

@@aprezzi ah bom! ahahah valeu Alex 😊

[@kaiquemorais3184]

qual tema tu usa ?

[@kipperdev]

Eu uso o Emerald Dark

[@higor_cos]

Faz para desafio para backend

[@kipperdev]

Boa, valeu pela sugestão Higor! Vou trazer um vídeo resolvendo desafio de backend pro canal :)

[@porfiriodev]

Ae, saiu!

[@keomarenato6845]

Esse Desafio é de junior mesmo ?

[@kipperdev]

Na descrição do desafio não especificava a senioridade da qual se tratava a vaga, mas na minha humilde opnião seria um desafio para Pleno, ou Júnior com alguns anos de experiência (quase Pleno hahah).

[@LucasRS_]

que top

[@kipperdev]

Valeu Lucas!! 😊

[@michaelluciano6945]

Meu Deus !O Front end trabalha melhor o JS em relação o PHP,o back end trabalha equivalente os dois.

[@JulioCesarAlvesMoreira]

essa vaga é pra pleno. Só tem vaga pra pleno no mercado.

[@gambiatec3318]

Second!

[@lcnrodolfo]

first

[@davidlucas4092]

Ótimo vídeo, curti muito acompanhar e fazer funcionar! A maioria das coisas funcionaram pra mim, porém tem um bug que acontece quando a página é atualizada, ou quando o usuário vai pra outra página e volta pra Home, os styled-components param de funcionar para os items, e se caso entrar em um produto ou se fizer alguma atualização em algum componente manualmente ele volta a se comportar normalmente. Alguém sabe ou já viu esse bug ? @kipperdev

[@igorfranklin1926]

Encontrou alguma solução para isso? Estou passando pela mesma coisa, quando a gente utiliza um framework com SSR tipo o nextjs, pelo que entendi o nosso componente já tem que vir pronto do servidor, inclusive o seu css. Infelizmente o styled components tem um runtime ainda no cliente, gerando esse bug aí =/ @kipperdev tem alguma sugestão?

[@art8419]

@@igorfranklin1926 acredito que seja exatamente o que vc falou, eu tive que trocar e passar a utilizar tailwind para esse problema não ocorrer no meu projeto

[@aloissailer]

second