Criando seu próprio app de whiteboard com React (UI do Figma Jam)

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 140

  • @JPedroNogueira
    @JPedroNogueira ปีที่แล้ว +108

    Queremos DEMAIS a continuação! Daria um episódio daora um servidor em Node pra comemorar a regravação da trilha do Ignite!!

    • @dieegosf
      @dieegosf ปีที่แล้ว +37

      Então boooooora! Já vou preparar o próximo episódio :)

    • @samueloliveira4465
      @samueloliveira4465 ปีที่แล้ว +2

      Up

    • @jeffymesquita
      @jeffymesquita ปีที่แล้ว +1

      @@dieegosf go go go go

    • @kelcamargo
      @kelcamargo ปีที่แล้ว +1

      @@dieegosf Já tem a segunda parte?????

    • @alangabriel1671
      @alangabriel1671 11 หลายเดือนก่อน

      @@dieegosf Rapaz, ce nunca volta nos projetos? kkkkk ainda da tempo de postar

  • @renantibia92
    @renantibia92 ปีที่แล้ว +25

    Que projeto diferenciado. Continue porque ficou incrível.

  • @eufeliphequeiroz
    @eufeliphequeiroz ปีที่แล้ว +2

    Bora continuar. User interface 🤩❤️

  • @JotaScript
    @JotaScript ปีที่แล้ว +8

    Já utilizei essa biblioteca uma vez em um projeto de uma empresa q eu trabalhei.
    Estávamos notando que tinha uma perda de performance quando mudava o estado de um nó, pq tinha muitos nós no quadro.
    Então, consegui resolver esse problema utilizando eventos para atualizar os estados dos nós.

    • @SmartMedia101
      @SmartMedia101 ปีที่แล้ว

      Faz um vídeo sobre isso 😂😂😂

    • @tricoto8509
      @tricoto8509 ปีที่แล้ว

      Muito útil meu parceiro, obrigado.

  •  ปีที่แล้ว +10

    Queremos parte 2!!!!!! Ótima aula e projeto incrível

  • @misaellopes01
    @misaellopes01 ปีที่แล้ว +1

    🔥🔥Continuaaaaação, pleaseee!!!

  • @deerp6497
    @deerp6497 ปีที่แล้ว +1

    Continuaçãooo, projeto muito bom para conhecer novas ferramentas...

  • @maydersonmello
    @maydersonmello ปีที่แล้ว +8

    Essa lib facilita muito o processo de aplicações como Figma Jam, implementar isso na mão é bem custoso rsrs.

  • @josecarlosdecamargo651
    @josecarlosdecamargo651 ปีที่แล้ว +1

    Posso dizer que QUEREMOS MUITO a continuação desse projeto!

  • @LeonardoOliveira-ij1cl
    @LeonardoOliveira-ij1cl ปีที่แล้ว +1

    Espereiiii mtooo por esse videoo!!! Borraaaaa

  • @SGG4M3R
    @SGG4M3R ปีที่แล้ว +1

    Continua sim, mano

  • @alaelciolucas6838
    @alaelciolucas6838 ปีที่แล้ว

    Muito bom dá continuidade na aplicação show...

  • @augustowerlang2356
    @augustowerlang2356 ปีที่แล้ว +2

    Muito dahora o projeto, quero continuação sim!

  • @darllinson
    @darllinson ปีที่แล้ว

    Gostei demais Diegão! Dale na continuação desse projeto que a gente vai amar o/

  • @mirtonribeiro2706
    @mirtonribeiro2706 ปีที่แล้ว

    Projeto muito fodaaaa!!!! Já quero a continuação

  • @Shuttzz
    @Shuttzz ปีที่แล้ว +1

    Show de bola continua o projeto sim vale a pena tá muito show continua aí

  • @apenasjoyc
    @apenasjoyc ปีที่แล้ว +1

    Vamos continuar por favor!

  • @maikemanoel597
    @maikemanoel597 ปีที่แล้ว

    Sou iniciante e ainda não entendo muito de React, mas acho muito incrível a forma como o Diegão explica. Com certeza queremos continuação desse projeto

  • @FilipeMoraes87
    @FilipeMoraes87 ปีที่แล้ว

    Muito bom! Seria muito bom ver uma série construindo essa ferramenta.

  • @netopaiva5564
    @netopaiva5564 ปีที่แล้ว +1

    Muito bom, Diego!
    Manda ver na continuação do projeto, vai ser massa?

  • @RLamp
    @RLamp ปีที่แล้ว +2

    Bahhhhh projetasso!!! Taí um desenvolvimento fora da curva, tecno e news bombando. Gostaria que a parte 2 fosse colocar caixas de texto e que estes textos pudessam ser estilozados pelo cliente. tipo letra maior, trocar a fonte e estas firulas...

  • @tainanfidelis
    @tainanfidelis ปีที่แล้ว

    Muito top, estava procurando ha um tempo! 🎉 Continue que é conteúdo gold!

  • @victornascimento7008
    @victornascimento7008 ปีที่แล้ว +1

    Esse projeto ficou massa demais. Queremos parte 2, Diegão.

  • @rmscrisostomo
    @rmscrisostomo ปีที่แล้ว

    Já quero!!! Boa Diego video top d+

  • @paulobarbosa3180
    @paulobarbosa3180 ปีที่แล้ว

    Uau, quanto mais vejo mais me apaixono pelo react. Por favor Diego, faz uma série do figma 🎉🎉

  • @BrocchiRodrigo
    @BrocchiRodrigo ปีที่แล้ว

    Boa dica de projeto, é um bom exemplo de projeto que pode ser integrador e inclusive comercializado pegando exemplos como o MIRO e Whimsical, além do próprio FigmaJam que hoje é integrado ao Figma, porém usado como módulo comercial que pode ser contratado a parte (se não mudaram a forma de contratação dos planos).

  • @yuriassuncao2239
    @yuriassuncao2239 ปีที่แล้ว

    Que projeto dahora. Continua, Diego, por favor!

  • @ninjaayy
    @ninjaayy ปีที่แล้ว

    Diegasso, pode trazer mais, seria uma série incrível!

  • @karismadance2008
    @karismadance2008 ปีที่แล้ว

    Video top demais... Sempre tive a curiosidade de saber como esses flow eram construidos... Espero a continuacao. Top

  • @wanderjunio-xw5ky
    @wanderjunio-xw5ky ปีที่แล้ว

    Cara que incrível, estou começando a estudar React Js, atualmente aprendendo sobre a router-dom, e os olhos chega brilha olhando as inúmeras possibilidades dessa framework. Esses vídeos da Rocketseat me motiva cada dia a buscar mais conhecimento para chegar a esse nível de programação. Vocês são feras!!!

  • @enzorodrigues2942
    @enzorodrigues2942 ปีที่แล้ว

    Projeto bom demais. Queremos a continuação, por favor!

  • @liderhenrique1140
    @liderhenrique1140 ปีที่แล้ว +1

    Nossa que projeto incrivel, muito diferenciado, conteudo bastante inovador, continua o projeto sim

  • @arthurgrigoletto
    @arthurgrigoletto ปีที่แล้ว

    Com certeza queremos continuação! Projeto muito top

  • @GabrielGuímel-f6t
    @GabrielGuímel-f6t ปีที่แล้ว

    Diegão, por favor continua esse projeto!!

  • @luanoliveira804
    @luanoliveira804 ปีที่แล้ว

    CONTINUA VELHO! eu amei
    !!!!

  • @rodrigoserrasqueiro
    @rodrigoserrasqueiro ปีที่แล้ว

    Continua por favor! Se possível mostrando como adicionar nodes dentro de outros nodes, assim como é no typebot. Conteúdo excelente, Diego!

  • @StormGamesX
    @StormGamesX ปีที่แล้ว

    Cara que conteúdo foda, muita entrega pfvr continua a serie

  • @alefo
    @alefo ปีที่แล้ว +1

    pelo amor de DEus, que tenha continuação!! isso é mt irado

  • @eduardogaspari7
    @eduardogaspari7 ปีที่แล้ว +2

    faz a continuação por favor, projeto top de mais

  • @levisantos1821
    @levisantos1821 ปีที่แล้ว

    Continuação da serie! 👍👍👍

  • @Vulkanico
    @Vulkanico ปีที่แล้ว

    O diego ainda pergunta se queremos que continuem o projeto ! Mas e claro que queremos !!

  • @caioteca7461
    @caioteca7461 ปีที่แล้ว

    Manooooooooooo, que aula!!!

  • @alexandrevitorinomartinsde3537
    @alexandrevitorinomartinsde3537 ปีที่แล้ว

    Uma continuação seria mais do que show!

  • @apenasjoyc
    @apenasjoyc ปีที่แล้ว

    Amei muito essa aula! da para criar muita coisa com essas ferramentas!

  • @fellipelorram4341
    @fellipelorram4341 ปีที่แล้ว

    Muito bom! Ansioso pelo resto do projeto.

  • @lucianoviegasvargas8242
    @lucianoviegasvargas8242 ปีที่แล้ว

    Diegão é só falar bora que eu boro!!!!!!!!

  • @Chillazzx
    @Chillazzx ปีที่แล้ว

    Foda demais, irmão!! Continua o projeto, por favor.

  • @EngenhariaReversaCanal
    @EngenhariaReversaCanal ปีที่แล้ว +1

    Continue, por favor.
    É possível usar o React Flow para contruir um white board que armazena código javascript (lógica de programação) e possa ser executado posteriormente?
    Como uma interface de programação, de forma que o usuário possa pegar blocos prontos com pedaços de código, e ir montando a lógica a gosto?
    E se sim, mostrar o output disso em outro bloco, escolhendo, por exemplo, uma planilha Google como fonte de dados (ou quem sabe uma API) e mostrar um gráfico do Apex Charts?
    Mais ou menos como o ObservableHQ, porém como blocos de arrastar e soltar.
    Se tornaria uma aplicação low-code.
    Seria muito legal também a possibilidade de criar blocos com um código específico, ligar os pontos e ver o resultado disso na hora.

    • @danlobo
      @danlobo ปีที่แล้ว

      Dependendo da aplicação e do nível de abstração que pretende disponibilizar, sim, acho possível criar editores, códigos e runtimes com react-flow ou outras bibliotecas que fazem diagramação nesse estilo para criar um ambiente low-code ou no-code.
      Particularmente, acho interessante o estilo da Unreal engine, o editor visual de código tem uma "tipagem" nas conexões: Por padrão, as portas de saída só se conectam as de entrada que sejam do mesmo tipo. As bibliotecas react-diagrams, blackprint e flume seguem esta ideia e têm boa parte disso implementado, os exemplos inclusive lembram muito a interface da UE. Vale a pena olhar os exemplos para se inspirar.

  • @brunoperes7
    @brunoperes7 ปีที่แล้ว

    Diegão sempre se superando com a Criatividade dos Conteúdos, Aula top!

  • @anddersonrds
    @anddersonrds ปีที่แล้ว +2

    Por favor!! Já pode criar uma série de como deixar essa aplicação cada vez mais robusta. Outra coisa interessantes seria listar e dar dicas de boas libs para react com real-time, ui/ux, galeria de imagens e etc. Outra dúvida minha, como adiciona os icons e folders igual ao seu? :)

    • @dieegosf
      @dieegosf ปีที่แล้ว +3

      Só bora Anderson. Os ícones são um pacote chamado Symbols

  • @linderjunior6774
    @linderjunior6774 ปีที่แล้ว

    Continue com o projecto. Ficou incrível

  • @brunomestanza7772
    @brunomestanza7772 ปีที่แล้ว

    Conteúdo insano, ficou incrível, por favor continua

  • @arnobiomata
    @arnobiomata ปีที่แล้ว

    Muito massa! Da pra fazer um app de mapa mental

  • @peter3.024
    @peter3.024 ปีที่แล้ว +1

    Traz mais vídeos sobre esse tema!!!

  • @brenersilva5343
    @brenersilva5343 ปีที่แล้ว

    Incrível!!! Rumo a parte 2!

  • @rafaelpilartes
    @rafaelpilartes ปีที่แล้ว

    Continue porque ficou incrível

  • @thesco5281
    @thesco5281 ปีที่แล้ว +1

    Ficou top mano. A única objeção é só o uso do Tailwind poluidor kkk, mas claro isso vai de cada um rsrsrs.

  • @javan7673
    @javan7673 ปีที่แล้ว

    Continua !!! ficou top demais

  • @FredesDev
    @FredesDev ปีที่แล้ว

    Manda bala na evolução desse projeto Diego! Bem demais 🎉, seria legal ter um arrastar e soltar para adicionar os nodes

  • @MrRayanneGames
    @MrRayanneGames ปีที่แล้ว

    Queremos demais a continuação desse projeto

  • @paulovieira8065
    @paulovieira8065 ปีที่แล้ว

    Muito show!

  • @matheusvictorhenrique
    @matheusvictorhenrique ปีที่แล้ว

    Tem como fazer algo sobre quando um node é selecionado ele poder mudar alguma coisa fora do node, tipo abrir um modal?

  • @arthurfullstackdevelop
    @arthurfullstackdevelop 10 หลายเดือนก่อน

    Continua a aplicação porque ficou muito top.

  • @felipefreire5245
    @felipefreire5245 ปีที่แล้ว +1

    Como que faz para limitar viewport? Se deixar "aberto" ele vai até o infinito, a posição x e y

  • @gabrielmayer5940
    @gabrielmayer5940 ปีที่แล้ว

    parte 2 já!!!!

  • @yurisilva4859
    @yurisilva4859 ปีที่แล้ว

    ficou massa demais!

  • @renatopardini3349
    @renatopardini3349 ปีที่แล้ว

    Top d++ Diegão

  • @wilcoruja
    @wilcoruja ปีที่แล้ว

    Que top, parabéns 👏🏼

  • @ambrosiopedrojr.7311
    @ambrosiopedrojr.7311 ปีที่แล้ว

    Parte 2! Manda aí Diegão.

  • @matheusvictorhenrique
    @matheusvictorhenrique ปีที่แล้ว

    Ótimo conteúdo, poderia continuar a saga mas mostrando sobre o drag and drop?

  • @wsanada
    @wsanada ปีที่แล้ว

    Show! 🤩 Já tem continuação?

  • @RLamp
    @RLamp ปีที่แล้ว

    Já vou me adiantando e pedindo a parte 3 para salvar o desenho para edição posterior... Tipo fazer a versão 1 e salvar, criar melhorias ou mudar a estilização e salvar...

  • @caiorafael7852
    @caiorafael7852 ปีที่แล้ว

    queremos a continuação do projeto!!!!!!!!!!!

  • @vaas2729
    @vaas2729 ปีที่แล้ว

    Quero continuação. como faço para exclui a linha ?

  • @atailooliveira
    @atailooliveira ปีที่แล้ว

    Massa diego. Alguém conhece alguma biblioteca que crie organogramas em react ?

  • @juninfortunato
    @juninfortunato ปีที่แล้ว

    Alguém sabe os tema que o Diegão usa para o vscode tanto para pastas e o próprio tema em si ?

  • @debora468
    @debora468 ปีที่แล้ว

    queria muito aprender com nextjs + react flow, tem muita diferença?

  • @LoveMusic1212-e1w
    @LoveMusic1212-e1w ปีที่แล้ว +1

    queroo continuacaooooo !!1`

  • @victorguilherme3892
    @victorguilherme3892 ปีที่แล้ว

    aeeeee, mito demais

  • @guilhermeh.v.santos7424
    @guilhermeh.v.santos7424 ปีที่แล้ว

    Quero parte 2!!!!

  • @alexandrevitorinomartinsde3537
    @alexandrevitorinomartinsde3537 ปีที่แล้ว

    Que ideia top

  • @denislevy176
    @denislevy176 ปีที่แล้ว

    Muito tooooppp!!

  • @josmarjunior7164
    @josmarjunior7164 ปีที่แล้ว

    Quando será lançada a data do evento RSXP? Gostaria de saber para poder já comprar a passagem com antecedência

    • @dieegosf
      @dieegosf ปีที่แล้ว

      Ainda deve demorar mais umas semanas pra lançarmos a data oficial!

  • @EdySereia
    @EdySereia 5 หลายเดือนก่อน

    Muito Bom

  • @Alan4F50
    @Alan4F50 ปีที่แล้ว

    Conteúdo TOP!!!!!

  • @narcoticosroleplay3082
    @narcoticosroleplay3082 ปีที่แล้ว +1

    Alguém sabe o nome desse tema do vscode?

  • @Matheus_1582
    @Matheus_1582 ปีที่แล้ว

    Diego você conhece o Framework QWIK

  • @kmartins540
    @kmartins540 ปีที่แล้ว

    Continuação por favor 🙏🏽

  • @rafael37663
    @rafael37663 ปีที่แล้ว

    daria para colocar botoes dentro dos edges ??

    • @dieegosf
      @dieegosf ปีที่แล้ว

      Sim, é um componente como qualquer outro, a diferença é que estamos usando SVG ali

  • @samueloliveira4465
    @samueloliveira4465 ปีที่แล้ว

    Eu não te julgo, curto demais o tailwind, e conheci através de você Diego.

  • @PedroHenrique-pc6ow
    @PedroHenrique-pc6ow ปีที่แล้ว

    Alguém poderia me informar, por gentileza, se o Diego usa algum tipo de extensão para completar os comandos no terminal? Se sim, qual seria? 😁

    • @toskito123
      @toskito123 ปีที่แล้ว

      Sim, chama-se fig, eu uso ele, mas acho que é só pra MAC

    • @PedroHenrique-pc6ow
      @PedroHenrique-pc6ow ปีที่แล้ว

      @@toskito123 Beleza, Igor, brigadão mesmo!

  • @victorcarvalho2702
    @victorcarvalho2702 ปีที่แล้ว +1

    Qual tema do vscode e do icons que ele usa?

    • @dieegosf
      @dieegosf ปีที่แล้ว

      Tema do VSCode: Rosé Pine
      Tema dos ícones: Symbols

  • @Lucaslima-gs2po
    @Lucaslima-gs2po 6 หลายเดือนก่อน

    continuaaaaaa

  • @davirezende2973
    @davirezende2973 ปีที่แล้ว

    Parte 2 por favorrrrrrr

  • @henriquehanthequeste
    @henriquehanthequeste ปีที่แล้ว

    Alguém sabe que tema é esse que ele está utilizando?

  • @saulotarsobc
    @saulotarsobc หลายเดือนก่อน

    Top d+

  • @edu_amr
    @edu_amr ปีที่แล้ว

    Fala sobre supabase ou pocketbase pliss

  • @viniciusrosa3114
    @viniciusrosa3114 ปีที่แล้ว +1

    qual o tema do vs code e dos ícones dele?

  • @EduardoSilva-lf2ho
    @EduardoSilva-lf2ho ปีที่แล้ว

    🤩

  • @kelcamargo
    @kelcamargo ปีที่แล้ว

    TOPZERAAAAAAAAAAAA