🛒Lista de Compras
Este documento fornece detalhes completos sobre o projeto "Desenvolvimento de um Site de Lista de Compras", incluindo os objetivos, requisitos, e etapas para conclusão.
Figma
Link direto: https://www.figma.com/design/PAoEYbtcDcdTJLBtuykcU1/Lista-de-Compras?node-id=0-1&t=zL0Q94ldgqACgGz7-1
Descrição do Projeto
Este projeto envolve a criação de um site de lista de compras utilizando ReactJS para o frontend e Express para o backend. O objetivo é permitir que os usuários adicionem e removam itens de suas listas de compras e visualizem a lista completa.
Objetivos
Adicionar itens: Permitir que os usuários adicionem novos itens à lista de compras.
Remover itens: Permitir que os usuários removam itens da lista de compras.
Exibir lista de compras: Mostrar uma lista de todos os itens adicionados.
Requisitos
Frontend
ReactJS: Utilize React para construir a interface do usuário.
Componentes:
Formulário para adicionar itens.
Lista de itens.
Botão para remover itens.
Backend
ExpressJS: Utilize Express para construir a API.
Endpoints:
POST /items: Adicionar um novo item à lista.GET /items: Recuperar todos os itens da lista.DELETE /items/:id: Remover um item da lista.
Banco de Dados
MongoDB: Utilize MongoDB para armazenar os dados dos itens.
Passos para Conclusão
Configuração do Ambiente: Configure seu ambiente de desenvolvimento com ReactJS, ExpressJS e MongoDB.
Configuração do Backend:
Crie um novo projeto Node.js.
Instale e configure o Express.
Defina os modelos de dados para os itens da lista de compras.
Crie os endpoints para manipulação dos dados.
Configuração do Frontend:
Crie um novo projeto React.
Desenvolva os componentes necessários (formulário de adição de itens, lista de itens, botão de remoção).
Conecte o frontend ao backend utilizando axios ou fetch.
Testes: Teste todas as funcionalidades para garantir que estão funcionando corretamente.
Deploy: Faça o deploy da aplicação em um serviço de hospedagem como Heroku, Netlify ou Vercel.
Conclusão
Este projeto fornece uma oportunidade prática para aplicar os conhecimentos de ReactJS, ExpressJS e MongoDB, desenvolvendo uma aplicação web completa. Siga os passos fornecidos e utilize os recursos adicionais para auxiliar no desenvolvimento do projeto. Boa sorte!
Last updated