/pixelArt

Primary LanguageTypeScript

PixelArt Revitalizado com React

Descrição do Projeto

O PixelArt Revitalizado é uma versão atualizada e aprimorada do projeto PixelArt, desenvolvido durante o curso da Trybe. O objetivo principal do projeto é criar um site interativo de desenhos de pixel art, onde os usuários podem criar suas obras de arte usando cores aleatórias (exceto preto e branco) em uma tela de desenho. Agora, o usuário pode escolher o tamanho do espaço de desenho, permitindo criar pixel arts em qualquer dimensão desejada. Além disso, o desenho feito pelo usuário será salvo automaticamente no localStorage do navegador, permitindo que o progresso do desenho seja mantido mesmo após fechar e reabrir a página.

Funcionalidades Principais

  • Tela de Desenho: Os usuários podem selecionar cores aleatórias da paleta de cores disponível e clicar em um pixel da tela de desenho para pintá-lo com a cor selecionada.

  • Paleta de Cores: A paleta de cores apresenta cores aleatórias (exceto preto e branco) para que o usuário possa escolher e aplicar ao desenho.

  • Auto Salvamento: Cada ação de pintar um pixel é salva automaticamente no localStorage, garantindo que o progresso do desenho seja mantido mesmo após fechar a página.

  • Alteração no Espaço de Desenho: Agora o usuário pode escolher o tamanho do espaço de desenho, definindo a quantidade de pixels na largura e altura, permitindo criar pixel arts em qualquer dimensão desejada.

Melhorias Realizadas

  • Refatoração para React: O projeto foi reestruturado utilizando a biblioteca React para melhorar a organização do código, reutilização de componentes e melhor performance.

  • Design Aprimorado: O layout e a aparência do site foram atualizados para uma experiência mais agradável e amigável aos usuários.

  • Paleta de Cores Personalizada: Além das cores aleatórias, foram adicionadas opções para o usuário criar uma paleta de cores personalizada, permitindo escolher e salvar cores específicas para o desenho.

Instalação

  1. Certifique-se de ter o Node.js instalado em seu computador.

  2. Clone este repositório para o seu computador:

git clone https://github.com/seu-usuario/pixelart-revitalizado.git
cd pixelart-revitalizado
  1. Instale as dependências do projeto:
npm install
  1. Inicie o servidor de desenvolvimento:
npm start
  1. O aplicativo estará disponível em http://localhost:3000 em seu navegador.

Tecnologias Utilizadas

  • React: Biblioteca JavaScript para a construção de interfaces de usuário.

  • JavaScript ES6: A versão mais recente do JavaScript, trazendo recursos modernos para o projeto.

  • HTML5 e CSS3: Utilizados para a estruturação e estilização do site.