App Web • Mercado

Como tive a ideia do app

Até Março de 2025, eu e minha esposa vivíamos praticamente o mesmo ritual quando chegava o dia das compras do mês:

1. O celular dela com app nativo de notas utilizado como lista de compras para dar o check [ x ].
2. O meu celular com app nativo de calculadora.
3. E aquela dúvida macabra de: "Será que esse item vai estourar o orçamento?"

Além de ser extremamente ineficiente usar essas duas ferramentas separadamente, era um saco e mentalmente cansativo:

→ Check no item → Soma ao valor anterior → Copia o valor (ou tira print) pra não perder o que já foi adicionado → Repete até o último item.

Diante dessa insatisfação (e maluquice de querer automatizar e facilitar quase tudo), decidi construir uma ferramenta que facilitasse nosso processo de compras mensais. Assim nasceu o Mercado (eu realmente não pensei em nada criativo para o nome):

App feito para compras com controle de itens e financeiro em tempo real :)

O app web centraliza tudo o que necessita para quem gosta de ter controle das suas compras mensais ou semanais: listas de compras, lembretes de itens e controle visual de orçamento.

Principais funcionalidades:

1️⃣ Orçamento em tempo real

• Você define quanto quer gastar na compra.

• Cada item adicionado atualiza o Total Gasto.

• O app mostra se você está economizando ou extrapolando.

2️⃣ Gestão de Itens em 3 Níveis

• Lembretes: Itens que você não pode esquecer nessa compra.

• Compras: Itens ativos onde você adiciona quantidade e preço.

• Listas: Conjuntos prontos que podem ser reutilizados, evitando adicionar item por item em cada compra mensal ou semanal (essa foi a melhor feat do app, sério!).

3️⃣ Interface limpa e prática

Tentei ao máximo deixar a aplicação bem objetiva e intuitiva com as funções mais necessárias. Em termos de usabilidade, caso o usuário tenha uma longa lista (a partir de 10 itens), adicionei um "voltar ao topo" e "retorno ao último item" pra ficar mais fluido o uso.

Além disso, ao adicionar algum item em compras, o item adicionado é sempre o do topo, facilitando o complemento da unidade e preço logo em seguida.

Eu decidi compartilhar publicamente esse projeto pra mostrar como programação impacta o cotidiano com a construção de ferramentas extremamente úteis. A tecnologia está aqui pra nos servir e com o avanço das LLMs, se usadas corretamente, pode-se construir impactos expressivos pra quem está ao redor.

Inclusive, construir essa aplicação durante esse tempo foi uma das maneiras mais interessantes de aprender as stacks que utilizei. Aproveitem esse tempo de abundância de conhecimento pra construir coisas maneiras!

Além de criar um ferramenta maneira para mim e minha esposa nas idas ao mercado, me ajudou a desenvolver um pouco de robustez e aprofundar os meus conhecimentos no front. Espero sinceramente que, de alguma forma, essa ferramenta seja útil pra alguém como tem sido pra mim.

Stacks

• NextJS → Framework para aplicações React.
• React → Biblioteca para interfaces interativas.
• TailwindCSS (V4) → Estilização utilitária e responsiva.
• Shadcn UI → Biblioteca de componentes (delicinha).
• Local Storage → Armazenamento de todos os dados inseridos no navegador.

Instalação

→ git clone https://github.com/ojonatasquirino/mercado.git