Product Store

Projeto de estudo feito para praticar uma aplicação full stack com CRUD de produtos.

O objetivo aqui não é apenas mostrar o resultado final, mas também deixar claro o que foi usado em cada parte do sistema e como as peças se conectam.

Deploy

A aplicação está publicada no Render e pode ser acessada por aqui: https://product-store-react.onrender.com

Sobre o projeto

Esta aplicação permite:

• listar produtos cadastrados
• criar novos produtos
• atualizar produtos existentes
• excluir produtos

O frontend consome a API do backend, e os dados são persistidos no MongoDB.

Tecnologias utilizadas

Backend

• Node.js: ambiente de execução do JavaScript no servidor
• Express: criação da API REST
• Mongoose: modelagem e acesso ao MongoDB
• dotenv: carregamento de variáveis de ambiente
• nodemon: reinicialização automática do servidor durante o desenvolvimento
• cross-env: compatibilidade de variáveis de ambiente entre sistemas operacionais

Frontend

• React: construção da interface
• Vite: ferramenta de build e ambiente de desenvolvimento
• React Router DOM: rotas entre as páginas
• Chakra UI: componentes de interface e estilos
• Zustand: gerenciamento de estado global dos produtos
• Framer Motion: animações
• react-icons: ícones
• next-themes: suporte a tema

Como o projeto foi estruturado

Backend

O backend está na pasta backend/ e segue uma estrutura simples de API REST:

• server.js: inicializa o servidor Express, registra as rotas e sobe a aplicação
• config/db.js: faz a conexão com o MongoDB
• models/product.model.js: define o schema de produto no Mongoose
• controllers/product.controller.js: concentra a lógica das operações de CRUD
• routes/product.route.js: expõe os endpoints da API

Os endpoints disponíveis são:

• GET /api/products: lista todos os produtos
• POST /api/products: cria um produto
• PUT /api/products/:id: atualiza um produto
• DELETE /api/products/:id: remove um produto

Frontend

O frontend está na pasta frontend/ e foi construído com Vite + React:

• src/main.jsx: ponto de entrada da aplicação
• src/App.jsx: define a estrutura geral e as rotas
• src/pages/HomePage.jsx: página inicial com a listagem dos produtos
• src/pages/CreatePage.jsx: página para cadastrar novos produtos
• src/components/Navbar.jsx: navegação
• src/components/ProductCard.jsx: card individual de produto
• src/store/product.js: store com Zustand para buscar, criar, atualizar e excluir produtos

Fluxo da aplicação

1. O frontend carrega a página inicial e busca os produtos na API.
2. A store com Zustand centraliza o estado dos produtos.
3. As ações de criar, editar e excluir fazem chamadas para o backend.
4. O backend valida os dados, conversa com o MongoDB e devolve a resposta em JSON.
5. A interface atualiza sem precisar recarregar a página.

Requisitos

• Node.js instalado
• MongoDB local ou remoto
• Variável de ambiente MONGO_URI configurada

Variáveis de ambiente

Crie um arquivo .env na raiz do projeto com algo como:

PORT=5000
MONGO_URI=sua_string_de_conexao_do_mongodb

Como executar o projeto

Instalação

Na raiz do projeto:

npm install
npm install --prefix frontend

Desenvolvimento

Abra dois terminais:

npm run dev

Esse comando inicia o backend em modo desenvolvimento.

No outro terminal:

npm run dev --prefix frontend

Isso sobe o frontend com Vite.

Build para produção

Na raiz do projeto:

npm run build

Esse script instala as dependências necessárias e gera o build do frontend.

Execução em produção

Depois do build, inicie o backend com:

npm start

Em produção, o backend também serve os arquivos estáticos gerados pelo frontend.

Observações de estudo

Este projeto foi montado para praticar conceitos essenciais de uma aplicação full stack:

• integração entre frontend e backend
• criação de API REST
• persistência de dados com MongoDB
• organização em camadas: rotas, controllers, models e store
• gerenciamento de estado no React
• uso de componentes de UI prontos para acelerar a montagem da interface

Estrutura resumida

product-store/
├── backend/
│   ├── config/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   └── server.js
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   └── store/
│   └── vite.config.js
└── README.md