Тёмный

Resolvendo DESAFIO de VAGA FRONTEND com React, Next JS, Typescript e GraphQL - parte 1 

Fernanda Kipper | Dev
Подписаться 100 тыс.
Просмотров 212 тыс.
50% 1

Nesse vídeo vamos resolver um desafio técnico de uma vaga de desenvolvedor Frontend. O desafio consistia em reproduzir uma interface de um E-Commerce, os pré requisitos incluiam o uso do framework Next JS (nextjs.org/) para a construção da aplicação e da biblioteca Styled-Components (styled-components.com/), a qual aproveitamos as features de CSS in JS para componentizar e modularizar nossa aplicação. Além disso, precisamos realizar a integração com a API GraphQL para listagem e filtragem dos produtos, e utilizar recursos como useState e Context API para controle dos estados da aplicação.
👉 Curso para aprender React JS e Next JS!
www.rocketseat.com.br/ignite?...
CUPOM: KIPPERDEV@IGNITE
👉 Curso para Iniciantes na Programação
www.rocketseat.com.br/explore...
CUPOM: KIPPERDEV@EXPLORER
🔗 Link da solução no GitHub
github.com/Fernanda-Kipper/ch...
🔗 Link do desafio
github.com/Rocketseat/fronten...
👉Me siga no instagram!
/ kipper.dev
🌎 Comunidade do Discord
/ discord
-- Timestamps --
00:00:00 Intro
00:01:00 Explicando o desafio
00:05:27 Configuração inicial
00:10:55 Construção dos componentes
00:51:00 Criação do contexto de filtros
01:16:00 Consumindo API GraphQL
01:29:20 Listagem de produtos
01:46:38 Filtragem de produtos

Наука

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 451   
@kipperdev
@kipperdev Год назад
🚨🚨🚨 ATENÇÃO: Caso você esteja enfrentando algum erro ao criar o hook do LocalStorage, realizei uma tratativa para esse erro, a solução já está no Repositório do GitHub, o link está na descrição mas vou deixar aqui também! 😊 github.com/Fernanda-Kipper/challenge-frontend
@MEUNOMEJOHNNY
@MEUNOMEJOHNNY 9 месяцев назад
não consegui resolver o problema do hook sou leigo e não entendo o que caralhos está rolando o código está exatamente igual mas o erro persiste me ajuda fe - error src\app\hooks\useLocalStorage.tsx (5:50) @ localStorage - error ReferenceError: localStorage is not defined
@kipperdev
@kipperdev 9 месяцев назад
@@MEUNOMEJOHNNY oii Johnny, você fez essa correção quebrou comentei? No GitHub já está atualizado certinho com o que precisava corrigir, caso ja tenha corrigido e ainda esteja com erro, me manda um DM!
@MEUNOMEJOHNNY
@MEUNOMEJOHNNY 9 месяцев назад
@@kipperdev CONSEGUI! copiei e colei o código e ajeitei o diretorio do import la e deu bom (até agr). vou seguir aqui, valeu fe MAIOR da bolha dev esqueça tudo
@kipperdev
@kipperdev 9 месяцев назад
@@MEUNOMEJOHNNY boaaa, que bom que deu certo!! Hahaahah valeu Johnny 💜
@rafaelcalixta7887
@rafaelcalixta7887 8 месяцев назад
bom, troquei o código e no termina aparece esse "ReferenceError: window is not defined", é normal? obs: tá funcionando
@manodeyvin
@manodeyvin Год назад
Brabíssima, tem o selo `mano deyvin` de qualidade ✅
@gilsonfaturizzi1633
@gilsonfaturizzi1633 Год назад
Não vai fazer vídeo dela também né 😂😂😂
@erivelton1500
@erivelton1500 Год назад
@@gilsonfaturizzi1633 Se não me engano ele já fez 😂😂
@user-qh3fm3pb7o
@user-qh3fm3pb7o Год назад
Mano ela e vc são zika . Te leso é. Top demais
@kipperdev
@kipperdev Год назад
Ahahaha aí simm! 👊🏻
@gaucho804
@gaucho804 Год назад
Tem olheira é true
@pedro-639
@pedro-639 Год назад
Vim pelo mano deyvin Fernanda, parabéns pelo conteúdo RAIZ !!! Tmj 👏
@kipperdev
@kipperdev Год назад
Obrigadaa Pelicioni!! Tmjjj 👊
@AlexSoaresGtr
@AlexSoaresGtr Год назад
Mano deyvin é brabo
@l3vi557
@l3vi557 Год назад
Tambem
@douglasegutierry4540
@douglasegutierry4540 Год назад
Eu tb
@gabriel500.
@gabriel500. Год назад
Eu tbm kkkk
@andersonchaves1213
@andersonchaves1213 Месяц назад
Meu Deus... estou começando na area de TI, e vendo voce digitando as linhas de codigos, vejo que nao sei praticamente nda ainda... top demais aprendendo muito...
@leonardocarvalho8762
@leonardocarvalho8762 8 месяцев назад
O que essa mina manja de programação não é mole. Qualquer empresa BR que tu entrar e mandar um dev senior gravar um video igual, não sai 5% dela ... Top de +
@Eduardo-kq3vc
@Eduardo-kq3vc Год назад
Da série, vídeos que agregam! Parabéns pelo conteúdo 🤩
@lipope
@lipope Год назад
que qualidade INCRÍVEL de vídeo... por favor, continue!
@opaulomatias
@opaulomatias 10 месяцев назад
eu admiro demais seu esforço pra sempre trazer o melhor, top demais fernanda
@GlauciaLemos
@GlauciaLemos 11 месяцев назад
Parabéns, Fernanda! Que conteúdo! Continue postando cada vez mais!
@jeffersonalvesdev
@jeffersonalvesdev Год назад
Assistindo ainda, o vídeo está muito bom!
@jair-araujo
@jair-araujo Год назад
Excelente conteúdo Fernanda, obrigado por compartilhar. Com certeza ansioso pela parte 2 😁👏
@niagalves
@niagalves Год назад
Gosto demais de conteúdo assim, ganhou mais um inscrito. Sucesso! 🚀
@mrhugohenrique
@mrhugohenrique Год назад
Parabéns Fernanda, ótima explicação! Vídeo extremamente envolvente. Estou ansioso pela parte 2!
@iarlensantos3588
@iarlensantos3588 Год назад
Excelente aula, aguardando ansioso pela part 2!
@canecaspersonalizadascriae211
@canecaspersonalizadascriae211 10 месяцев назад
Aula muito top! Obrigado por disponibilizar esse conteúdo, deu para aprender bastante coisa nova!
@user-ik6no6yd3d
@user-ik6no6yd3d 11 месяцев назад
Parabéns Fernando, fiquei muito impressionado com a sua experiência e qualidade da solução do desafio.
@ricardogabrieldeabreukozie1368
Parabéns pelo conteúdo, Fê!!!! Sua didática e dicção é impecável. Uma verdadeira inspiração! Vi que já postou um projeto em java, mas caso caiba e faça sentido para vc, poderia resolver um desafio técnico em java? Mt obg e sucesso
@enryunto8087
@enryunto8087 Год назад
Máximo respeito, só por estar postando video utilizando next 13+ ja virei fã Ja vi vários de gringos mas faltava um projeto completo como o seu !
@kipperdev
@kipperdev Год назад
Valeuuu Enryu! 💜
@felipeportela6858
@felipeportela6858 10 месяцев назад
Você é muito fera !!! Parabénss !!! surreal ...
@rinojunior5238
@rinojunior5238 Год назад
Muito foda, parabés pelo excelente conteúdo. Muito massa ver o processo de desenvolvimento, o pensamento/lógica por trás do desenvolvimento, e cara que didática impressionante, não conehcia o canal, e em 15 minutos de vídeo já vi que vou maratonar uns vídeos hehe.
@JoaoVitor-fy4jq
@JoaoVitor-fy4jq Год назад
Ganhou mais um inscrito, você tem uma didática tão boa que nem parece que o vídeo tem duas horas. Sério mesmo você é incrível, é bem raro conteúdo desse nível em canais pt-br. Só fiquei com uma dúvida: se a gente usar um contexto ou qualquer outro provider global tipo o react-query, a gente perde o SSR por completo no next? Ficaria muito agradecido se você pudesse responder, valeu muito sucesso aí Fernanda.
@mmazeto
@mmazeto Год назад
Parabéns pelo conteúdo, você explica as coisas em detalhes, tenho certeza que irá ajudar muias pessoas.
@rntsza
@rntsza Год назад
Conheci seu canal pelo mano deyvin e confesso que é um achado, meus parabéns pelo trabalho sério e competência.
@Leanst.
@Leanst. 9 месяцев назад
Vídeo TOP, parabéns Fernanda!
@user-go9lv2os6v
@user-go9lv2os6v 9 месяцев назад
conteudo muito bom e muito bem explicado, gostei da didática. tu fala com firmeza e nao se enrola muito. nota 10 !!
@AnaClaudiaSSilva
@AnaClaudiaSSilva Год назад
Que didática maravilhosa! Parabéns ganhou mais uma seguidora, a hora passa q nem se percebe, e dá vontade de assistir tudo novamente!! Poderia disponibilizar curso
@diieggo69
@diieggo69 11 месяцев назад
Conteúdo muito bom! Obrigado demais por compartilhar
@franciscocito
@franciscocito Год назад
Muito legal, produziu bastante mesmo em pouco tempo. Além da interface ter ficado bem legal ao protótipo.
@jeandelavega1369
@jeandelavega1369 11 месяцев назад
Excelente, tem gente com talento para ensinar, meu deu parabéns, muito bom seus vídeos.
@datatecnicasolutions
@datatecnicasolutions Год назад
Os conceitos abordados para a execução do desafio foram aplicados por você de forma clara, objetiva e profissional. Parabéns Fernanda!💼
@davifirmino8290
@davifirmino8290 Год назад
Muito legal!!! Parabéns 👏👏👏
@ChandlerBing11
@ChandlerBing11 Год назад
Oxi, manda essa parte 2 com ctz, guria!!! Sensacional 👏👏👏👏👏
@romimaximus
@romimaximus Год назад
Wow muito massa o projeto..!!! muiiitttoooo obrigado por compartilhar seus conhecimentos !!! 😎👍
@eduardocardoso1149
@eduardocardoso1149 Год назад
explicação IMPECÁVEL, parabéns.
@adrianmouzinho9615
@adrianmouzinho9615 Год назад
Consegui assistir o vídeo todo direto de tão bom q foi 🤌
@abnerelias4942
@abnerelias4942 Год назад
Tô no primeiro semestre da faculdade, não entendi muita coisa, mas vi o vídeo até o fim, muito bom!
@luizinhopontes
@luizinhopontes 11 месяцев назад
Voce merece muito Fernanda. Mega aula, pra quem está começando a se aventurar em programação (Meu caso). Continue a motivar milhares de pessoas, voce está fazendo a diferença na vida de muitos. Parabens, excelente conteudo.
@daniellimae
@daniellimae Год назад
Show 🎉 mt bom vídeo, interessante ver outras formas de arquiteturas
@zoltancaputo9562
@zoltancaputo9562 11 месяцев назад
Thanks for sharing... Looking forward to making the second part!"
@kaka17338
@kaka17338 11 месяцев назад
Parabéns nunca tinha visto um conteudo como esse
@jarbassilva9866
@jarbassilva9866 10 месяцев назад
Esse canal é muito bom. Fernanda vc é braba ! Vc é " OTO PATAMAR" ! Parabéns !
@TxhanxaGame
@TxhanxaGame Год назад
Cliquei no vídeo por clicar, acabei assistindo tudo! Você fala muito bem, parabéns
@PoliciaFederall
@PoliciaFederall 10 месяцев назад
Moça esse video é maravilhoso, tenho tdah e consegui prender minha atençao de uma forma que ate eu estou surpreso e ainda desperto minha vontade de aprender typescript. MUITO OBG
@ManoelMatias112358
@ManoelMatias112358 Год назад
Mulher tu é foda, parabéns!
@inaldoanjosjr
@inaldoanjosjr Год назад
Rapaz, eu tinha visto um outro vídeo teu, sobre rotina ou algo do tipo. E agora o youtube me sugere esse vídeo. Top demais. Parabéns pela didática e conhecimento.
@manodeyvin
@manodeyvin Год назад
de nada! ela é deva de verdade, pode assistir ☑
@eliasjunior7430
@eliasjunior7430 Год назад
Simplesmente incrível!
@samucatnb12
@samucatnb12 4 месяца назад
Bom dia, Fernanda parabéns ótimo vídeo, sua didática é top, você simplesmente abriu abriu o baú para nós que estamos iniciando ❤
@paulohenriquefigueiredo8009
Ótimo vídeo, fer! você poderia fazer um vídeo ou reels sobre a config do mac para seu ambiente dev e/ou extensões do VScode ?
@lucasnapomucena8457
@lucasnapomucena8457 7 месяцев назад
Muito bom, manja demais!
@natanaelc7
@natanaelc7 4 месяца назад
Já me inscrevi mais aulas assim 👏👏👏
@BrunoDarioBerliFeliciani
@BrunoDarioBerliFeliciani 9 месяцев назад
Cada dia mais viciado neste canal. Sou da "velha guarda" do frontend e é preciso renovar sempre! Esses vídeos são o complemento ideal para quem está dando uma reciclada e aprendendo Next. Muito obrigado Fernanda e continue com esse trabalho incrível! Fiquei curioso de saber qual é sua formação acadêmica (ou se vc é autodidata)?
@rafafsantos86
@rafafsantos86 10 месяцев назад
Conteúdo muito top.... show... obrigado.
@marcellobittencourt1836
@marcellobittencourt1836 8 месяцев назад
Que isso, mulher! Quando eu crescer, quero ser metade do que vc foi nesse vídeo. Sensacional!
@FranciscoEduardo
@FranciscoEduardo 11 месяцев назад
Vou tentar fazer esse desafio uma hora,. Conteúdo muito bom, mesmo não sabendo muito sobre nextjs e react, aprendi bastante. Sobre a função mountQuery, recomendaria usar um array para os parâmetros, depois montaria com um join, evitando a duplicação código.
@ChippWK
@ChippWK Год назад
Muito conhecimento e aprendizado.
@igribeiro_
@igribeiro_ Год назад
Ficou bem top o video, curti muito!!!
@matheusgarcia8344
@matheusgarcia8344 11 месяцев назад
excelente conteudo, repliquei aqui, um ponto que não consegui desenvolver foi usar as variavei do arquivo .env, mas exportei um modulo no next config e rolou tranquilo
@gustavoviniciusdantasribei4953
Seus videos são muito bons... desde do primeiro sobre testes até esse só elevando o nível
@kipperdev
@kipperdev 10 месяцев назад
Muuuito obrigada, Gustavo! Esse tipo de comentário me motiva muito a continua me esforçando pra entregar vídeos de qualidade pra vocês. Muito obrigado pela confiança 💜
@carloseduardodossantos4857
@carloseduardodossantos4857 10 месяцев назад
quando eu crescer no front end quero ser igual a vc !!!! dahora
@Gerson.machado
@Gerson.machado Год назад
Trabalho incrível!
@fredfonseca1474
@fredfonseca1474 9 месяцев назад
Entregou tudo com esse app 😮
@gsnzinoficial
@gsnzinoficial Год назад
Ótima explicação e o vídeo não é nada cansativo de assistir! Parabéns e obrigado pelos conteúdos.
@kipperdev
@kipperdev Год назад
Obrigada Gsnzin!! 😊
@OSeuGall
@OSeuGall Год назад
daqui um ano quero ter essa noção!
@user-ce8mc1kg8v
@user-ce8mc1kg8v 11 месяцев назад
Nossa, sou iniciante e achei isso vídeo ótimo!!!! Me mostrou melhor como funciona estar trabalhando com programacao, o raciocinio por trás de tudo e como as coisas fluem!!! Muito top mesmo! Se possível vc poderia fazer um vídeo bem detalhado pra noobs que nem eu, como contando detalhadamente os primeiros passos antes do codigo e onde typescript, api etc interferem e o uso disso tudo? muito obg e sucesso!! :)
@FredBCavalheiro
@FredBCavalheiro Год назад
Ansioso pela parte 2.
@lucasdias1348
@lucasdias1348 Год назад
Atualmente tô desenvolvendo um Ecommerce junto com um amigo que é Backend, esse vídeo veio no momento certo ❤
@kipperdev
@kipperdev Год назад
💜
@henriquecosta200
@henriquecosta200 Год назад
estao fazendo com quais tecnologias?
@lucasdias1348
@lucasdias1348 Год назад
@@henriquecosta200 estou usando NextJS c/ typescript e sass para o frontend. A ideia do vídeo dela é top, como já estou um pouco avançado nas páginas, peguei algumas funcionalidades. O negócio é aprender e não copiar.
@MaybeAres
@MaybeAres Год назад
Gostei muito do seu conteudo, teria como fazer um vídeo falando de como estaria o mercado hoje em sua visão... se pra quem ta começando esta acessivel, ou apenas pro futuro? se ainda vale a pena no caso começar, fazer cursos etcs... ???
@eduardoaraujo9988
@eduardoaraujo9988 Год назад
Conteúdo sensacional, e didática excelente, estou no aguardo da parte 2.
@kipperdev
@kipperdev Год назад
Obrigada Edu! Logo logo sai a parte 2 💜
@OFreddyJrs
@OFreddyJrs 11 месяцев назад
Braba demais 🔥🔥
@canecaspersonalizadascriae211
@canecaspersonalizadascriae211 10 месяцев назад
01:08:30 lembrei dessa propriedade css, white-space: nowrap; se colocar ela na li o texto é exibido em uma única linha, ai não precisa definir a largura na ul, talvez ficasse melhor nessa parte do codigo!
@guilhermecosta6731
@guilhermecosta6731 Год назад
Muito bom o video, eu só faria a coisa do filtro server side ao invés de client side, ou seja, colocaria o estado dos filtros ali nos query params, assim reduziria a quantidade de codigo e chegaria a praticamente o mesmo resultado.
@jacksonlucas
@jacksonlucas Год назад
Massa trás mais sobre next js e graphql
@adiexx7360
@adiexx7360 Год назад
Que vídeo bom, eu como um Dev amador sem experiência nenhuma me amarro demais
@costaelson1982
@costaelson1982 Год назад
Com certeza quero parte 2. Conteudo top !!!
@kipperdev
@kipperdev Год назад
Obrigada Elson!! Pode deixar 😊
@dev.webmobile
@dev.webmobile 6 месяцев назад
Sensacional sua didática
@kipperdev
@kipperdev 6 месяцев назад
Muito obrigadaa, @gustavosouza1089 💜
@mello6318
@mello6318 Год назад
salvado pra ver depois, por favor continua trazendo esse tipo de conteudo, é o que eu mais preciso no momento onde estou buscando a primeira vaga
@kipperdev
@kipperdev Год назад
Pode deixar! 💜
@mello6318
@mello6318 Год назад
@@kipperdev poderia fazer algum projeto com docker também, é muito interessante :)
@Andrefischborn
@Andrefischborn 9 месяцев назад
Que issoooo, manja muito
@jonathancdev
@jonathancdev Год назад
boaa, ficou showw o vídeo parabéns 👏
@LucasFerreira-et7su
@LucasFerreira-et7su Год назад
Que conteúdo sensacional!!! Parabéns Fernanda
@kipperdev
@kipperdev Год назад
Valeuu Lucas! Fico feliz que gostou 💜
@athos4881
@athos4881 Год назад
obg por esse video nanda
@H3KMAH
@H3KMAH 10 месяцев назад
Ela fala e faz sinal de libras ao mesmo tempo. Top na versatilidade ❤
@icaro-caetano
@icaro-caetano 8 месяцев назад
Maaaanda bem demais! Caraacaaas!
@rosarvitor
@rosarvitor 8 месяцев назад
Teu canal é incrível!
@kipperdev
@kipperdev 7 месяцев назад
Muito obrigadaa, @rosarvitor Fico muito feliz com esse apoio de vocês, de verdade 💜
@FelipeSantos-zi7lc
@FelipeSantos-zi7lc 11 месяцев назад
Incrível!
@shiratorr
@shiratorr Год назад
Muito bom, vc poderia fazer um video curto ou um short sobre snippets?
@VitorPaiola
@VitorPaiola 9 месяцев назад
parabéns moça
@eskstyle
@eskstyle 11 месяцев назад
Muito bom o seu conteúdo Fernanda, aprendi várias coisas. Revendo o código, eu fico muito perdido em quando você usa arquivos .ts ou .tsx e também quando devo usar interface... Também acho que ficaria melhor se sua câmera talvez estivesse um pouco menor e do lado superior direito, pois várias vezes acabou ficando em cima dos códigos. Muito obrigado pelo conteúdo!! 🥰
@laracapila
@laracapila Год назад
Oiii, muito bom o vídeo e suas explicações! Existe algum motivo pra você utilizar com function ao invés de arrow function?
@viniciusprudencio3577
@viniciusprudencio3577 Год назад
Cheguei no canal agora por meio dessa aula top!! Parabéns pelo excelente conteúdo!!
@kipperdev
@kipperdev 11 месяцев назад
Obrigada Vini!! 😊
@stefanpicciani1551
@stefanpicciani1551 Год назад
Caraaaa, top demais , parabéns 👏🏻👏🏻👏🏻❤
@kipperdev
@kipperdev Год назад
Valeuu Stefan! 💜
@guischamber
@guischamber 11 месяцев назад
que aula! massa dmsss
@devjosejunior
@devjosejunior Год назад
@Fernanda Kipper, se vc voltasse no tempo para começar sua carreira, você começaria pelo front-end ou pelo Java/Spring?? e por quê?? Grato. Estou nessa maior dúvida. heheh
@viniciusvirginio8462
@viniciusvirginio8462 Год назад
Que vídeo massa Fernanda
@douglasmiguel7149
@douglasmiguel7149 11 месяцев назад
obg, consegui a vaga na rocket seat com seu codigo
@igorzet1
@igorzet1 Год назад
Fernanda, porque você opitou pelo uso do axios ao invés do novo fetch do next? que já tem um cache nativo
@hemersonfarias9206
@hemersonfarias9206 Год назад
Coda demais! Parabéns!
@zero_zion
@zero_zion Год назад
Valeu, minha querida.
@viperluan
@viperluan Год назад
Parabéns! Trabalho com desenvolvimento à dois anos e só conheci seu canal hoje! Que didática e presença, gostei muito!
@kipperdev
@kipperdev 11 месяцев назад
Muito obrigada Luan!! Que bom que gostou 💜
@626teteu
@626teteu Год назад
Cara seu conteúdo e mt top!!!! Deva raizzzzz
@kipperdev
@kipperdev Год назад
Valeuuuu! 💜
@MaykBrito
@MaykBrito Год назад
Brabaaaaaaa DEMAIS!!
@kipperdev
@kipperdev Год назад
🔥❤️
@reinamatrix
@reinamatrix Год назад
Tá doido, @MaykBrito é um puta rato que admiro e a @kipperdev sem comentários, imagina esses dois num colab.
@kipperdev
@kipperdev Год назад
@cleutoon simm! Posso separar, até deixei como desafio na parte 2 do vídeo realizar essa refatoração e extrair os componentes. Muita coisa acabo não abordando no vídeo por conta do tempo para explicar, se não as duas horas se transformam em 4 ahahah Mas falei ao final do vídeo da parte 2 que seria melhor fazer isso mesmo 😊
@kipperdev
@kipperdev Год назад
@cleutoon simm, é uma ótima sugestão! Obrigada Kleuton 🥰
@datatecnicasolutions
@datatecnicasolutions Год назад
Mayk Brito na área...📢
Далее
ARQUITETURA BACKEND DO FACEBOOK | System Design
27:12
мое новое шоу «блеф»
00:40
Просмотров 42 тыс.
САМЫЕ ТУПЫЕ МАЖОРЫ С ПАТРИКОВ
33:19
APRENDA DOCKER DO ZERO | TUTORIAL COMPLETO COM DEPLOY
44:15
Beginner React Project - Learn React in 35 Minutes
33:29
Любой звонок в AirPods
0:30
Просмотров 327 тыс.