DEV Community: Vinícius Neto

[Boost]

Vinícius Neto — Wed, 05 Mar 2025 01:19:47 +0000

Website pessoal interativo: Terminal Simulado com React e Next.js

Vinícius Neto ・ Mar 5

Interactive Personal Website: Simulated Terminal with React and Next.js

Vinícius Neto — Wed, 05 Mar 2025 01:17:42 +0000

I just finished an interesting project: a React application that implements an isolated component architecture to create an interactive experience based on Linux command terminal and the macOS Operating System.

Access here: viniciusneto.dev

The Technical Concept

I developed a Single Page Application with React and Next.js that uses a decoupled componentization system to render an interface that simulates an operating system environment. The architecture was structured using the component composition pattern, with controlled props drilling and local state management through React hooks. The system implements a terminal modal that executes pre-programmed command sequences through an asynchronous progressive rendering mechanism.

Technical Challenges

One of the most complex challenges was implementing the asynchronous rendering system for terminal lines. I used a pattern of useEffect with controlled dependencies and sequential promises to simulate real-time command execution, avoiding blocking JavaScript's main thread. To enhance performance, I implemented a memo system for rendered components and a throttling algorithm to control the rendering rate.

Another significant challenge was implementing the theme system with a custom ThemeProvider and Tailwind, ensuring the inheritance of style properties across multiple component levels without causing unnecessary re-renders. I used Context API and useMemo to avoid the prop drilling problem and minimize re-renders.

Technologies Used

React 18/19: Implementation of features such as Concurrent Mode and Suspense, Context API, useEffect and useState
Next.js 14/15: Using App Router and Server Components for SEO optimization
Tailwind CSS: With custom plugin configuration and JIT compiler
Advanced React Hooks: useCallback, useMemo, useRef for performance optimization
Lucide React: Integration of icon system with dynamic loading
Sentry: Implementation of real-time error monitoring and performance tracking
Google Analytics 4: Integration for user behavior analysis and engagement metrics

Main Features

Interactive terminal: Progressive rendering system that simulates UNIX commands
Isolated component architecture: Design pattern that facilitates maintenance and scalability
Light/dark theme: Implemented with Context API and localStorage for persistence
Advanced animation control: Throttling system to control update rate
Viewport and responsiveness control: Using intersection observer and dynamic media queries
Modal with lifecycle control: Complete modal state management system

This project allowed me to deepen my knowledge of advanced React patterns, such as component memoization to avoid unnecessary renders, implementation of custom hooks for shared logic, and performance optimization techniques like code splitting and lazy loading.
I also explored advanced Next.js features, such as implementing the App Router architecture and Server Components, allowing for hybrid rendering that combines client-side interactivity with server-side rendering performance. I used the layout nesting strategy to share UI elements across multiple routes and implemented optimized data fetching with ISR (Incremental Static Regeneration) for the best balance between performance and updated data.

The architecture was designed with a focus on separation of concerns, using the presentational and container components pattern, with dependency injection to facilitate testing and maintenance. The Next.js routing system was organized to maximize cache utilization and minimize the volume of JavaScript on the client.

How about taking a look?
A live version is published at: viniciusneto.dev

Feedback and suggestions are very welcome!

WebDevelopment #React #NextJS #FrontendDevelopment #TailwindCSS #JavaScript #InteractiveUI

Website pessoal interativo: Terminal Simulado com React e Next.js

Vinícius Neto — Wed, 05 Mar 2025 01:13:44 +0000

Acabei de finalizar um projeto interessante: uma aplicação React que implementa uma arquitetura de componentes isolados para criar uma experiência interativa baseada em terminal de comando Linux e o Sistema Operacional macOS.

Acesse aqui: viniciusneto.dev

O Conceito Técnico

Desenvolvi uma aplicação Single Page Application com React e Next.js que utiliza um sistema de componentização desacoplada para renderizar uma interface que simula um ambiente de sistema operacional. A arquitetura foi estruturada utilizando o padrão de composição de componentes, com props drilling controlado e gerenciamento de estado local através de React hooks. O sistema implementa um modal de terminal que executa sequências de comandos pré-programados por meio de um mecanismo assíncrono de renderização progressiva.

Desafios Técnicos

Um dos desafios mais complexos foi implementar o sistema de renderização assíncrona das linhas do terminal. Utilizei um padrão de useEffect com dependências controladas e promises sequenciais para simular a execução de comandos em tempo real, evitando o bloqueio da thread principal do JavaScript. Para potencializar a performance, implementei um sistema de memo para os componentes renderizados e um algoritmo de throttling para controlar a taxa de renderização.

Outro desafio significativo foi a implementação do sistema de temas com ThemeProvider customizado e Tailwind, garantindo a herança de propriedades de estilo através de múltiplos níveis de componentes sem causar re-renderizações desnecessárias. Utilizei Context API e useMemo para evitar o problema de prop drilling e minimizar re-renderizações.

Tecnologias Utilizadas

React 18/19: Implementação de recursos como Concurrent Mode e Suspense, Context API, useEffect e useState
Next.js 14/15: Utilizando App Router e Server Components para otimização de SEO
Tailwind CSS: Com configuração personalizada de plugins e JIT compiler
React Hooks Avançados: useCallback, useMemo, useRef para otimização de performance
Lucide React: Integração de sistema de ícones com carregamento dinâmico
Sentry: Implementação de monitoramento de erros em tempo real e rastreamento de performance
Google Analytics 4: Integração para análise de comportamento de usuário e métricas de engajamento

Features Principais

Terminal interativo: Sistema de renderização progressiva que simula comandos UNIX
Arquitetura de componentes isolados: Padrão de design que facilita manutenção e escalabilidade
Tema claro/escuro: Implementado com Context API e localStorage para persistência
Controle avançado de animações: Sistema de throttling para controlar a taxa de atualização
Controle de viewport e responsividade: Usando intersection observer e media queries dinâmicas
Modal com controle de lifecycle: Sistema completo de gerenciamento de estado do modal

Este projeto me permitiu aprofundar o conhecimento em padrões avançados de React, como o uso de memorização de componentes para evitar renderizações desnecessárias, implementação de hooks customizados para lógica compartilhada, e técnicas de otimização de performance como code splitting e lazy loading.

Também explorei recursos avançados do Next.js, como a implementação da arquitetura App Router e Server Components, permitindo uma renderização híbrida que combina a interatividade do client-side com a performance do server-side rendering. Utilizei a estratégia de layout nesting para compartilhar elementos de UI entre múltiplas rotas e implementei data fetching otimizado com ISR (Incremental Static Regeneration) para o melhor balanço entre performance e dados atualizados.

A arquitetura foi projetada com foco na separação de responsabilidades, utilizando o padrão de presentational e container components, com injeção de dependências para facilitar testes e manutenção. O sistema de roteamento do Next.js foi organizado para maximizar o aproveitamento de cache e minimizar o volume de JavaScript no cliente.

Que tal dar uma olhada?
Uma versão live está publicada em: viniciusneto.dev

Feedback e sugestões são muito bem-vindos!

WebDevelopment #React #NextJS #FrontendDevelopment #TailwindCSS #JavaScript #InteractiveUI

Aprender em Público

Vinícius Neto — Tue, 16 Nov 2021 18:41:06 +0000

A primeira vez que eu tive contato com esse tema, foi através do Twitter do Sibelius e depois de ler alguns artigos dele sobre isso, nas referências encontrei o blog do Shawn Wang onde ele explica um pouco mais a fundo sobre o que se trata o Learn in Public, ou Aprender em Público.

A maioria das pessoas aprendem em 'privado', ou seja, independente se essas pessoas cursam uma universidade, curso técnico, YouTube, Udemy, etc, elas consomem o conteúdo e guardam para si, sem compartilhar tanto dúvidas que surgiram durante algum estudo ou mesmo quanto compartilhar o que a pessoa aprendeu após estudar determinado assunto.

O processo de aprender algo pode deixar de ser complexo, estudar em silêncio ou no privado, pode não ser a melhor forma para todas as pessoas, pois se você tem diversas dúvidas e é uma pessoa que gosta de compartilhar ideias, debater sobre conteúdos, por qual motivo não está Aprendendo em Púbico durante seus estudos?

Uma das melhores formas de estudar, é ensinando. Por exemplo, digamos que eu estou aprendendo sobre X, nunca vi sobre X na minha vida então é tudo novo para mim, se eu estudar todo o assunto e guardar tudo para mim no privado, provavelmente alguns tópicos não foram compreendidos e poderiam ter sido melhor aproveitados, quando eu passo a escrever sobre aquilo que aprendo e a compartilhar com outras pessoas publicamente, se abre um espaço para debater sobre determinado assunto e com isso receber formas diferentes de enxergar as coisas.

Nem sempre você vai entender pela abordagem de um artigo A, pode ser que alguma pessoa acabe te explicando usando outra linguagem ou usando exemplos diferentes que façam sentido para você, por isso é importante compartilhar o que você está aprendendo e também tirar dúvidas publicamente para ter mais 'pontos de vista' sobre algo, quanto mais formas de se enxergar algo você tiver, melhor é, pois as coisas começam a fazer sentido ao ter várias formas de aprender um assunto.

Um tempo atrás eu resolvia as coisas no privado, em grande parte, no máximo trocava alguma ideia com pessoas próximas, mas nunca publicamente. Me deparava com um problema, corria pro Stack Overflow, dezenas de abas no navegador, assistia vídeos, lia artigos, mas não comentava nada com ninguém, passava pelo trajeto sozinho, sendo que provavelmente alguma outra pessoa já havia passado pelo mesmo problema e se compartilhado em público, poderia reunir dezenas de pessoas para comentarem sobre a dúvida.

Algumas dicas que deixo aqui sobre como começar a aprender em público, escolha redes sociais públicas, como o Twitter, e comece a se conectar com pessoas por aí, escrevendo sobre seus aprendizados, dúvidas, e também inicie discussões para que fortaleça o entendimento do assunto. Escreva artigos como este no DEV Community, ou no Substack, Medium, existem centenas de locais para se fazer isso. Você pode também gravar vídeos, se gosta desse formato de comunicação, o importante é compartilhar o conhecimento publicamente e começar a praticar o Aprender em Público!

Espero que essa leitura tenha feito algum sentido para você, sinta-se a vontade para comentar sobre, pontuar alguma discordância ou dar mais dicas sobre esse tema! Continue em frente, aproveite as redes sociais para se comunicar com o máximo de pessoas que puder, compartilhe o conhecimento sempre!

Estados: useState()

Vinícius Neto — Tue, 26 Oct 2021 18:11:23 +0000

O useState é um Hook de controle de estado para componentes React, mas o que são hooks? Hooks são funções que permitem a você “ligar-se” aos recursos de state e ciclo de vida do React a partir de componentes funcionais. Hooks não funcionam dentro de classes, eles permitem que você use React sem classes.

Digamos que o useState foi criado para dar vida aos estados de um componente e ele poder ser atualizado dinamicamente na página.

useState
Exemplo abaixo:

const [count, setCount] = useState(0);

O useState funciona como uma desestruturação de Array, onde temos as variáveis count e setCount, a variável count é a variável que guarda o valor original e se o usuário deseja atualizar esse valor, ele vai passar a responsabilidade para a variável setCount, por convenção a variável que atualiza o valor, recebe a palavra 'set' no inicio, por exemplo: setText, setCount, setUser, etc.

Imagem para ilustrar o que foi explicado até aqui:

Importamos o Hook useState do React. Ele nos permite manter o state local em um componente de função.

import React, { useState } from 'react';

Dentro do componente Example, declaramos uma nova variável de state chamando o Hook useState. Ele retorna um par de valores, no qual damos nomes. Estamos chamando nossa variável count porque ela mantém o número de cliques no botão. Inicializamos como zero passando 0 como o único argumento do useState. O segundo item retornado é a própria função. Ela nos permite atualizar o count então nomeamos para setCount.

const [count, setCount] = useState(0);

Quando o usuário clica, chamamos setCount com um novo valor. O React então vai re-renderizar o componente Example, passando o novo valor de count para ele.

<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>

Obrigado por ler o artigo até aqui, algumas informações foram retiradas do site oficial do React

E você, já utiliza o useState nos seus componentes? Até a próxima!

O que é React JS e como começar a utilizar?

Vinícius Neto — Mon, 25 Oct 2021 20:10:32 +0000

Se você já acessou ou for acessar agora a página oficial do React, a descrição dele é: Uma biblioteca JavaScript para criar interfaces de usuário!

O React foi desenvolvido pelo Facebook e lançado no ano de 2013, atualmente ele é mantido pelo próprio Facebook, Instagram, demais empresas e pela comunidade de desenvolvedores individuais. O React é amplamente utilizado para construir as soluções de grandes empresas como Netflix, Airbnb, entre outras.

O surgimento do React dentro do Facebook se deu pelo objetivo de otimizar a atualização das atividades simultâneas no feed da rede, seja o chat, status, posts, entre outros.

Como funciona o React?

O React, sendo uma biblioteca front-end, tem como objetivo facilitar a conexão das partes, ou elementos de uma página, seu funcionamento se dá pelo que é chamado de componentes.

Mas o que são esses componentes?
Imaginemos uma página web muito simples, como um formulário com cinco inputs para o o usuário digitar e no final um botão para enviar os dados preenchidos.

Note que nessa página, existem os cinco inputs para digitação e um botão, no HTML convencional o desenvolvedor criaria esses cinco inputs e o botão, totalizando 6 elementos na nossa página.

Se por algum motivo, precisar ser adicionado mais cinco inputs e um novo botão, o desenvolvedor teria de criar esses elementos adicionais na página e assim totalizando 10 inputs e mais o botão, ficando com 12 elementos.

Agora no React, essa mesma abordagem seria um pouco mais simples, como tratamos os elementos como componentes, já podemos presumir que um input pode ser um componente, assim como um botão, então podemos fazer a criação de somente um input e um botão como componentes e utilizar quantas vezes quisermos, se for preciso adicionar centenas de botões (por exemplo) só é necessário um componente botão e na nossa página fazer o uso desse componente no HTML.

Aqui uma imagem para ilustrar essa ideia de componente:

Note que temos somente 4 componentes, mas no desenho ao lado, foi possível adicionar eles quantas vezes forem necessárias. E isso dá ao desenvolvimento uma organização muito maior do layout.

Como utilizar o React?

[Passo 1 - Node.js]
Presumo que você tenha algum conhecimento de React nesse momento. Primeiro de tudo, você deve instalar o Node.js, você pode baixar a versão para o seu sistema operacional através desse link: Node.js

Após fazer o download e instalação do Node.js, você pode conferir se o mesmo foi instalado corretamente abrindo um terminal ou cmd e digitar o seguinte comando: node --version. na linha abaixo deve aparecer qual a versão do node foi instalado, caso não apareça a versão, você deve ter instalado incorretamente e sugiro que repita este passo. Se você visualizou a versão, vamos para o próximo passo.

[Passo 2 - Editor de texto]
Você pode utilizar o editor que preferir, eu particularmente utilizo o VSCode, caso não tenha e queira utilizar, você pode baixar através desse link: vscode

Após a instalação, abra o seu vscode. Você deve criar uma pasta para a aplicação que vamos desenvolver, então faça onde você preferir. Depois de criar a pasta você deve abrir ela no vscode, note que após abrir, não há nada dentro, mas vamos criar no próximo passo.

[Passo 3 - Criando um React App]
Com a pasta do projeto aberta no vscode, abra o terminal do vscode. Mas antes vou explicar a diferença entre os dois comandos que podemos utilizar para criar um projeto em React.

npx create-react-app meu-app

Com este comando acima, dentro da pasta que você criou para o projeto, vai ser criada mais uma pasta chamada meu-app, pois este último comando é para criar uma pasta com esse nome, então se você está na pasta 'projeto-react' e usa esse comando acima, dentro da sua pasta 'projeto-react' vai ser criada a pasta 'meu-app', ficando dessa maneira: desktop/react/projeto-react/meu-app

npx create-react-app .

Já com esse comando, note que ao invés de ter o nome da nossa pasta do projeto, tem um ponto '.', isso quer dizer que ao rodar o comando, todos os arquivos React serão inseridos dentro da pasta que você está, então ficaria a seguinte estrutura: desktop/react/projeto-react (e dentro dessa pasta ficará o seus arquivos do projeto).

Você pode escolher qualquer um deles, eu particularmente crio uma pasta para o projeto, abro essa pasta no vscode e utilizo o segundo comando, npx create-react-app .

Agora depois dessas explicações, crie o seu projeto React.

Quando terminar de baixar todos os arquivos, irá aparecer uma mensagem no terminal informando que o processo foi concluído.

[Passo 4 - Executando o seu projeto React]
Para executar o projeto, é bem fácil, no seu terminal, digite o comando npm start

Uma janela será aberta automaticamente no seu navegador com o projeto React sendo executado! Parabéns, você criou o seu primeiro projeto em React!

Nos próximos artigos, iremos continuar a criação do nosso projeto iniciado aqui!