Crie uma lista de compras dinâmica para te ajudar a lembrar quais itens comprar no supermercado! Pratique conceitos fundamentais de React com este Mini Projeto.

🤓 Antes de começar

Este projeto já possui um setup pré-configurado utilizando o Vite. Sinta-se à vontade para utilizá-lo ou, se preferir, começar do zero!

🔨 Requisitos

Formulário

• Implemente a funcionalidade do formulário para que, ao submetê-lo, o item seja adicionado à lista de compras.
  • Você pode optar por utilizar inputs controlados ou não controlados. Pratique a abordagem com a qual você tem menos familiaridade.
  • Ao submeter um item, apague o formulário.
  • Ao submeter um item, dê o foco no primeiro input para que seja fácil escrever outro item novamente pelo usuário.

Concluir Item

• Implemente a funcionalidade de marcar um item como concluído ao clicar no botão correspondente.
  • Este item deverá ser movido para a lista de "Itens já comprados".
  • O texto do item marcado deverá ser riscado e ter uma cor mais clara.
  • O ícone de "A fazer" (círculo vazio) deverá ser substituído pelo ícone de "Feito" (check).

Excluir Item

• Implemente a funcionalidade de excluir um item ao clicar no ícone de lixeira.

Componentização

• Organize o código em componentes e mantenha-o legível.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. No entanto, sinta-se à vontade para criar a aplicação de acordo com a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre este mini-projeto

O que você irá praticar:

React

• Componentes controlados e não controlados
• Formulários
• Estado
• Renderização condicional
• Manipulação de eventos (onClick vs onSubmit)

Dica

Preste atenção na estrutura de dados do seu estado.
Você prefere usar formulário controlado ou não controlado neste caso?

Pré-requisitos

• Conhecimento básico de React (JSX, componentes, props)