{"id":2322,"date":"2026-08-15T22:44:15","date_gmt":"2026-08-16T01:44:15","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2322"},"modified":"2026-08-15T22:45:58","modified_gmt":"2026-08-16T01:45:58","slug":"projeto-react-na-pratica-evoluindo-um-catalogo-de-produtos","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2322","title":{"rendered":"Projeto React na Pr\u00e1tica: Evoluindo um Cat\u00e1logo de Produtos"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Neste artigo vamos continuar a evolu\u00e7\u00e3o do nosso <strong>Projeto Integrador \u2014 Cat\u00e1logo de Produtos<\/strong>, desenvolvido com <strong>React no Front-end<\/strong> e <strong>Node.js + Express no Back-end<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na primeira etapa constru\u00edmos a estrutura do projeto e realizamos a integra\u00e7\u00e3o entre Front-end e Back-end atrav\u00e9s de uma API REST.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agora vamos evoluir a aplica\u00e7\u00e3o adicionando <strong>novas funcionalidades ao Front-end com React<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta etapa implementamos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>valida\u00e7\u00e3o do formul\u00e1rio;<\/li>\n\n\n\n<li>contador autom\u00e1tico de produtos;<\/li>\n\n\n\n<li>busca de produtos;<\/li>\n\n\n\n<li>filtro utilizando <code>filter()<\/code>;<\/li>\n\n\n\n<li>melhorias nos cards;<\/li>\n\n\n\n<li>componente Footer;<\/li>\n\n\n\n<li>melhorias no CSS e na organiza\u00e7\u00e3o da interface.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A proposta \u00e9 simples: em vez de come\u00e7ar outro projeto do zero, vamos aprender a <strong>evoluir uma aplica\u00e7\u00e3o que j\u00e1 funciona<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Evoluindo o Front-end com React<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Uma das partes importantes do desenvolvimento de sistemas \u00e9 perceber que um projeto n\u00e3o termina quando a primeira vers\u00e3o funciona.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois da estrutura inicial, come\u00e7am a surgir novas necessidades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No nosso Cat\u00e1logo de Produtos, por exemplo, o usu\u00e1rio j\u00e1 conseguia cadastrar e visualizar produtos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas ainda poder\u00edamos melhorar bastante a aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma das primeiras mudan\u00e7as foi a <strong>valida\u00e7\u00e3o do formul\u00e1rio<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agora n\u00e3o permitimos o cadastro de produtos sem nome ou com pre\u00e7o igual ou menor que zero.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m de evitar dados incorretos, a aplica\u00e7\u00e3o tamb\u00e9m apresenta uma mensagem para orientar o usu\u00e1rio.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Contador autom\u00e1tico de produtos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Outra funcionalidade adicionada foi um contador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Como os produtos j\u00e1 est\u00e3o armazenados em um array, podemos utilizar a propriedade <code>length<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">produtos.length<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Assim conseguimos mostrar automaticamente a quantidade de produtos cadastrados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;Total de produtos: {produtos.length}&lt;\/p&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Quando a lista muda, o React atualiza a interface e o contador acompanha essa altera\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 uma implementa\u00e7\u00e3o simples, mas demonstra muito bem como podemos utilizar os pr\u00f3prios dados da aplica\u00e7\u00e3o para atualizar a interface.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Busca de produtos com filter()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Uma das principais evolu\u00e7\u00f5es desta vers\u00e3o foi a cria\u00e7\u00e3o de uma <strong>busca de produtos pelo nome<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para isso utilizamos o m\u00e9todo <code>filter()<\/code> do JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A ideia principal \u00e9 filtrar o array original e gerar uma lista contendo somente os produtos correspondentes ao texto pesquisado.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">constprodutosFiltrados=produtos.filter((produto) =&gt;produto.nome.toLowerCase().includes(busca.toLowerCase()));<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse pequeno trecho estamos utilizando tr\u00eas conceitos importantes:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><code>filter()<\/code><\/strong> percorre o array e seleciona os elementos que atendem \u00e0 condi\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><code>includes()<\/code><\/strong> verifica se determinado texto est\u00e1 presente no nome do produto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><code>toLowerCase()<\/code><\/strong> transforma os textos em letras min\u00fasculas, evitando problemas na busca por causa de letras mai\u00fasculas ou min\u00fasculas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, se tivermos:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Mouse GamerTeclado Mec\u00e2nicoMonitor<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">e pesquisarmos:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">mouse<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">a aplica\u00e7\u00e3o poder\u00e1 exibir somente o produto correspondente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse \u00e9 um \u00f3timo exemplo de como conceitos simples de JavaScript podem ser utilizados para criar uma funcionalidade real dentro de um projeto React.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Melhorando a interface do projeto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m aproveitamos esta evolu\u00e7\u00e3o para melhorar bastante o visual da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Organizamos melhor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>formul\u00e1rio;<\/li>\n\n\n\n<li>campo de busca;<\/li>\n\n\n\n<li>contador;<\/li>\n\n\n\n<li>cards dos produtos;<\/li>\n\n\n\n<li>mensagens;<\/li>\n\n\n\n<li>Footer;<\/li>\n\n\n\n<li>responsividade.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m de funcionar corretamente, uma aplica\u00e7\u00e3o tamb\u00e9m precisa apresentar as informa\u00e7\u00f5es de forma clara para o usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso, <strong>CSS e organiza\u00e7\u00e3o da interface tamb\u00e9m fazem parte da evolu\u00e7\u00e3o de um projeto Front-end<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Programa\u00e7\u00e3o \u00e9 evolu\u00e7\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Um ponto importante desta aula \u00e9 entender que aprender programa\u00e7\u00e3o n\u00e3o significa apenas conhecer comandos isoladamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode conhecer:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ifarraysobjetosfun\u00e7\u00f5esmap()filter()<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">mas o aprendizado come\u00e7a a ganhar outra dimens\u00e3o quando precisamos juntar esses conceitos para resolver um problema.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No nosso projeto, por exemplo, utilizamos estado, eventos, arrays, fun\u00e7\u00f5es e <code>filter()<\/code> para criar uma busca de produtos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 por isso que desenvolver projetos \u00e9 t\u00e3o importante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Primeiro fazemos funcionar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois testamos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Corrigimos problemas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adicionamos funcionalidades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Melhoramos a interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E continuamos evoluindo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Assista \u00e0 aula completa<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Toda a evolu\u00e7\u00e3o do Front-end foi desenvolvida passo a passo durante uma live no canal <strong>Desvendando o C\u00f3digo<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na aula voc\u00ea poder\u00e1 acompanhar a implementa\u00e7\u00e3o, os testes e o processo de evolu\u00e7\u00e3o do projeto.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"React na Pr\u00e1tica: Evoluindo um Cat\u00e1logo de Produtos com Novas Funcionalidades\" width=\"960\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/NuuHS1g4sWs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3digo atualizado no GitHub<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O projeto completo e atualizado est\u00e1 dispon\u00edvel no GitHub.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No reposit\u00f3rio voc\u00ea encontrar\u00e1 o <strong>Front-end desenvolvido com React<\/strong> e o <strong>Back-end com Node.js e Express<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/marcoscaldas\/Projeto_Catalogo_Produtos_PW2_DSI.git\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/marcoscaldas\/Projeto_Catalogo_Produtos_PW2_DSI.git<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode utilizar o c\u00f3digo para acompanhar a aula, estudar a estrutura do projeto e desenvolver suas pr\u00f3prias melhorias.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Front-end e Back-end trabalhando juntos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar de nesta etapa nosso foco estar no React, o Cat\u00e1logo de Produtos continua sendo um projeto integrado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A estrutura permanece:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ReactFront-end   \u2193API REST   \u2193Node.js + ExpressBack-end<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O Front-end \u00e9 respons\u00e1vel pela interface e intera\u00e7\u00e3o com o usu\u00e1rio, enquanto o Back-end disponibiliza os dados atrav\u00e9s da API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa separa\u00e7\u00e3o permite entender na pr\u00e1tica como diferentes partes de uma aplica\u00e7\u00e3o Web trabalham juntas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00f3xima etapa: evolu\u00e7\u00e3o do Back-end<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta aula evolu\u00edmos o <strong>Front-end do Cat\u00e1logo de Produtos<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na pr\u00f3xima etapa vamos continuar o mesmo projeto, mas voltando nossa aten\u00e7\u00e3o para o <strong>Back-end com Node.js e Express<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, o projeto continua evoluindo dos dois lados:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>React \u2192 Front-end<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Node.js + Express \u2192 Back-end<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em vez de estudar tecnologias isoladamente, conseguimos visualizar como elas s\u00e3o utilizadas na constru\u00e7\u00e3o de uma aplica\u00e7\u00e3o completa.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta etapa nosso Cat\u00e1logo de Produtos ganhou <strong>valida\u00e7\u00e3o, contador autom\u00e1tico, busca com <code>filter()<\/code>, melhorias nos cards e uma nova interface<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mais importante do que adicionar funcionalidades \u00e9 entender o processo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um projeto n\u00e3o precisa nascer completo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos come\u00e7ar com uma vers\u00e3o simples e evolu\u00ed-la gradualmente conforme aprendemos novos conceitos e identificamos novas necessidades.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Programa\u00e7\u00e3o \u00e9 justamente isso: construir, testar, corrigir e evoluir.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo vamos continuar a evolu\u00e7\u00e3o do nosso Projeto Integrador \u2014 Cat\u00e1logo de Produtos, desenvolvido com React no Front-end e Node.js + Express no Back-end. Na primeira etapa constru\u00edmos a estrutura do projeto e realizamos a integra\u00e7\u00e3o entre Front-end e Back-end atrav\u00e9s de uma API REST. Agora vamos evoluir a aplica\u00e7\u00e3o adicionando novas funcionalidades ao Front-end com React. Nesta etapa implementamos: A proposta \u00e9 simples: em vez de come\u00e7ar outro projeto do zero, vamos aprender a evoluir uma aplica\u00e7\u00e3o que j\u00e1 funciona. Evoluindo o Front-end com React Uma das partes importantes do desenvolvimento de sistemas \u00e9 perceber que um projeto n\u00e3o termina quando a primeira vers\u00e3o funciona. Depois da estrutura inicial, come\u00e7am a surgir novas necessidades. No nosso Cat\u00e1logo de Produtos, por exemplo, o usu\u00e1rio j\u00e1 conseguia cadastrar e visualizar produtos. Mas ainda poder\u00edamos melhorar bastante a aplica\u00e7\u00e3o. Uma das primeiras mudan\u00e7as foi a valida\u00e7\u00e3o do formul\u00e1rio. Agora n\u00e3o permitimos o cadastro de produtos sem nome ou com pre\u00e7o igual ou menor que zero. Al\u00e9m de evitar dados incorretos, a aplica\u00e7\u00e3o tamb\u00e9m apresenta uma mensagem para orientar o usu\u00e1rio. Contador autom\u00e1tico de produtos Outra funcionalidade adicionada foi um contador. Como os produtos j\u00e1 est\u00e3o armazenados em um array, podemos utilizar a propriedade length: produtos.length Assim conseguimos mostrar automaticamente a quantidade de produtos cadastrados. Por exemplo: &lt;p&gt;Total de produtos: {produtos.length}&lt;\/p&gt; Quando a lista muda, o React atualiza a interface e o contador acompanha essa altera\u00e7\u00e3o. \u00c9 uma implementa\u00e7\u00e3o simples, mas demonstra muito bem como podemos utilizar os pr\u00f3prios dados da aplica\u00e7\u00e3o para atualizar a interface. Busca de produtos com filter() Uma das principais evolu\u00e7\u00f5es desta vers\u00e3o foi a cria\u00e7\u00e3o de uma busca de produtos pelo nome. Para isso utilizamos o m\u00e9todo filter() do JavaScript. A ideia principal \u00e9 filtrar o array original e gerar uma lista contendo somente os produtos correspondentes ao texto pesquisado. constprodutosFiltrados=produtos.filter((produto) =&gt;produto.nome.toLowerCase().includes(busca.toLowerCase())); Nesse pequeno trecho estamos utilizando tr\u00eas conceitos importantes: filter() percorre o array e seleciona os elementos que atendem \u00e0 condi\u00e7\u00e3o. includes() verifica se determinado texto est\u00e1 presente no nome do produto. toLowerCase() transforma os textos em letras min\u00fasculas, evitando problemas na busca por causa de letras mai\u00fasculas ou min\u00fasculas. Assim, se tivermos: Mouse GamerTeclado Mec\u00e2nicoMonitor e pesquisarmos: mouse a aplica\u00e7\u00e3o poder\u00e1 exibir somente o produto correspondente. Esse \u00e9 um \u00f3timo exemplo de como conceitos simples de JavaScript podem ser utilizados para criar uma funcionalidade real dentro de um projeto React. Melhorando a interface do projeto Tamb\u00e9m aproveitamos esta evolu\u00e7\u00e3o para melhorar bastante o visual da aplica\u00e7\u00e3o. Organizamos melhor: Al\u00e9m de funcionar corretamente, uma aplica\u00e7\u00e3o tamb\u00e9m precisa apresentar as informa\u00e7\u00f5es de forma clara para o usu\u00e1rio. Por isso, CSS e organiza\u00e7\u00e3o da interface tamb\u00e9m fazem parte da evolu\u00e7\u00e3o de um projeto Front-end. Programa\u00e7\u00e3o \u00e9 evolu\u00e7\u00e3o Um ponto importante desta aula \u00e9 entender que aprender programa\u00e7\u00e3o n\u00e3o significa apenas conhecer comandos isoladamente. Voc\u00ea pode conhecer: ifarraysobjetosfun\u00e7\u00f5esmap()filter() mas o aprendizado come\u00e7a a ganhar outra dimens\u00e3o quando precisamos juntar esses conceitos para resolver um problema. No nosso projeto, por exemplo, utilizamos estado, eventos, arrays, fun\u00e7\u00f5es e filter() para criar uma busca de produtos. \u00c9 por isso que desenvolver projetos \u00e9 t\u00e3o importante. Primeiro fazemos funcionar. Depois testamos. Corrigimos problemas. Adicionamos funcionalidades. Melhoramos a interface. E continuamos evoluindo. Assista \u00e0 aula completa Toda a evolu\u00e7\u00e3o do Front-end foi desenvolvida passo a passo durante uma live no canal Desvendando o C\u00f3digo. Na aula voc\u00ea poder\u00e1 acompanhar a implementa\u00e7\u00e3o, os testes e o processo de evolu\u00e7\u00e3o do projeto. C\u00f3digo atualizado no GitHub O projeto completo e atualizado est\u00e1 dispon\u00edvel no GitHub. No reposit\u00f3rio voc\u00ea encontrar\u00e1 o Front-end desenvolvido com React e o Back-end com Node.js e Express. https:\/\/github.com\/marcoscaldas\/Projeto_Catalogo_Produtos_PW2_DSI.git Voc\u00ea pode utilizar o c\u00f3digo para acompanhar a aula, estudar a estrutura do projeto e desenvolver suas pr\u00f3prias melhorias. Front-end e Back-end trabalhando juntos Apesar de nesta etapa nosso foco estar no React, o Cat\u00e1logo de Produtos continua sendo um projeto integrado. A estrutura permanece: ReactFront-end \u2193API REST \u2193Node.js + ExpressBack-end O Front-end \u00e9 respons\u00e1vel pela interface e intera\u00e7\u00e3o com o usu\u00e1rio, enquanto o Back-end disponibiliza os dados atrav\u00e9s da API. Essa separa\u00e7\u00e3o permite entender na pr\u00e1tica como diferentes partes de uma aplica\u00e7\u00e3o Web trabalham juntas. Pr\u00f3xima etapa: evolu\u00e7\u00e3o do Back-end Nesta aula evolu\u00edmos o Front-end do Cat\u00e1logo de Produtos. Na pr\u00f3xima etapa vamos continuar o mesmo projeto, mas voltando nossa aten\u00e7\u00e3o para o Back-end com Node.js e Express. Assim, o projeto continua evoluindo dos dois lados: React \u2192 Front-end Node.js + Express \u2192 Back-end Em vez de estudar tecnologias isoladamente, conseguimos visualizar como elas s\u00e3o utilizadas na constru\u00e7\u00e3o de uma aplica\u00e7\u00e3o completa. Conclus\u00e3o Nesta etapa nosso Cat\u00e1logo de Produtos ganhou valida\u00e7\u00e3o, contador autom\u00e1tico, busca com filter(), melhorias nos cards e uma nova interface. Mais importante do que adicionar funcionalidades \u00e9 entender o processo. Um projeto n\u00e3o precisa nascer completo. Podemos come\u00e7ar com uma vers\u00e3o simples e evolu\u00ed-la gradualmente conforme aprendemos novos conceitos e identificamos novas necessidades. Programa\u00e7\u00e3o \u00e9 justamente isso: construir, testar, corrigir e evoluir.<\/p>\n","protected":false},"author":1,"featured_media":2323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2322"}],"version-history":[{"count":3,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2322\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2322\/revisions\/2326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2323"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}