🐾 PetShop

PetShop é uma aplicação para produtos de pets, desenvolvida utilizando React + TypeScript + Tailwind CSS, com consumo de dados através de uma API REST simulada utilizando JSON Server.

O objetivo principal do projeto foi praticar conceitos importantes do ecossistema React, como Context API para gerenciamento de estado global, componentização, rotas com React Router e organização de layout em aplicações modernas.

A aplicação permite navegar pelos produtos, visualizar detalhes e gerenciar um carrinho de compras compartilhado entre todas as páginas da aplicação.

🏠 Páginas e Funcionalidades

🔹 Home 🐶

Responsável por exibir a listagem dos produtos consumidos da API.

Nessa página, o usuário pode:

Visualizar os produtos disponíveis no petshop

Adicionar produtos diretamente ao carrinho

Clicar em um produto para acessar a página de detalhes

🔹 Detail 📖

Exibe informações completas de um produto selecionado.

Ao acessar essa página, o usuário pode:

Visualizar descrição do produto

Ver preço e imagem do item

Adicionar o produto ao carrinho

🔹 Cart 🛒

Página responsável por exibir todos os produtos adicionados ao carrinho.

Nela é possível:

Visualizar todos os itens adicionados

Aumentar ou diminuir a quantidade de cada produto

Remover produtos do carrinho

Visualizar o valor total da compra

⚙️ Gerenciamento de Estado

O projeto utiliza a Context API do React para gerenciar globalmente o estado do carrinho de compras.

Foi criado um CartContext responsável por armazenar:

Produtos adicionados ao carrinho

Quantidade de itens

Funções para adicionar e remover produtos

Cálculo do valor total da compra

Dessa forma, qualquer componente da aplicação pode acessar ou modificar o carrinho sem a necessidade de prop drilling, deixando o código mais organizado e escalável.

🧩 Estrutura de Layout

A aplicação utiliza um Layout component para manter uma estrutura padrão entre todas as páginas.

Ele garante que elementos como Header e Footer estejam presentes em todas as rotas da aplicação.

O Outlet do React Router é responsável por renderizar dinamicamente o conteúdo de cada página dentro da estrutura principal.

🛠️ Tecnologias utilizadas

React.js

TypeScript

Tailwind CSS

Vite

React Router DOM

Context API

JSON Server

📸 Preview da aplicação