PixelArt Revitalizado com React
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.
-
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.
-
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.
-
Certifique-se de ter o Node.js instalado em seu computador.
-
Clone este repositório para o seu computador:
git clone https://github.com/seu-usuario/pixelart-revitalizado.git
cd pixelart-revitalizado
- Instale as dependências do projeto:
npm install
- Inicie o servidor de desenvolvimento:
npm start
- O aplicativo estará disponível em http://localhost:3000 em seu navegador.
-
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.